Flutter Layout组件之Wrap

介绍

可以在水平或垂直方向多行显示其子widget(流式布局),例如历史搜索记录的样子。

属性

  1. direction
    主轴方向,决定了子组件纵向布局还是横向布局,其值有如下:
  • Axis.horizontal 水平布局
  • Axis.vertical 垂直布局
  1. alignment
    主轴方向的对齐方式,对齐方式只对有剩余空间的行或者列起作用,其值有:
enum WrapAlignment {
    start,
    end,
    center,
    spaceBetween,
    // 第一个子控件距开始位置和最后一个子控件距结尾位置是其他子控件间距的一半。
    spaceAround, 
    // 所有间距一样。
    spaceEvenly,
}
  1. spacing
    主轴的组件间隔大小
  2. runAlignment
    交叉轴方向各行或者各列的对齐方式,跟alignment属性类似
  3. runSpacing
    交叉轴方向各行或者各列的间隔大小
  4. crossAxisAlignment
    每行或者每列,交叉轴方向的对齐方式,每行或者每列的组件的高度不同能看出效果
  5. textDirection
    主轴方向的子组件的排列方向
enum TextDirection {
  /// The text flows from right to left (e.g. Arabic, Hebrew).
  rtl,

  /// The text flows from left to right (e.g., English, French).
  ltr,
}
  1. verticalDirection
    交叉轴方向上子组件的排列方向
enum VerticalDirection {
  /// Boxes should start at the bottom and be stacked vertically towards the top.
  ///
  /// The "start" is at the bottom, the "end" is at the top.
  up,

  /// Boxes should start at the top and be stacked vertically towards the bottom.
  ///
  /// The "start" is at the top, the "end" is at the bottom.
  down,
}
  1. clipBehavior
    当超出父布局时的裁剪方式。

你可能感兴趣的:(Flutter Layout组件之Wrap)