首页 > 其他分享 >Flutter TextButton + ButtonStyle使用

Flutter TextButton + ButtonStyle使用

时间:2023-02-20 15:33:13浏览次数:34  
标签:return TextButton MaterialStateProperty Colors ButtonStyle white Flutter

Widget _itemText(String txt, {Function()? onPress}) {
    //需要使用SizedBox限制TextButton高度
    return SizedBox(
      height: 20,
      width: 44,
      child: TextButton(
        onPressed: onPress,
        style: ButtonStyle(
            padding: MaterialStateProperty.all(EdgeInsets.zero),
            //这个style设置的color不生效,要设置foregroundColor
            textStyle: MaterialStateProperty.all(const TextStyle(
              color: Colors.white,
              fontSize: 12,
            )),
            //取消圆角边框
            shape: MaterialStateProperty.all(
                const RoundedRectangleBorder(borderRadius: BorderRadius.zero)),
            foregroundColor: MaterialStateProperty.all(Colors.white),
            backgroundColor: MaterialStateProperty.resolveWith((state) {
              if (state.contains(MaterialState.pressed)) {
                //背景颜色按下时
                return Colors.white.withOpacity(0.1);
              }
              return null;
            }),
            //水波纹效果
            overlayColor:
                MaterialStateProperty.all(Colors.white.withOpacity(0.1))),
        child: Text(
          txt,
        ),
      ),
    );
  }

  

标签:return,TextButton,MaterialStateProperty,Colors,ButtonStyle,white,Flutter
From: https://www.cnblogs.com/bg-tab/p/17137637.html

相关文章

  • flutter系列之:在flutter中使用导航Navigator
    目录简介flutter中的NavigatorNavigator的使用总结简介一个APP如果没有页面跳转那么是没有灵魂的,页面跳转的一个常用说法就是Navigator,flutter作为一个最为优秀的前端框......
  • bash: flutter: command not found
    在终端可以执行flutter命令,而在Androidstudio的Terminal上面执行flutter命令,报错bash:flutter:commandnotfound。如何确保环境变量配置正确1、在Terminal上面执......
  • Flutter笔记 - 事件分发
    事件处理流程Flutter事件处理流程主要分两步,为了聚焦核心流程,我们以用户触摸事件为例来说明:命中测试:当手指按下时,触发PointerDownEvent事件,按照深度优先遍历当前渲染......
  • Flutter Dart
    一、第三类库使用:pub包管理系统二、async和await三、内置库网络请求四、Dart库的重命名Dart冲突解决五、库部分导入六、延迟加载   一、第三类库使用:pub包管理......
  • Flutter的Row和Column简介
    Row、Column的介绍Row:水平布局,在水平方向上排列子widget的列表。Column:垂直布局,在垂直方向上排列子widget的列表。说明:Row和Column是多子节点空间,他们不带滚动属性,如果超......
  • Flutter笔记-基础组件
    加载网络图片以及本地图片Image(image:NetworkImage("https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB12IU4R.img?w=8......
  • flutter:使用listview之三:上拉加载更多(flutter 3.7.0)
    一,配置用到的第三方库dependencies:flutter:sdk:flutter#ThefollowingaddstheCupertinoIconsfonttoyourapplication.#UsewiththeCuperti......
  • Flutter使用SliverAppBar开发更多样式AppBar
    代码参考于【无聊的编码】FlutterSliver全家桶初体验,一起炫酷一下,有优化只是用官方的SliverAppBar只能做到如下样式:但是我们想要的结果是下面这样的:为此,我封装了一......
  • Flutter中使用device_info获取设备信息
    1.安装插件配置 device_infodependencies:flutter:sdk:flutter#设备信息device_info:^1.0.0在pubspec.yaml中配置保存后,在VSCode环境中会自动下载依赖包。......
  • Flutter 中使用原生功能在IOS中的权限配置
    Flutter项目中在使用原生的一些功能时,必须要在Info.plist文件中配置使用权限,否则在提交审核时无法通过。1.添加权限打开配置权限的文件,路径为:ios▸Runner▸Info.plist 。......