跳至主要內容

ShapeBorder BeveledRectangleBorder Border BorderDirectional CircleBorder ContinuousRectangleBorder RoundedRectangleBorder StadiumBorder OutlineInputBorder UnderlineInputBorder

xiaoye大约 2 分钟

ShapeBorder

Flutter中很多组件都有一个叫做shape的属性，类型是ShapeBorder，比如Button类、Card等组件，shape表示控件的形状，系统已经为我们提供了很多形状。

BeveledRectangleBorder

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

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

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

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

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

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

Border

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

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

设置全部

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: () {},
      )
image-20200522182443777
image-20200522182443777

BorderDirectional

BorderDirectional和Border基本一样，区别就是BorderDirectional带有阅读方向，大部分国家阅读是从左到右，但有的国家是从右到左的，比如阿拉伯等。

RaisedButton(
  shape: BorderDirectional(
    start: BorderSide(color: Colors.red,width: 2),
    end: BorderSide(color: Colors.blue,width: 2),
  ),
  child: Text('老孟'),
  onPressed: () {},
)
image-20200522182150780
image-20200522182150780

CircleBorder

圆形

RaisedButton(
  shape: CircleBorder(side: BorderSide(color: Colors.red)),
  child: Text('老孟'),
  onPressed: () {},
)
image-20200522182549205
image-20200522182549205

ContinuousRectangleBorder

连续的圆角矩形，直线和圆角平滑连续的过渡，和RoundedRectangleBorder相比，圆角效果会小一些。

RaisedButton(
  shape: ContinuousRectangleBorder(
      side: BorderSide(color: Colors.red),
      borderRadius: BorderRadius.circular(20)),
  child: Text('老孟'),
  onPressed: () {},
)
image-20200522182922984
image-20200522182922984

RoundedRectangleBorder

圆角矩形

RaisedButton(
  shape: RoundedRectangleBorder(
      side: BorderSide(color: Colors.red),
      borderRadius: BorderRadius.circular(10)),
  child: Text('老孟'),
  onPressed: () {},
)
image-20200522183032650
image-20200522183032650

StadiumBorder

类似足球场的形状，两边圆形，中间矩形

RaisedButton(
  shape: StadiumBorder(
      side: BorderSide(color: Colors.red),),
  child: Text('老孟'),
  onPressed: () {},
)
image-20200522183814823
image-20200522183814823

OutlineInputBorder

带外边框

RaisedButton(
  shape: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.red),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('老孟'),
  onPressed: () {},
)
image-20200522184044810
image-20200522184044810

UnderlineInputBorder

下划线边框

RaisedButton(
  shape: UnderlineInputBorder(
    borderSide: BorderSide(color: Colors.red),
  ),
  child: Text('老孟'),
  onPressed: () {},
)
image-20200522184216659
image-20200522184216659