Flutter常用按钮

作者: AndyLiYL | 来源:发表于2022-09-26 14:22 被阅读0次

    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风格的图片按钮");
                    })
    
    

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

    相关文章

      网友评论

        本文标题:Flutter常用按钮

        本文链接:https://www.haomeiwen.com/subject/zcntartx.html