您现在的位置是:首页 > 正文

《Flutter 控件大全》第一零二:Wrap

2024-04-01 05:32:35阅读 1
  • 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
  • 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
  • Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

Wrap可以为子控件进行水平或者垂直方向布局,且当空间用完时,Wrap会自动换行,也是常说的流式​布局。

创建多个子控件做为Wrap的子控件,代码如下:

Wrap(
      children: List.generate(10, (i) {
        double w = 50.0 + 10 * i;
        return Container(
          color: Colors.primaries[i],
          height: 50,
          width: w,
		  child: Text('$i'),
        );
      }),
    )

效果如图:

布局方向

direction属性控制布局方向,默认为水平方向,设置方向为垂直代码如下:

Wrap(
	direction: Axis.vertical,
	...
)

效果如图:

对齐方式

alignment属性控制主轴对齐方式,crossAxisAlignment属性控制交叉轴对齐方式,对齐方式只对有剩余空间的行或者列起作用,例如水平方向上正好填充完整,则不管设置主轴对齐方式为什么,看上去的效果都是铺满。

说明:主轴就是与当前控件方向一致的轴,而交叉轴就是与当前控件方向垂直的轴,如果Wrap的布局方向为水平方向Axis.horizontal,那么主轴就是水平方向,反之布局方向为垂直方向Axis.vertical,主轴就是垂直方向。

设置主轴对齐方式代码如下:

Wrap(
	alignment: WrapAlignment.spaceBetween,
	...
)

主轴对齐方式有6种,效果如下图:

spaceAround和spaceEvenly区别是:

  • spaceAround:第一个子控件距开始位置和最后一个子控件距结尾位置是其他子控件间距的一半。
  • spaceEvenly:所有间距一样。

设置交叉轴对齐代码如下:

Wrap(
	crossAxisAlignment: WrapCrossAlignment.center,
	...
)

如果Wrap的主轴方向为水平方向,交叉轴方向则为垂直方向,如果想要看到交叉轴对齐方式的效果需要设置子控件的高不一样,代码如下:

Wrap(
      spacing: 5,
      runSpacing: 3,
      crossAxisAlignment: WrapCrossAlignment.center,
      children: List.generate(10, (i) {
        double w = 50.0 + 10 * i;
        double h = 50.0 + 5 * i;
        return Container(
          color: Colors.primaries[i],
          height: h,
          alignment: Alignment.center,
          width: w,
          child: Text('$i'),
        );
      }),
    )

效果如下图:

runAlignment属性控制Wrap的主轴垂直方向每一行的对齐方式,语言描述大家可能云里雾绕的,下面直接看runAlignment6中方式对应的效果图,

runAlignmentalignment的区别:

alignment是主轴方向上对齐方式,作用于每一行。
runAlignment是垂直主轴方向上将每一行看作一个整体的对齐方式。

设置runAlignment属性代码如下:

Wrap(
	runAlignment: WrapAlignment.spaceEvenly,
	...
)

runAlignmentalignmentcrossAxisAlignment这3个属性如果只是从文字上描述是比较难描述清楚的,上面提供了效果图,方便大家理解,这3个属性是Wrap最重要的属性。

间隔

spacingrunSpacing 属性控制Wrap主轴方向和交叉轴方向子控件之间的间隙,代码如下:

Wrap(
	spacing: 5,
    runSpacing: 2,
	...
)

效果如下:

textDirection

textDirection属性表示Wrap主轴方向上子控件的方向,取值范围是ltr(从左到右)和rtl(从右到左),下面是从右到左的代码:

Wrap(
	textDirection: TextDirection.rtl,
	...
)

效果如下:

verticalDirection

verticalDirection属性表示Wrap交叉轴方向上子控件的方向,取值范围是up(从上到下)和down(从下到上),设置代码如下:

Wrap(
	verticalDirection: VerticalDirection.up,
	...
)

效果如下:

网站文章

  • io协议服务器,WebSocket协议-Socket.io 客户端API

    客户端APIIO如果使用的是标准化的JS库,则暴露为io这一命名空间;如果是用Node 编译,则使用require('socket.io-client')。引入socket.io的JS库const s...

    2024-04-01 05:32:27
  • java 设置年月日_java年月日的操作

    public static List getWeekDay(String strDate) {List list = new ArrayList();//第几周,周几String nReturn = ...

    2024-04-01 05:32:19
  • phpcustom长时间不用会停用?

    phpcustom长时间不用会停用?

    phpcustom长时间不操作只是会关闭软件界面而已,软件还是能正常运行网站!如果需要操作,重新打开界面就行,更加具体的描述,看下图软件提示的文字

    2024-04-01 05:32:13
  • ApplicationContext和ServletContext

    ApplicationContext和ServletContext转自:http://www.cnblogs.com/tuhooo/p/6491903.htmlServletContext与Web应用以及Spring容器启动一、ServletContext对象获取DemoServlet容器在启动时会加载Web应用,并为每个Web应用创建唯一的ServletC

    2024-04-01 05:31:32
  • 大规模采用 TypeScript 之后的 10 个见解

    大规模采用 TypeScript 之后的 10 个见解

    几年前,彭博社工程部决定采用 TypeScript 作为首选开发语言。在这篇文章中,将分享我们在这次迁移过程中学到的经验教训以及一些见解。总体而言,我们认为 TypeScript 是个完...

    2024-04-01 05:31:25
  • 后端编程-

    后端编程-

    网站数据存储在一个地方, 数据变化,不用更改代码。1.可以接收前端请求,2.处理业务逻辑3.响应数据给前端编程语言 javascript运行环境 nodejsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。

    2024-04-01 05:31:18
  • 【射频知识】PCB材料/层叠/信号注入设计与传输线实现形式的性能比对

    【射频知识】PCB材料/层叠/信号注入设计与传输线实现形式的性能比对

    PCB的设计从基础的模型到实际加工的实现形式,都需要注意,才能使最终加工出来的PCB达到我们预期的设计指标。

    2024-04-01 05:30:36
  • 工作了?人与人之间的艺术

    1、去别人家做客,当主人的话可多可少,甚至经常劝你喝茶或提建议看看电视时,你就该告辞了。人总是在感到无话可说时,才提醒别人做一些无关紧要的事。再待下去,你可能就不受欢迎了。2、正在对上司汇报工作,他的眼睛没有专注地看着你,或者他的手指不经意的在桌子上扣几下,很可能他已对你的汇报不满意了。如果你进去时,他脚正在桌子下无聊地晃动,你说话间,他的脚忽然间停止了晃动,那他已经对你的话产生了浓厚的兴趣。 3

    2024-04-01 05:30:28
  • 做了4年的开发,为何我决意转向产品经理

    做了4年的开发,为何我决意转向产品经理

    14年毕业的我,算上提前半年进入职场的话,至今已有将近5年的时间!在这么一段说短也不短的职业生涯里,前两年基本算是小打小闹,待的最长的一家公司,也只有一年整。然而,在这小打小闹的两年里,我的运气还算不...

    2024-04-01 05:30:21
  • linux eclipse安装目录在哪,Eclipse在Linux下在哪里寻找eclipse.ini

    我刚刚设置了Ubuntu工作站,并想向eclipse.ini添加一些设置。 当我搜索文件时,我发现:/etc/eclipse.ini/usr/lib/eclipse.ini我的问题是:Eclipse实...

    2024-04-01 05:29:41