Flutter中的圆角按钮实现方案

yeziyfx2026-04-14 9:00

在Flutter中，TextButton是一个用于显示文本的按钮，它默认是没有边框的。如果你想给TextButton添加边框或者改变边框颜色，你可以使用OutlineButton或者通过自定义TextButton的样式来实现。

方法1：使用OutlineButton

OutlineButton是一个自带边框的按钮，你可以通过修改它的样式来改变边框颜色。

dart 复制代码

OutlineButton(
  onPressed: () {},
  child: Text('按钮'),
  style: OutlineButton.styleFrom(
    side: BorderSide(color: Colors.blue), // 改变边框颜色
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0), // 改变边框圆角
    ),
  ),
)

方法2：自定义TextButton的样式

如果你想要一个不带背景色的TextButton但仍然想要边框，你可以自定义TextButton的样式。

dart 复制代码

TextButton(
  onPressed: () {},
  child: Text('按钮'),
  style: ButtonStyle(
    side: MaterialStateProperty.all(BorderSide(color: Colors.blue, width: 1.0)), // 添加边框
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0), // 改变边框圆角
      ),
    ),
    overlayColor: MaterialStateProperty.all(Colors.transparent), // 确保按钮按下时没有背景色
  ),
)

方法3：结合使用Container和TextButton

如果你想要更复杂的布局或者完全控制按钮的外观，你可以将TextButton嵌入到Container中，并通过Container来控制边框。

dart 复制代码

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blue, width: 1.0), // 添加边框
    borderRadius: BorderRadius.circular(10.0), // 改变边框圆角
  ),
  child: TextButton(
    onPressed: () {},
    child: Text('按钮'),
    style: ButtonStyle(
      overlayColor: MaterialStateProperty.all(Colors.transparent), // 确保按钮按下时没有背景色或边框变化
    ),
  ),
)

以上方法可以根据你的具体需求选择使用。如果你想要一个简单的边框，推荐使用OutlineButton或者通过自定义样式来实现。如果你需要更复杂的布局控制，那么使用Container结合TextButton可能更合适。