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
    当超出父布局时的裁剪方式。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容