请看
- 怎么设置样式
- 怎么设置宽高 padding
https://blog.csdn.net/mengks1987/article/details/109480289
http://events.jianshu.io/p/ad231ab22cee
https://www.jianshu.com/p/5d24fd29ab8b
想要的东东
- 设置按钮的 padding，margin 为 零
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStateProperty.all(Size(0, 0)),
padding: MaterialStateProperty.all(EdgeInsets.zero),
)
- 设置形状
style: ButtonStyle(
shape: MaterialStateProperty.all(RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)))
)
- 去掉阴影
style: ButtonStyle(
shadowColor: MaterialStateProperty.all(Colors.transparent),
)
- 去掉水波纹(去掉水波纹后，hove 等效果也没了)
style: ButtonStyle(
splashFactory: NoSplash.splashFactory
)
- 设置按钮内文字的样式
style: ButtonStyle(
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16.0, color: Colors.white)),
)
整体啰嗦一遍：
const ButtonStyle({
this.textStyle, //字体
this.backgroundColor, //背景色
this.foregroundColor, //前景色
this.overlayColor, // 高亮色，按钮处于focused, hovered, or pressed时的颜色
this.shadowColor, // 阴影颜色
this.elevation, // 阴影值
this.padding, // padding
this.minimumSize, //最小尺寸
this.side, //边框
this.shape, //形状
this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
this.visualDensity, // 按钮布局的紧凑程度
this.tapTargetSize, // 响应触摸的区域
this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。
this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。
});
常规的配置就这样了：
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStateProperty.all(Size(0, 0)),
padding: MaterialStateProperty.all(EdgeInsets.zero),
shadowColor: MaterialStateProperty.all(Colors.transparent),
backgroundColor: MaterialStateProperty.all(Color(0xFFECB34D)),
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16.0, color: Colors.white)),
// elevation: MaterialStateProperty.all(0),
// splashFactory: NoSplash.splashFactory
)
但是，通常，我们并不单独配，我们要配到主题里。这样，在逻辑的其他地方，只需要简单的使用 button 就可以了。先配置在主题里。
ThemeData lightTheme = ThemeData.light().copyWith(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStateProperty.all(Size(0, 0)),
padding: MaterialStateProperty.all(EdgeInsets.zero),
shadowColor: MaterialStateProperty.all(Colors.transparent),
backgroundColor: MaterialStateProperty.all(Color(0xFFECB34D)),
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16.0, color: Colors.white)),
// elevation: MaterialStateProperty.all(0),
// splashFactory: NoSplash.splashFactory
))
);
使用的时候：
SizedBox(
width: 120,
height: 40,
child: ElevatedButton(
onPressed: () {
},
child: Text(
"我是按钮",
),
))
如果想覆盖或增加主题的设置：
比如，这里加了一个 borderradius 。
SizedBox(
width: 120,
height: 40,
child: ElevatedButton(
style: ButtonStyle()
.copyWith(shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)))),
onPressed: () {
},
child: Text(
"我是按钮",
),
))
最后加一条。想让按钮自适应父容器。可以这个弄。
Container(
width: 750,
child: SizedBox(
width: double.infinity,
height: 92,
child: ElevatedButton()
)
)
SizedBox 能具体定义按钮的宽高，而 double.infinity 又不能突破 Container 的宽高。通常 Container 不是具体的宽高才会用到这种自适应的方式。
