如何为Button、OutlinedButton和ElevatedButton设置圆角及背景色

在Flutter中，我们可以通过ButtonStyle灵活配置按钮的圆角、背景色等样式，以下是针对不同按钮类型的具体实现：

1. TextButton（普通按钮）设置圆角 #

TextButton默认无背景，若要添加圆角和自定义背景色，直接在style参数里配置：

TextButton(
  onPressed: () {},
  style: ButtonStyle(
    // 设置圆角半径，数值越大圆角越明显
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    // 可选：给普通按钮添加背景色
    backgroundColor: MaterialStateProperty.all(Colors.lightBlue.shade100),
  ),
  child: const Text('普通圆角按钮'),
)

2. OutlinedButton 配置圆角与背景色 #

OutlinedButton默认仅显示边框，要同时设置圆角和背景色：

OutlinedButton(
  onPressed: () {},
  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    // 添加背景色
    backgroundColor: MaterialStateProperty.all(Colors.lightGreen.shade100),
    // 可选：调整边框颜色，和背景色搭配更协调
    side: MaterialStateProperty.all(const BorderSide(color: Colors.green)),
  ),
  child: const Text('带圆角的OutlinedButton'),
)

3. ElevatedButton 自定义圆角与背景色 #

ElevatedButton自带阴影效果，修改圆角和背景色的方式如下：

ElevatedButton(
  onPressed: () {},
  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    // 替换默认背景色
    backgroundColor: MaterialStateProperty.all(Colors.orange.shade100),
    // 可选：调整阴影高度
    elevation: MaterialStateProperty.all(4),
  ),
  child: const Text('带圆角的ElevatedButton'),
)

全局统一配置（可选） #

如果项目里所有同类型按钮样式一致，可以通过ThemeData全局设置，避免重复代码：

MaterialApp(
  theme: ThemeData(
    textButtonTheme: TextButtonThemeData(
      style: ButtonStyle(
        shape: MaterialStateProperty.all(RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
        )),
      ),
    ),
    // 同理配置OutlinedButton和ElevatedButton的全局样式
    outlinedButtonTheme: OutlinedButtonThemeData(
      style: ButtonStyle(...),
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(...),
    ),
  ),
  home: const YourHomePage(),
)

内容的提问来源于stack exchange，提问作者Moony-Stary