Flutter按下变色的图标按钮

最新推荐文章于 2025-02-24 17:09:54 发布

gaoyp

最新推荐文章于 2025-02-24 17:09:54 发布

阅读量1.8k

点赞数

分类专栏： Flutter 文章标签： Flutter button icon 按下效果

本文链接：https://blog.youkuaiyun.com/gaoyp/article/details/120527131

版权

Flutter 专栏收录该内容

65 篇文章

订阅专栏

这篇博客详细介绍了如何使用Flutter的TextButton组件创建一个带有内边距、图标和文字的按钮，并自定义了按下状态的颜色、背景透明度、尺寸和视觉密度。在点击按钮时，触发显示'aaaaa'的吐司提示。此示例展示了Flutter中自定义UI组件的方法和事件处理机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TextButton(
  child: Padding(
    padding: EdgeInsets.only(left: 20, right: 20),
    child: Text.rich(
      TextSpan(style: TextStyle(color: Colors.black54, fontSize: 13), children: [
        WidgetSpan(
          child: Icon(
            Icons.arrow_back_ios,
            //color: Colors.white,
          ),
          alignment: PlaceholderAlignment.middle,
        ),
      ]),
    ),
  ),
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.resolveWith((states) {
      return states.contains(MaterialState.pressed) ? Color(0xAAFFFFFF) : Colors.white;
    }),
    overlayColor: MaterialStateProperty.all(Colors.transparent),
    visualDensity: VisualDensity.compact,
    minimumSize: MaterialStateProperty.all(Size(50, 47)),
  ),
  onPressed: () {
    ToastUtil.toast('aaaaa');
  },
),