2025年Flutter Wrap 流布、自动换行

科技前沿 • 2025-01-05 07:10 • 阅读 70

大家好，我是讯享网，很高兴认识大家。

Wrap 可以实现流布局（自动换行），当子元素在一行排列空间不足时，会自动换行排列显示。

参数详解

属性	说明
direction	排列方向（垂直和水平）
alignment	主轴（x）对齐方式
spacing	主轴（x）子元素间距
runAlignment	纵轴（y）对齐方式
runSpacing	纵轴（y）子元素间距
crossAxisAlignment	交叉轴（crossAxis）方向上的对齐方式。
textDirection	正反序排列
verticalDirection	文本方向。
children	子元素集合

alignment

WrapAlignment.start,
WrapAlignment.end,
WrapAlignment.center,
WrapAlignment.spaceAround,//左右对齐间距与控件同时平分空间

WrapAlignment.spaceBetween,//左右对齐间距平分两边没间隙

WrapAlignment.spaceEvenly,//左右对齐间距平分两边有间隙

代码示例

class MyBodyA extends StatelessWidget { @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(8), color: Colors.red[200], width: 400, height: 500, child: Wrap( //水平间距 spacing: 8.0, //垂直间距 runSpacing: 10.0, //对齐方式 alignment: WrapAlignment.spaceBetween, children: <Widget>[ MyView('A'), MyView('widget'), MyView('that'), MyView('displays'), MyView('its'), MyView('children'), MyView('int'), MyView('multiple'), MyView('horizontal'), MyView('vertical'), MyView('runs'), ], ) ); } } //定义一个 公共类 返回view class MyView extends StatelessWidget { String text; MyView(this.text); @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.fromLTRB(8, 5, 8, 5), decoration: BoxDecoration( border:Border.all( color: Colors.blue, width: 1, ), borderRadius: BorderRadius.all( Radius.circular(8), ), ), child: Text(this.text), ); } }

讯享网

2025年Flutter Wrap 流布、自动换行

参数详解

代码示例

效果图

相关推荐