Flutter手把手教程UI布局和Widget——流式布局Warp

2021-01-1521:44:19APP与小程序开发Comments3,293 views字数 2077阅读模式

Wrap

FlutterWrap是流式布局控件,RowColumn在布局上是很好用,但是有一个缺点,如果当子控件数量过多导致RowColumn装载不下的时候,就会出现UI页面上的错误。Wrap可以完美的避免这个问题,当控件过多一行显示不全的时候,Wrap可以换行显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

当然WrapRowColumn有着很多相似的地方。 我们先来看Wrap的构造函数:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

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>[],
}) 
复制代码

下面我们就来看看这些参数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

direction

direction有两个参数值Axis.horizontalAxis.vertical,很明显它管理着Wrap的是水平布局还是垂直布局。 Axis.horizontal表示子控件按水平方向布局,Axis.vertical表示子控件按垂直方向布局显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

Axis.horizontal 效果如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

Axis.vertical 效果如下: Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

alignment

alignment接收一个WrapAlignment类型的枚举,WrapAlignment共有六个枚举值,如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

WrapAlignment的枚举值与效果与 ColumnmainAxisAlignment效果一样,想了解的可以看之前的文章文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

枚举值描述
start与 开始的位置对齐
end与 结束的位置对齐
center居中对齐
spaceBetween把剩余的空间拆分成n-1份(n是子控件的个数) 每一份都插入到子控件之间
spaceEvenly把剩余的空间拆分成n+1份(n是子控件的个数) 然后均匀分布
spaceAround把剩余空间拆分成 2n 份(n是子控件的个数) 每个子控件上下各放一份

WrapAlignment.start
Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

WrapAlignment.center
Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

WrapAlignment.end
Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

WrapAlignment.spaceBetween
Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

WrapAlignment.spaceEvenly
Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

WrapAlignment.spaceAround
Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

runAlignment

runAlignment接收一个WrapAlignment类型的枚举,WrapAlignment共有六个枚举值(跟alignment的枚举值是一样的),runAlignment控制是的是Wrap布局交叉方向的对齐方式。
如果Wrap的是水平方向布局,runAlignment控制的就是Wrap垂直方向的对齐方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

verticalDirection

verticalDirection有两个值VerticalDirection.downVerticalDirection.up,表示从哪个方向开始布局。
VerticalDirection.down
Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

VerticalDirection.up
Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

注意 当设置为VerticalDirection.up的时候,第一个控件也就是Number 0是从最低端最左侧开始的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

spacing 和 runSpacing

spacing表示子控件主轴方向间距,runSpacing子控件在交叉方向间距。
在一个水平方向布局的Wrap为中,spacing表示的就是水平方向子控件之间的间距,runSpacing表示的就是子控件在垂直方向上的间距。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

space
space等于10的样子
Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

space等于40的样子
Flutter手把手教程UI布局和Widget——流式布局Warp runSpacing
runSpacing等于10的样子
Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

runSpacing等于40的样子
Flutter手把手教程UI布局和Widget——流式布局Warp文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

想体验以上示例的运行效果,可以到我的Github仓库项目flutter_app->lib->routes->wrap_page.dart查看,并且可以下载下来运行并体验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

作者:弗拉德
链接:https://juejin.cn/post/6917915835055112206
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20833.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/20833.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定