flutter 按钮(button)如何去掉边距(padding)

亲爱的小伙伴们,最近一直在写项目,有一段时间没有发干货了, 趁flutter版本升级,推出全新的一系列的按钮,来冒泡一下.

Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但flutter团队以后也不更新它们,只会停留在现阶段.强烈建议使用新的Button。

为什么会新增 Button？因为想要将以前的按钮调整为统一的外观比较麻烦，三种按钮都是用同一种ButtonTheme,而不能分别自定义他们的主题, 因此以前经常使用自定义的按钮，而新增的按钮解决了此类问题，三种按钮对应三种不同的主题,可以非常方便的设置整体外观。

image.png

还有一个原因,我猜是,以前的按钮的设计思路,用起来很不方便,比喻要给按钮设置一个背景色,这个是常见的需求吧
你得套一层Container,利用Container的颜色来实现,如下

            Container(
              color: Colors.blue,
              child: FlatButton(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                onPressed: () {
                  print("-----");
                },
                // padding: EdgeInsets.all(10),
                child: Text("登录"),
                minWidth: 1,
                height: 30,
                // padding: EdgeInsets.zero,
              ),
            )

image.png

现在新的按钮是直接可以设置前景色,背景色,直接提供了此类的属性(backgroundColor,foregroundColor等),一个是方便设置,一个是不用嵌套一层,代码看起来更舒服.

如下:

           TextButton(
             onPressed: () {
               print("-----");
             },
             child: Text("登录"),
             style: ButtonStyle(
                 minimumSize: MaterialStateProperty.all(Size(100, 30)),
                 padding: MaterialStateProperty.all(EdgeInsets.zero),
                 backgroundColor: MaterialStateProperty.all(Colors.grey),
             ),
           ),

效果

image.png

回到正题,如何去掉button默认的边距呢,让按钮包裹内容呢.

分别写上对应的代码

TextButton(
              onPressed: () {
                print("-----");
              },
              child: Text("登录"),
              style: ButtonStyle(
                minimumSize: MaterialStateProperty.all(Size(1, 1)),
                padding: MaterialStateProperty.all(EdgeInsets.zero),
                backgroundColor: MaterialStateProperty.all(Colors.grey),
              ),
            ),
            Container(
              color: Colors.blue,
              child: FlatButton(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                onPressed: () {
                  print("-----");
                },
                // padding: EdgeInsets.all(10),
                child: Text("登录"),
                minWidth: 1,
                padding: EdgeInsets.zero,
              ),
            )

效果如下

image.png

解释一下,新的button好实现,只需要设置属性就可以了,让它的size最小,并设置边距为0;

minimumSize: MaterialStateProperty.all(Size(1, 1)),
padding: MaterialStateProperty.all(EdgeInsets.zero),

flatButton它们要实现边距为0就比较难了.最终通过各种探索,找到一个实现方法,MaterialTapTargetSize.shrinkWrap,让内容紧裹,并且边距为0,实现起来没有TextButton实现起来直观明了.
如下

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
padding: EdgeInsets.zero,

结尾

今天的分享先到这里了,感觉对小伙伴们有点帮助的话,欢迎点赞,加关注哦，后面会分享更多干货~~好运!!!