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('也是的'),
      ],
    );
  }
}