flutter Wrap 自动换行组件

flutter Wrap 自动换行组件


前言

Wrap 组件是一个可自动换行的组件,它可以代替Gridview 组件的使用,也可以非常轻松的达到适配的效果


Wrap() 的简单使用

先来简单的看一下源码

Wrap({
    
    
    super.key,
    this.direction = Axis.horizontal,
    this.alignment = WrapAlignment.start,
    this.spacing = 0.0,
    this.runAlignment = WrapAlignment.start,
    this.runSpacing = 0.0,
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.clipBehavior = Clip.none,
    super.children,
  }) : assert(clipBehavior != null);

从上面的源码中,我们可以看到,Wrap 组件没有必传属性,但是我们在使用的时候,往往需要传入 子child 的上下间距,direction 布局方向,开始样式等相关属性

 Wrap(
              direction: Axis.horizontal,
              alignment: WrapAlignment.start,
              spacing: 5.0,
              runSpacing: 5.0,
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.yellow,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              ],
            )

上面代码的运行效果如下

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/u010755471/article/details/127969694