乐趣区

关于ios:Flutter-210Flutter手把手教程UI布局和Widget流式布局Wrap

作者 | 弗拉德
起源 | 弗拉德(公众号:fulade_me)

Wrap

FlutterWrap是流式布局控件,RowColumn 在布局上是很好用,然而有一个毛病,如果当子控件数量过多导致 RowColumn装载不下的时候,就会呈现 UI 页面上的谬误。Wrap能够完满的防止这个问题,当控件过多一行显示不全的时候,Wrap能够换行显示。

当然 WrapRowColumn 有着很多类似的中央。
咱们先来看 Wrap 的构造函数:

Wrap({
    // Key
    Key key,
    // 子控件显示方向,有垂直方向 程度方向两个值
    this.direction = Axis.horizontal,
    /// 子控件的 布局形式  跟 Column 的 mainAxisalignment 相似 
    this.alignment = WrapAlignment.start,
    /// 子控件 主轴方向间距
    this.spacing = 0.0,
    /// 子控件 穿插方向的 布局形式
    this.runAlignment = WrapAlignment.start,
    /// 子控件 穿插方向间距
    this.runSpacing = 0.0,
    /// 穿插轴的对齐形式 与 Column 的 crossAxisAlignment 一样
    this.crossAxisAlignment = WrapCrossAlignment.start,
    /// 书写方向 与 Column 的 textDirection 一样
    this.textDirection,
    /// Wrap 穿插轴方向上子控件的布局方向
    this.verticalDirection = VerticalDirection.down,
    /// 裁剪形式
    this.clipBehavior = Clip.hardEdge,
    /// 子控件
    List<Widget> children = const <Widget>[],}) 

上面咱们就来看看这些参数

direction

direction有两个参数值 Axis.horizontalAxis.vertical,很显著它治理着 Wrap 的是程度布局还是垂直布局。
Axis.horizontal示意子控件按程度方向布局,Axis.vertical示意子控件按垂直方向布局显示。

Axis.horizontal
成果如下:

Axis.vertical
成果如下:

alignment

alignment接管一个 WrapAlignment 类型的枚举,WrapAlignment共有六个枚举值,如下:

WrapAlignment的枚举值与成果与 ColumnmainAxisAlignment成果一样,想理解的能够看之前的文章

枚举值 形容
start 与 开始的地位对齐
end 与 完结的地位对齐
center 居中对齐
spaceBetween 把残余的空间拆分成 n - 1 份(n 是子控件的个数) 每一份都插入到子控件之间
spaceEvenly 把残余的空间拆分成 n + 1 份(n 是子控件的个数) 而后均匀分布
spaceAround 把残余空间拆分成 2n 份(n 是子控件的个数) 每个子控件高低各放一份

WrapAlignment.start

WrapAlignment.center

WrapAlignment.end

WrapAlignment.spaceBetween

WrapAlignment.spaceEvenly

WrapAlignment.spaceAround

runAlignment

runAlignment接管一个 WrapAlignment 类型的枚举,WrapAlignment共有六个枚举值(跟 alignment 的枚举值是一样的),runAlignment管制是的是 Wrap 布局穿插方向的对齐形式。
如果 Wrap 的是程度方向布局,runAlignment管制的就是 Wrap 垂直方向的对齐形式。

verticalDirection

verticalDirection有两个值 VerticalDirection.downVerticalDirection.up,示意从哪个方向开始布局。
VerticalDirection.down

VerticalDirection.up

留神 当设置为 VerticalDirection.up 的时候,第一个控件也就是 Number 0 是从最低端最左侧开始的。

spacing 和 runSpacing

spacing示意子控件主轴方向间距,runSpacing子控件在穿插方向间距。
在一个程度方向布局的 Wrap 为中,spacing示意的就是程度方向子控件之间的间距,runSpacing示意的就是子控件在垂直方向上的间距。

space
space等于 10 的样子

space等于 40 的样子

runSpacing
runSpacing等于 10 的样子

runSpacing等于 40 的样子

想体验以上示例的运行成果,能够到我的 Github 仓库我的项目 flutter_app->lib->routes->wrap_page.dart 查看,并且能够下载下来运行并体验。


退出移动版