Wrap组件

最新推荐文章于 2024-11-24 21:15:00 发布

jiahua123_dongzhou

最新推荐文章于 2024-11-24 21:15:00 发布

阅读量256

点赞数 1

分类专栏： fflutter组件

本文链接：https://blog.youkuaiyun.com/jiahua123_dongzhou/article/details/108397261

版权

fflutter组件专栏收录该内容

31 篇文章

订阅专栏

Wrap组件是Flutter中实现流式布局的关键，它允许元素在mainAxis空间不足时自动换行到crossAxis上，既可模拟Row的效果，也能实现Column的功能，尤其适合多行多列的灵活展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Wrap组件

Wrap可以实现流布局，单行的Wrap跟Row表现几乎一致，单列的Wrap则跟Row表现几乎一致。但Row与columl都是单行单列的，Wrap则突破了这个限制，mainAxis上空间不足时，则向crossAxis上去扩展显示。

属性	默认值	说明
direction	Axis.horizontal	主轴的方向，默认水平
alignment	WrapAlignment.start	主轴的对其方式
spacing	0.0	主轴方向上的间距
runAlignment	WrapAlignment.start	run的对齐方式，run可以理解为新的行或者列，如果是水平方向布局的话，run可以理解为新的一行
runSpacing	0.0	run的间距
textDirection		文本方向
verticalDirection	VerticalDirection.down	定义了children摆放顺序，，默认是down,见Flex相关属性介绍

 return Container(
      child: Wrap(
        direction: Axis.vertical,
        spacing: 20.0,
        alignment: WrapAlignment.spaceAround,
        runSpacing: 20.0,
        children: [
          MyButton('hello'),
          MyButton('hello1'),
          MyButton('hello3hdfhg'),
          MyButton('hello'),
          MyButton('hello1'),
          MyButton('hello3dgfgjfgjfgj'),
          MyButton('hello'),
          MyButton('hello1'),
          MyButton('hello3'),
        ],
      ),
    );

效果如下: