Flutter-Wrap_Layout 流式布局

1. 流式布局

---

• Wrap

  ​ 流式布局，允许有多个子组件，可以实现组件换行。Wrap可以为子控件进行水平或者垂直方向布局，且当空间用完时，Wrap会自动换行，也是常说的流式布局。

• direction

  ​ 控制布局方向，默认水平方向（Axis.horizontal)，可以设置谁知方向（Axis.vertical)。

• alignment

  ​ alignment属性控制主轴对齐方式，crossAxisAlignment属性控制交叉轴对齐方式，对齐方式只对有剩余空间的行或者列起作用，例如水平方向上正好填充完整，则不管设置主轴对齐方式为什么，看上去的效果都是铺满。

  ​ 说明：主轴就是与当前控件方向一致的轴，而交叉轴就是与当前控件方向垂直的轴，如果Wrap的布局方向为水平方向Axis.horizontal,那么主轴就是水平方向，反之布局方向为垂直方向Axis.vertical，主轴就是垂直方向。

  

  spaceAround和spaceEvenly区别是：

  • spaceAround：第一个子控件距开始位置和最后一个子控件距结尾位置是其他子控件间距的一半。
  • spaceEvenly：所有间距一样。

• runAlignment

  ​ runAlignment属性控制Wrap的主轴垂直方向每一行的对齐方式，alignment是主轴方向上对齐方式，作用于每一行。 runAlignment是垂直主轴方向上将每一行看作一个整体的对齐方式。

  

• spacing和runSpacing

  ​ spacing和runSpacing 属性控制Wrap主轴方向和交叉轴方向子控件之间的间隙。

• textDirection

  ​ textDirection属性表示Wrap主轴方向上子控件的方向，取值范围是ltr（从左到右）和rtl（从右到左）

  Wrap(
  	textDirection: TextDirection.rtl,
  	...
  )
  

  

• verticalDirection

  ​ verticalDirection属性表示Wrap交叉轴方向上子控件的方向，取值范围是up（从上到下）和down（从下到上），

  Wrap(
  	verticalDirection: VerticalDirection.up,
  	...
  )
  

  

  ​

2. 源码

---

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "流式布局演示",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text("流式布局演示"),
        ),
        body: Wrap(
          direction: Axis.horizontal,
          alignment: WrapAlignment.start,
          children: <Widget>[
            Container(height: 50.0, width: 100.0, color:Colors.green,),
            Container(height: 50.0, width: 110.0, color:Colors.lightGreen,),
            Container(height: 50.0, width: 120.0, color:Colors.lime,),
            Container(height: 50.0, width: 130.0, color:Colors.blue,),
            Container(height: 50.0, width: 140.0, color:Colors.amberAccent,),
            Container(height: 50.0, width: 150.0, color:Colors.amber,),
            Container(height: 50.0, width: 160.0, color:Colors.redAccent,),
            Container(height: 50.0, width: 170.0, color:Colors.red,),
            Container(height: 50.0, width: 180.0, color:Colors.grey,),
            Container(height: 50.0, width: 190.0, color:Colors.black,),
            Container(height: 50.0, width: 200.0, color:Colors.yellow,),
            Container(height: 50.0, width: 210.0, color:Colors.greenAccent,),
            Container(height: 50.0, width: 220.0, color:Colors.lightBlueAccent,),
            Container(height: 50.0, width: 230.0, color:Colors.blueAccent,),
            Container(height: 50.0, width: 240.0, color:Colors.brown,),
            Container(height: 50.0, width: 250.0, color:Colors.cyan,),
            Container(height: 50.0, width: 260.0, color:Colors.cyanAccent,),
            Container(height: 50.0, width: 270.0, color:Colors.deepOrange,),
            Container(height: 50.0, width: 280.0, color:Colors.deepOrangeAccent,),
            Container(height: 50.0, width: 290.0, color:Colors.deepPurple,),
            Container(height: 50.0, width: 300.0, color:Colors.purpleAccent,),
            Container(height: 50.0, width: 310.0, color:Colors.purple,),
            Container(height: 50.0, width: 320.0, color:Colors.indigo,),
            Container(height: 50.0, width: 330.0, color:Colors.pink,),
            Container(height: 50.0, width: 340.0, color:Colors.pinkAccent,),
            Container(height: 50.0, width: 350.0, color:Colors.orange,),
            Container(height: 50.0, width: 360.0, color:Colors.orangeAccent,),

          ],
        ),
      )
    );
  }

}

3. 源码截图

---

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rAvikwRS-1638412628367)(D:/Typora/Flutter/wrap.jpg)]