flutter如何设置TextButton的圆角颜色

在Flutter中如何修改TextButton的圆角颜色？我尝试通过shape属性设置RoundedRectangleBorder，但只能调整圆角大小，无法改变边框颜色。请问应该如何正确设置TextButton的圆角边框颜色？

2 回复

在TextButton的style属性中，使用ButtonStyle的shape参数设置圆角，backgroundColor设置背景色：

TextButton(
  style: TextButton.styleFrom(
    backgroundColor: Colors.blue,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  onPressed: () {},
  child: Text('按钮'),
)

更多关于flutter如何设置TextButton的圆角颜色的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过修改TextButton的style属性来设置圆角颜色，主要使用ButtonStyle和MaterialStateProperty。

以下是示例代码：

TextButton(
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue), // 背景色
    foregroundColor: MaterialStateProperty.all(Colors.white), // 文字颜色
    shape: MaterialStateProperty.all(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0), // 圆角半径
      ),
    ),
  ),
  child: Text('圆角按钮'),
)

关键点说明：

  • shape：使用RoundedRectangleBorder设置圆角
  • borderRadius：控制圆角大小
  • backgroundColor：设置按钮背景色
  • foregroundColor：设置文字颜色

如果需要更精细的控制，还可以设置边框颜色：

shape: MaterialStateProperty.all(
  RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
    side: BorderSide(color: Colors.red), // 边框颜色
  ),
),

这种方法适用于Flutter 2.0+版本，使用MaterialStateProperty来管理按钮的不同状态（如按下、禁用等）。

回到顶部