内容简介:默认的排列方式有如下:看图了解一下。spaceBetween:
默认的排列方式有如下:
enum MainAxisAlignment { /// 将children放置在主轴的起点 start, /// 将children放置在主轴的末尾 end, /// 将children放置在主轴的中心 center, /// 将主轴方向上的空白区域均分,使得children之间的空白区域相等,首尾child都靠近首尾,没有间隙 spaceBetween, /// 将主轴方向上的空白区域均分,使得children之间的空白区域相等,但是首尾child的空白区域为1/2 spaceAround, /// 将主轴方向上的空白区域均分,使得children之间的空白区域相等,包括首尾child spaceEvenly, } 复制代码
看图了解一下。
spaceBetween:
spaceAround:
spaceEvenly:
可以看到确实如我们刚才所写的一样。
不规则排序
那如果这个时候我想实现如下效果,该怎么做?
一个小方块在最前面,两个小方块在后面。
这个时候就需要Spacer,那什么是Spacer,按照惯例来看官方文档:
Spacer creates an adjustable, empty spacer that can be used to tune the spacing between widgets in a Flex container, like Row or Column. Spacer创建一个可调整的空间隔,可用于调整Flex容器(如行或列)中窗口小部件之间的间距。 复制代码
接下来再看一下该类,确定一下怎么使用:
class Spacer extends StatelessWidget { /// Creates a flexible space to insert into a [Flexible] widget. /// /// The [flex] parameter may not be null or less than one. const Spacer({Key key, this.flex = 1}) : assert(flex != null), assert(flex > 0), super(key: key); /// 用于确定占用多少空间的弹性系数。 /// 在放置不灵活的子对象后,根据子对象的弹性系数,将自由空间按比例分割, /// 从而确定[间隔对象]在主轴中可以占用的空间量。默认为1。 final int flex; @override Widget build(BuildContext context) { return Expanded( flex: flex, child: const SizedBox.shrink(), ); } } 复制代码
可以看到,它其实就是包装了一个 Expanded 的 SizedBox 。
知道了原理以后我们就可以灵活控制 Row/Column了。
示例如下:
body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Container( color: Colors.blue, margin: EdgeInsets.symmetric(horizontal: 5), height: 50, width: 50, ), Spacer(flex: 2), // 弹性系数为2 Container( color: Colors.blue, height: 50, margin: EdgeInsets.symmetric(horizontal: 5), width: 50, ), Spacer(), // 弹性系数默认为1 Container( color: Colors.blue, margin: EdgeInsets.symmetric(horizontal: 5), height: 50, width: 50, ), ], ), ) 复制代码
效果如下:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 6、如何获取配置中心的配置
- React降级配置及Ant Design配置
- vscode 配置eslint 开发vue的相关配置
- git commit 规范校验配置和版本发布配置
- hadoop地址配置、内存配置、守护进程设置、环境设置
- 在hibernate中配置事务级别与命名查询配置【原创】
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java学习笔记
林信良 / 清华大学出版社 / 2015-3-1 / CNY 68.00
●本书是作者多年来教学实践经验的总结,汇集了学员在学习课程或认证考试中遇到的概念、操作、应用等问题及解决方案 ●针对Java SE 8新功能全面改版,无论是章节架构或范例程序代码,都做了重新编写与全面翻新 ●详细介绍了JVM、JRE、Java SE API、JDK与IDE之间的对照关系 ●从Java SE API的源代码分析,了解各种语法在Java SE API中的具体应用 ......一起来看看 《Java学习笔记》 这本书的介绍吧!