Flutter組件學習八-Wrap（實現流佈局）

1、Flutter RaisedButton 定義一個按鈕

Flutter中通過RaisedButton定義一個按鈕

// 自定義按鈕
class MyRaisedButton extends StatelessWidget {
  String text;
  MyRaisedButton(this.text);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).accentColor,
      onPressed: (){

      },
    );
  }
}

2、Wrap組件

Wrap可以實現流佈局，單行的Wrap跟Row表現幾乎一致，單列的Wrap則跟Row表現幾乎一致。但Row與Column都是單行單列的，Wrap則突破了這個限制，mainAxis上空間不足時，則向crossAxis上去擴展顯示

2.1、屬性

屬性	說明
direction	主軸的方向，默認水平
alignment	主軸的對其方式
spacing	主軸方向上的間距
textDirection	文本方向
verticalDirection	定義了children擺放順序，默認是down，見Flex相關屬性介紹。
runAlignment	run的對齊方式。run可以理解爲新的行或者列，如果是水平方向佈局的話，run可以理解爲新的一行
runSpacing	run的間距

2.2、代碼實現

class MyWrap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      // 對齊方式
      alignment: WrapAlignment.start,
      children: <Widget>[
        MyRaisedButton('文學1212i3'),
        MyRaisedButton('新聞的飯局等開了'),
        MyRaisedButton('科技'),
        MyRaisedButton('我也不知道'),
        MyRaisedButton('按說'),
        MyRaisedButton('11計費的開發就1'),
        MyRaisedButton('愛上'),
        MyRaisedButton('啥哈哈'),
        MyRaisedButton('也是的'),
      ],
    );
  }
}