Flutter按钮-Button

按钮

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

切换按钮-ToggleButtons

效果图

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

class _ToggleButtonViewState extends State<ToggleButtonView> {
  final isSelected = <bool>[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具有点击和长按事件

TextButton

OutlinedButton

按钮包含的属性：

ButtonStyle包含的属性：