Flutter TextButton 详细使用配置、Flutter ButtonStyle样式概述实践

最新推荐文章于 2025-06-11 08:53:09 发布

早起的年轻人

最新推荐文章于 2025-06-11 08:53:09 发布

阅读量4.1w

点赞数 22

CC 4.0 BY-SA版权

分类专栏： Flutter项目开发全套教程文章标签： Flutter Android iOS 跨平台应用

本文链接：https://blog.csdn.net/zl18603543572/article/details/109545733

Flutter项目开发全套教程专栏收录该内容

285 篇文章

订阅专栏

本文详细介绍Flutter中TextButton组件的使用方法，包括如何设置样式、添加点击事件等，并提供完整的代码示例。

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

题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，优美的应用体验来自于细节的处理，更源自于码农的自我要求与努力

Flutter是谷歌推出的最新的移动开发框架。

【x1】微信公众号的每日提醒随时随记每日积累随心而过文章底部扫码关注

【x2】各种系列的视频教程免费开源关注你不会迷路

【x3】系列文章百万 Demo 随时复制粘贴使用

【x4】一目了然的源码

【x5】简短的视频不一样的体验

TextButton 是 1.20.0 推出的一个新的按钮，基本使用代码如下：

TextButton(
      onPressed: () {},
      child: Text("TextButton按钮"),
)

然后运行效果如下：
在这里插入图片描述

这种效果看起来更舒服，有一种漪连过渡的粘性效果。

修改 TextButton 的样式需要通过 ButtonStyle 来修改，描述如下：

  //这是一个文本按钮 未设置点击事件下的样式
  Widget buildTextButton2() {
    return TextButton(
      child: Text("TextButton按钮"),
      //添加一个点击事件
      onPressed: () {},
      //设置按钮是否自动获取焦点
      autofocus: true,
      //定义一下文本样式
      style: ButtonStyle(
        //定义文本的样式 这里设置的颜色是不起作用的
        textStyle: MaterialStateProperty.all(
            TextStyle(fontSize: 18, color: Colors.red)),
        //设置按钮上字体与图标的颜色
        //foregroundColor: MaterialStateProperty.all(Colors.deepPurple),
        //更优美的方式来设置
        foregroundColor: MaterialStateProperty.resolveWith(
          (states) {
            if (states.contains(MaterialState.focused) &&
                !states.contains(MaterialState.pressed)) {
              //获取焦点时的颜色
              return Colors.blue;
            } else if (states.contains(MaterialState.pressed)) {
              //按下时的颜色
              return Colors.deepPurple;
            }
            //默认状态使用灰色
            return Colors.grey;
          },
        ),
        //背景颜色
        backgroundColor: MaterialStateProperty.resolveWith((states) {
          //设置按下时的背景颜色
          if (states.contains(MaterialState.pressed)) {
            return Colors.blue[200];
          }
          //默认不使用背景颜色
          return null;
        }),
        //设置水波纹颜色
        overlayColor: MaterialStateProperty.all(Colors.yellow),
        //设置阴影  不适用于这里的TextButton
        elevation: MaterialStateProperty.all(0),
        //设置按钮内边距
        padding: MaterialStateProperty.all(EdgeInsets.all(10)),
        //设置按钮的大小
        minimumSize: MaterialStateProperty.all(Size(200, 100)),

        //设置边框
        side:
            MaterialStateProperty.all(BorderSide(color: Colors.grey, width: 1)),
        //外边框装饰 会覆盖 side 配置的样式
        shape: MaterialStateProperty.all(StadiumBorder()),
      ),
    );
  }