将MaterialButton组件的边框改为圆角矩形
时间: 2024-11-18 09:17:16 浏览: 10
在 Flutter 中,如果你想要将 MaterialButton 组件的边框改为圆角矩形,你可以使用 `shape` 属性配合 ` RoundedRectangleBorder` 来实现。以下是具体的步骤:
1. 首先,在你的 `MaterialButton` 标签中添加 `shape` 属性:
```dart
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0), // 设置圆角半径
),
onPressed: () { /* your callback here */ }, // 点击回调
child: Text('点击我'), // 按钮内容
),
```
这里的 `borderRadius` 参数可以根据需要设置合适的值,例如 `10.0` 表示 10 像素的圆角半径。
如果你想保持按钮顶部和底部边缘直角,而只有两侧有圆角,你可以设置 `borderSide` 属性:
```dart
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0), // 只改变左下角圆角
bottomRight: Radius.circular(10.0), // 右下角同理
),
borderSide: BorderSide.none, // 删除默认的直线边框
),
onPressed: () {},
child: Text('点击我'),
),
```
现在你的 MaterialButton 就有一个圆角矩形的边框了。
阅读全文