9.Flutter学习之Wrap组件

Wrap组件可以实现流布局，单行的Wrap跟Row表现几乎一样，单列的Wrap变现与Column一致，但是Row与Column都是单行单列的，Wrap不一样，mainAxis(主轴)上控件不足时，则向crossAxis(次轴)去扩展显示。

属性	说明
direction	主轴的方向，默认水平
alignment	主轴的对齐方式
spacing	主轴方向上的间距
textDirection	文本方向
verticalDirection	定义了children摆放顺序，默认是down
runAlignment	run的对齐方式。run可以理解为新的行或者列，如果水平方向布局，run可以理解为新的一行
runSpacing	run的间距 ,即竖直方向的间距

代码语言：javascript复制

main()=>runApp(WrapTestLayout());

class WrapTestLayout extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wrap流式布局'),
        ),
        body: WrapTest(),
      ),
    );
  }

}

class WrapTest extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 600,
      width: 400,
      color: Colors.blue,
      child: Wrap(
        spacing: 10,
        runSpacing: 40,
        runAlignment: WrapAlignment.spaceBetween,
        children: <Widget>[
          MyButton('火影忍者'),
          MyButton('新的一行的间距'),
          MyButton('火影忍者'),
          MyButton('火影忍者'),
          MyButton('火影忍者'),
          MyButton('火影忍者'),
          MyButton('火影忍者'),
          MyButton('火影忍者'),
          MyButton('火影忍者'),

        ],
      ),
    );
  }
}
//自定义组件
class MyButton extends StatelessWidget{
  final String text;

  const  MyButton(this.text);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(text),
      textColor: Theme.of(context).accentColor,
      onPressed: (){//点击事件

      },
    );
  }


}

alignment children spacing

0 人点赞