Wrap

一个在多个水平或垂直行中显示其子项的组件

在Flutter中，Wrap是一个流式布局组件，用于在主轴方向上自动换行或换列，避免内容超出屏幕边界。它类似于Row/Column，但会在空间不足时自动将子组件移到下一行/列。

基本用法

  1. 横向标签流式布局
Wrap(
  spacing: 8.0, // 水平间距
  runSpacing: 4.0, // 垂直间距
  children: List.generate(
    10,
    (index) => Chip(
      label: Text('标签 $index'),
      backgroundColor: Colors.blue[100 * (index % 8 + 1)],
    ),
  ),
)
  1. 纵向流式布局
Wrap(
  direction: Axis.vertical, // 纵向排列
  spacing: 10.0,
  children: [
    ElevatedButton(onPressed: () {}, child: Text('按钮1')),
    ElevatedButton(onPressed: () {}, child: Text('按钮2')),
    // 更多按钮...
  ],
)

和Row/Column的区别

特性WrapRow/Column
溢出处理自动换行/列直接溢出(需要手动处理如Expanded)
适用场景标签、动态列表固定布局
性能稍低(需计算换行)更高

注意事项

  1. 子组件尺寸 避免子组件过大导致换行异常
  2. 嵌套滚动 若Wrap在Column中，需要用Expanded或SingleChildScrollView包裹
  3. 动态内容 结合List.generate或map生成子组件

构造函数

Wrap.new({
  Key? key, 
  Axis direction = Axis.horizontal, 
  WrapAlignment alignment = WrapAlignment.start, 
  double spacing = 0.0, 
  WrapAlignment runAlignment = WrapAlignment.start, 
  double runSpacing = 0.0, 
  WrapCrossAlignment crossAxisAlignment = WrapCrossAlignment.start, 
  TextDirection? textDirection, 
  VerticalDirection verticalDirection = VerticalDirection.down, 
  Clip clipBehavior = Clip.none, 
  List<Widget> children = const <Widget>[]
})

属性

属性名属性类型说明
alignmentWrapAlignment主轴对齐方式(如start、center、spaceBetween)
childrenList<Widget>子组件列表
crossAxisAlignmentWrapCrossAlignment子组件在交叉轴上的对齐方式
directionAxis主轴方向(横向或纵向)
runAlignmentWrapAlignment交叉轴的对齐方式
spacingdouble主轴方向子组件之间的间距
textDirectionTextDirection文本方向
verticalDirectionVerticalDirection子组件的垂直排列方向