简介

Material 组件库中提供了多种按钮,我们常用的有如下几种 ElevatedButton、TextButton、OutlinedButton、IconButton

系统样式按钮

ElevatedButton

悬浮按钮，默认是蓝色背景，点击后阴影加大 （替代之前的RaisedButton）

ElevatedButton(child: Text('ElevatedButton'), onPressed: (){})

TextButton

扁平按钮,默认不带背景色，点击后背景色 （替代之前的FlatButton）

TextButton(child: Text('ElevatedButton'), onPressed: (){})

OutlinedButton

带边框按钮，默认不带背景色，点击后背景色 （替代之前的OutlineButton）

OutlinedButton(child: Text('ElevatedButton'), onPressed: (){}),

IconButton

图标按钮，默认不带背景色，点击灰色背景

 IconButton(icon: Icon(Icons.add), onPressed: () {},)

自定义样式

以TextButton为例，自定义按钮样式

TextButton(
     child: Text('按钮'),
     autofocus: true,
     style: ButtonStyle(
         textStyle: MaterialStateProperty.all(
             TextStyle(fontSize: 15, color: Colors.red)
         ),
         foregroundColor: MaterialStateProperty.all(Colors.white),
         backgroundColor: MaterialStateProperty.all(Colors.pink),
         overlayColor: MaterialStateProperty.all(Colors.green),
         shadowColor: MaterialStateProperty.all(Colors.black),
         elevation: MaterialStateProperty.all(10),
         padding: MaterialStateProperty.all(EdgeInsets.all(10)),
         minimumSize: MaterialStateProperty.all(Size(100, 50)),
         side:  MaterialStateProperty.all(BorderSide(color: Colors.greenAccent, width: 2)),
         shape:  MaterialStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.circular(20.0))),
    ),
     onPressed: (){},
)

• textStyle 定义文本样式，这里设置color不起作用
• foregroundColor 按钮上字体与图标的颜色
• backgroundColor 按钮背景色
• overlayColor 按钮的水波纹颜色
• shadowColor 按钮阴影颜色
• elevation 阴影大小
• padding 内边距
• minimumSize 按钮最小尺寸
• side 边框样式
• shape 边框形状