flutter 圆角_Flutter 实战篇 | 各种各样形状的组件

内容转载自：CSDN博主【老孟Flutter】

老孟导读：Flutter中很多组件都有一个叫做shape的属性，类型是ShapeBorder，比如Button类、Card等组件，shape表示控件的形状，系统已经为我们提供了很多形状，对于没有此属性的组件，可以使用 Clip 类组件进行裁剪。

BeveledRectangleBorder

斜角矩形边框，用法如下：

RaisedButton(  shape: BeveledRectangleBorder(      side: BorderSide(width: 1, color: Colors.red),      borderRadius: BorderRadius.circular(10)),  child: Text('老孟'),  onPressed: () {},)123456

如果设置的半径比控件还大，就会变成菱形：

 3RaisedButton(  shape: BeveledRectangleBorder(      side: BorderSide(width: 1, color: Colors.red),      borderRadius: BorderRadius.circular(100)),  child: Text('老孟'),  onPressed: () {},)123456

同理，如果半径设置为0，就是矩形。

RaisedButton(  shape: BeveledRectangleBorder(      side: BorderSide(width: 1, color: Colors.red),      borderRadius: BorderRadius.circular(0)),  child: Text('老孟'),  onPressed: () {},)123456

Border

Border允许单独设置每一个边上的线条样式.

RaisedButton(  shape: Border(    top: BorderSide(color: Colors.red,width: 2)  ),  child: Text('老孟'),  onPressed: () {},)123456

设置全部

RaisedButton(        shape: Border(          top: BorderSide(color: Colors.red,width: 10),          right: BorderSide(color: Colors.blue,width: 10),          bottom: BorderSide(color: Colors.yellow,width: 10),          left: BorderSide(color: Colors.green,width: 10),        ),        child: Text('老孟'),        onPressed: () {},      )123456789