Flutter（十）Wrap流式布局

属性

Wrap({
    Key key,
    this.direction = Axis.horizontal,// 水平或垂直
    this.alignment = WrapAlignment.start,// 对齐方式，左对齐，右对齐等
    this.spacing = 0.0,// 子widget之间的间距，水平间距或垂直间距
    this.runAlignment = WrapAlignment.start,// 纵轴方向的对齐方式
    this.runSpacing = 0.0,//纵轴方向的间距
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    List<Widget> children = const <Widget>[],
  }) 

主要特点

• 当使用Row 时，宽度超过屏幕宽时，超过部分无法显示。
• 使用Wrap时，超过屏幕宽度时，自动换行。

• 可以水平使用，也可以垂直使用

  
  image.png

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,//
              //在水平方向上，这个Row占据的大小
              mainAxisSize: MainAxisSize.max,//默认值  尽可能多占据
              children: <Widget>[
                Text(" 1111111 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 2222222222 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 333333 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 44444444444444 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 5555555 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 66666 ",style: TextStyle(backgroundColor: Colors.green),),

              ],
            ),
            Wrap(
              direction: Axis.horizontal,
              spacing: 10,
              alignment: WrapAlignment.start,
              children: <Widget>[
                Text(" 11111111 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 2222222222 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 333333 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 44444444444444 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 55555 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 66666 ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Wrap(
              direction: Axis.horizontal,
              spacing: 10,
              alignment: WrapAlignment.end,
              children: <Widget>[
                Text(" 11111111 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 2222222222 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 333333 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 44444444444444 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 55555 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 66666 ",style: TextStyle(backgroundColor: Colors.green),),
              ],
            ),
            Wrap(
              direction: Axis.horizontal,
              spacing: 10,
              runSpacing: 10,
              runAlignment: WrapAlignment.start,
              children: <Widget>[
                Text(" 11111111 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 2222222222 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 333333 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 44444444444444 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 55555 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 66666 ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Wrap(
              direction: Axis.vertical,
              spacing: 20,
              children: <Widget>[
                Text(" 11111111 ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" 2222222222 ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" 333333 ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" 44444444444444 ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" 55555 ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" 66666 ",style: TextStyle(backgroundColor: Colors.blue),),
              ],
            ),

          ],
        ),
      ),
    );
  }
}