Flutter常用按钮

Flutter常用按钮
1.TextButton：

一款android风格的文本按钮，有水波纹特效，反正我是一般不用这个效果，emmmmmm…个人审美没达到。

基本文本按钮，背景、以及点按颜色等

TextButton(
              onPressed: () {
                debugPrint("我是可点击的文字按钮");
              },
              child: const Text(
                "你好，我是个文字按钮",
                // style: TextStyle(color: Colors.blue),
              ),
              style: ButtonStyle(
                //按钮大小
                // minimumSize:
                //     MaterialStateProperty.all(const Size(double.infinity, 44)),
                //其实文本未设置颜色时，会显示该字体颜色
                //设置字体颜色
                foregroundColor: MaterialStateProperty.resolveWith((states) {
                  //按下按钮时的字体颜色
                  if (states.contains(MaterialState.pressed)) {
                    return Colors.redAccent;
                  }
                  //默认不使用字体颜色
                  return Colors.black;
                }),
                //背景颜色
                backgroundColor:
                    MaterialStateProperty.all(Colors.deepPurpleAccent),
                //水波纹颜色 不想使用 设置透明即可
                overlayColor: MaterialStateProperty.all(Colors.transparent),
                //设置边框
                side: MaterialStateProperty.all(
                    const BorderSide(color: Colors.amber)),
                //设置形状、圆角
                shape: MaterialStateProperty.all(const StadiumBorder()),
              ),
            )

TextButton.icon 图文按钮、个人用的也较少，布局总觉得不如自定义灵活些吧，看个人喜好.

TextButton.icon(
              onPressed: () {
                debugPrint("我是可点击的图文按钮");
              },
              icon: const CNImageAssetView(name: "nft_more_icon.png"),
              label: const Text("文字"),
              style: ButtonStyle(
                //水波纹颜色 不想使用 设置透明即可
                overlayColor: MaterialStateProperty.all(Colors.transparent),
              ),
            )

2.IconButton

IconButton 是一个图标的按钮，点击区域对用户的交互很敏感。无论图片的实际大小如何，它都有最小的 kMinInteractiveDimension (48.0) 大小点击范围。

IconButton(
              disabledColor: Colors.blueAccent,
              onPressed: () {
                debugPrint("那我也厉害，IconButton");
              },
              //点击高亮颜色、不需要可设为透明
              highlightColor: Colors.transparent,
              //水波纹效果颜色、不需要可设为透明
              splashColor: Colors.transparent,
              //触觉反馈
              enableFeedback: true,
              icon: const CNImageAssetView(name: "nft_more_icon.png"),
              //用户长按按钮时显示此文本
              tooltip: "这个是个啥",
              // constraints: BoxConstraints(minHeight: 40, maxWidth: 70),
            )

OutlinedButton

和TextButton差不多，默认有边框属性

OutlinedButton(
              onPressed: () {
                debugPrint("那我更厉害，和TextButton不能说一模一样，也能改成一模一样");
              },
              style: ButtonStyle(
                foregroundColor: MaterialStateProperty.resolveWith((states) {
                  //按下按钮时的字体颜色
                  if (states.contains(MaterialState.pressed)) {
                    return Colors.redAccent;
                  }
                  //默认不使用字体颜色
                  return Colors.black;
                }),
                //背景颜色
                backgroundColor:
                    MaterialStateProperty.all(Colors.deepPurpleAccent),
                //水波纹颜色 不想使用 设置透明即可
                overlayColor: MaterialStateProperty.all(Colors.transparent),
                //设置边框
                side: MaterialStateProperty.all(
                    const BorderSide(color: Colors.amber)),
                //设置形状、圆角
                shape: MaterialStateProperty.all(const StadiumBorder()),
              ),
              child: const Text("哦吼~我是边框按钮"),
            )

CupertinoButton

CupertinoButton是一个iOS风格的按钮，可能我是iOS开发出身，对于这个比较钟爱，按钮自带borderRadius为8的圆角

CupertinoButton图片按钮

CupertinoButton(
                padding: const EdgeInsets.only(left: 10, right: 10),
                color: Colors.redAccent,
                //按钮被按下时的不透明度程度，0~1之间
                pressedOpacity: 1,
                //这也可以自己定义Container然后固定大小进行设置等等
                child: const Text("iOS风格按钮"),
                onPressed: () {
                  debugPrint("我就比较厉害了，iOS风格的");
                }),

CupertinoButton文字按钮

CupertinoButton(
                //按钮被按下时的不透明度程度，0~1之间
                pressedOpacity: 1,
                child: const CNImageAssetView(name: "nft_more_icon.png"),
                onPressed: () {
                  debugPrint("我就比较厉害了，iOS风格的图片按钮");
                })

其实，每种按钮基本用法都差不多，都不算复杂，实践应用中也可以自定义点击事件处理，也比较灵活。