亲爱的小伙伴们,最近一直在写项目,有一段时间没有发干货了, 趁flutter版本升级,推出全新的一系列的按钮,来冒泡一下.
为什么会新增 Button?因为想要将以前的按钮调整为统一的外观比较麻烦,三种按钮都是用同一种ButtonTheme,而不能分别自定义他们的主题, 因此以前经常使用自定义的按钮,而新增的按钮解决了此类问题,三种按钮对应三种不同的主题,可以非常方便的设置整体外观。
还有一个原因,我猜是,以前的按钮的设计思路,用起来很不方便,比喻要给按钮设置一个背景色,这个是常见的需求吧
你得套一层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,
),
)
现在新的按钮是直接可以设置前景色,背景色,直接提供了此类的属性(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),
),
),
效果
回到正题,如何去掉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,
),
)
效果如下
解释一下,新的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,
结尾
今天的分享先到这里了,感觉对小伙伴们有点帮助的话,欢迎点赞,加关注哦,后面会分享更多干货~~好运!!!
补充一下
还有一种去掉边距的做法,就是利用主题来做
旧button就有buttonTheme,新button,就有对应的主题textButtonTheme。。。,具体见另一文章有详细介绍flutter TextButton OutlinedButton ElevatedButton基本使用
代码如下:
buttonTheme: ButtonThemeData(
minWidth: 0,
height: 0,
padding: EdgeInsets.zero,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
minimumSize: MaterialStateProperty.all(Size.zero),
padding: MaterialStateProperty.all(EdgeInsets.zero),
tapTargetSize: MaterialTapTargetSize.shrinkWrap))),