flutter控件 Wrap

最新推荐文章于 2025-01-12 00:53:34 发布

原创最新推荐文章于 2025-01-12 00:53:34 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #android studio

flutter 专栏收录该内容

68 篇文章

订阅专栏

本文详细介绍了Flutter中的Wrap布局控件，包括其水平和垂直布局、对齐方式、间隔设置、文字方向以及垂直方向的调整。通过实例代码展示了如何创建多行流式布局，并解释了各属性对布局效果的影响，帮助开发者更好地理解和使用Wrap布局。

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

创建多个子控件做为Wrap的子控件，代码如下：

Wrap(
      children: List.generate(10, (i) {
        double w = 50.0 + 10 * i;
        return Container(
          color: Colors.primaries[i],
          height: 50,
          width: w,
		  child: Text('$i'),
        );
      }),
    )

布局方向

direction属性控制布局方向，默认为水平方向，设置方向为垂直代码如下：

Wrap(
	direction: Axis.vertical,
	...
)

对齐方式

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

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

Wrap(
	alignment: WrapAlignment.spaceBetween,
	...
)

设置交叉轴对齐代码如下：

Wrap(
	crossAxisAlignment: WrapCrossAlignment.center,
	...
)

如果Wrap的主轴方向为水平方向，交叉轴方向则为垂直方向，如果想要看到交叉轴对齐方式的效果需要设置子控件的高不一样，代码如下：

Wrap(
      spacing: 5,
      runSpacing: 3,
      crossAxisAlignment: WrapCrossAlignment.center,
      children: List.generate(10, (i) {
        double w = 50.0 + 10 * i;
        double h = 50.0 + 5 * i;
        return Container(
          color: Colors.primaries[i],
          height: h,
          alignment: Alignment.center,
          width: w,
          child: Text('$i'),
        );
      }),
    )

runAlignment属性控制Wrap的主轴垂直方向每一行的对齐方式，语言描述大家可能云里雾绕的，下面直接看runAlignment6中方式对应的效果图，

Wrap(
	runAlignment: WrapAlignment.spaceEvenly,
	...
)

间隔

spacing和runSpacing 属性控制Wrap主轴方向和交叉轴方向子控件之间的间隙，代码如下：

Wrap(
	spacing: 5,
    runSpacing: 2,
	...
)

textDirection

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

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

verticalDirection

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

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