普通按钮

• TextButton - 文本按钮
• OutlineButton - 空心按钮
• ElevatedButton - 凸起按钮

按钮属性

ButtonStyle 属性

主题相关的按钮

• TextButtonTheme - 文本按钮
• OutlinedButtonTheme- 空心按钮
• ElevatedButtonTheme - 凸起按钮

注意：如果设置style 样式，则主题样式不生效

IconButton - 图标按钮

• TextButton.icon - 图标文本按钮
• OutlineButton.icon - 图标空心按钮
• ElevatedButton.icon - 图标凸起按钮
• IconButton - 图标按钮

其他按钮

• ButtonBar - 按钮组
• BackButton - 回退按钮
• CloseButton - 关闭按钮
• FloatingActionButton - 浮动按钮

注意：浮动按钮配合Scaffold使用，与appBar、body 等是同级

代码示例

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Wrap(
        spacing: 10,
        children: [
          TextButton(
            onPressed: () {
              print(\'点击了TextButton\');
            }, 
            onLongPress: () {
              print(\'长按了TextButton\');
            },
            child: Text(\'我是文本按钮\'),
          ),
          ElevatedButton(
            onPressed: () {
              print(\'点击了ElevatedButton\');
            }, 
            onLongPress: () {
              print(\'长按了ElevatedButton\');
            },
            child: Text(\'我是ElevatedButton\'),
          ),
          OutlineButton(
            onPressed: () {
              print(\'点击了OutlineButton\');
            }, 
            onLongPress: () {
              print(\'长按了OutlineButton\');
            },
            child: Text(\'我是OutlineButton\'),
          ),
          ElevatedButton(
            onPressed: () {
              print(\'点击了OutlineButton\');
            }, 
            onLongPress: () {
              print(\'长按了OutlineButton\');
            },
            child: Text(\'自定义颜色\'),
            style: ButtonStyle(
              textStyle: MaterialStateProperty.all(
                TextStyle(
                  fontSize: 30
                )
              ),
              foregroundColor: MaterialStateProperty.resolveWith(
                (states) {
                  if (states.contains(MaterialState.pressed)) {
                    // 按下按钮时的前景色
                    return Colors.red;
                  }
                  return Colors.red;
                } 
              ), 
              // 背景色
              backgroundColor: MaterialStateProperty.resolveWith(
                (states) {
                  if (states.contains(MaterialState.pressed)) {
                    // 按下按钮时的前景色
                    return Colors.green;
                  }
                  return Colors.white;
                } 
              ), 
              // 阴影
              shadowColor: MaterialStateProperty.all(Colors.yellow),
              // 阴影长度
              elevation: MaterialStateProperty.all(20),
              // 边框
              side:MaterialStateProperty.all(
                BorderSide(
                  color: Colors.green,
                  width: 3,
                )
              ),
              // 圆角
              shape: MaterialStateProperty.all(
                StadiumBorder(
                  side: BorderSide(
                    color: Colors.green,
                    width: 3,
                  )
                )
              ),
              // 设置按钮大小
              minimumSize: MaterialStateProperty.all(Size(150, 60)),
              // 设置水波纹的颜色
              overlayColor: MaterialStateProperty.all(Colors.purple),
            )
          ),
          // 主题按钮
          OutlinedButtonTheme(
            data: OutlinedButtonThemeData(
              style: ButtonStyle(
                overlayColor: MaterialStateProperty.all(Colors.purple),
              ),
            ),
            child: OutlinedButton(
              child: Text(\'我时主题按钮\'),
              onPressed: () {
                print(\'点击了OutlinedButton\');
              },
            ),
          ),
          // 图标按钮
          IconButton(
            icon:Icon(Icons.accessible_outlined),
            onPressed: () {
              print(\'点击了图标按钮\');
            },
            color: Colors.red, // 颜色
            splashColor: Colors.lime, // 水波纹
            highlightColor: Colors.pink, // 高亮时候颜色
            tooltip: \"怎么了\", // 提示文字
          ),
          // 按钮组
          Container(
            color: Colors.pink,
            width: double.infinity,
            child: ButtonBar(
              children: [
                ElevatedButton(
                  onPressed:(){},
                  child: Text(\'按钮组1\')
                ),
                 ElevatedButton(
                  onPressed:(){},
                  child: Text(\'按钮组2\')
                )
              ]
            )
          ),
          // 回退按钮
          BackButton(
            color: Colors.red,
          ),
          // 关闭按钮
          CloseButton(),
        ]
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(\'Button\'),
      ),
      body: Body(),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        child: Text(\'我是浮动按钮\'),
      ),
    );
  }
}