Flutter按钮-Button

按钮

1. ToggleButtons
2. ButtonStyleButton（TextButton,OutlinedButton,ElevatedButton）

切换按钮-ToggleButtons

属性名	类型	说明
color	color	未选中时颜色
borderColor	color	未选中时边框颜色
selectedColor	color	选中时的颜色
selectedBorderColor	color	选中时边框的颜色
fillColor	color	选中是填充的颜色
borderRadius	BorderRadius	边框弧度
isSelected	List	对应子控件是否选中

class ToggleButtonView extends StatefulWidget {
  @override
  _ToggleButtonViewState createState() => _ToggleButtonViewState();
}

class _ToggleButtonViewState extends State {
  final isSelected = [false, false, false];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ToggleButton"),
      ),
      body: Center(
        child: ToggleButtons(
          color: Colors.red,
          selectedColor: Colors.blue,
          selectedBorderColor: Colors.blue,
          borderColor: Colors.red,
          fillColor: Colors.blue.withOpacity(0.04),
          borderRadius: BorderRadius.circular(18.0),
          constraints: BoxConstraints(minHeight: 36.0),
          isSelected: isSelected,
          onPressed: (index) {
            setState(() {
              isSelected[index] = !isSelected[index];
            });
          },
          children: [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Container(child: Text('BUTTON 1')),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Text('BUTTON 2'),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Text('BUTTON 3'),
            ),
          ],
        ),
      ),
    );
  }
}

ButtonStyleButton

TextButton,OutlinedButton,ElevatedButton都是基于ButtonStyleButton，三个按钮不同之处就是 style属性，不同之处就是默认实现了一些属性，所以只要掌握style即可实现不同样式的按钮
1.三种控件都有默认style的静态方法，分别是TextButton.styleFrom(),OutlinedButton.styleFrom(),ElevatedButton.styleFrom()，这些里面包含了一些背景色，圆角，水波纹，边框等
2.三种控件的样式可以在Theme里面定义，对应的分别为TextButtonThemeData(),OutlinedButtonThemeData(),ElevatedButtonThemeData(),在这里面可以定义相关类型的按钮的全局样式,按钮单独定义的style优先级高于全局定义的theme

    return MaterialApp(
      title: 'Flutter Widget',
      routes: routes,
      theme: ThemeData(
          primarySwatch: Colors.blue,
          textButtonTheme: TextButtonThemeData(),
          outlinedButtonTheme: OutlinedButtonThemeData(),
          elevatedButtonTheme: ElevatedButtonThemeData(),
          textSelectionTheme:
              TextSelectionThemeData(cursorColor: Colors.green)),
      home: MyHomePage(title: 'Flutter Widget'),
    );

使包裹的widget具有点击和长按事件


按钮包含的属性：

属性名	类型	说明
onPressed	fun	点击
onLongPress	fun	长按事件
style	ButtonStyle	按钮样式
child	widget	子控件

ButtonStyle包含的属性：

属性名	类型	说明
backgroundColor	color	按钮背景色
shadowColor	color	阴影的颜色
elevation	double	阴影高度
padding	EdgeInsetsGeometry	内间距
side	BorderSide	边框
shape	OutlinedBorder	边框样式