· 更新于 2022-07-18
Flutter►第五章：详解

第1节：详解布局

参考文章：

一、基础知识

1.spaceEvently

一行中如果有2个widget(五个五角星暂且看成1个widget),那么除去2widget所占据的宽度，3个红色方块宽度是一样的， 如下图所示

img

2.spaceBetween

一行中如果有2个widget,那么分布2端，如下图所示

img

3.spaceAround

一行中如果有2个widget,那么每个widget左右都是相同的方块，如下图所示

img

类型 含义 row举例 column举例
start
(default)		 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐 在这里插入图片描述 在这里插入图片描述
start
textDirection: TextDirection.rtl,		 textDirection的值为从右至左 row_start-rtl 在这里插入图片描述
center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。 在这里插入图片描述 在这里插入图片描述
end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。 在这里插入图片描述 在这里插入图片描述
space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 在这里插入图片描述 在这里插入图片描述
space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 在这里插入图片描述 在这里插入图片描述
spaceEvenly 将主轴空白区域均分，使各个子控件间距相等 在这里插入图片描述 在这里插入图片描述

expand 要再column或row中使用

层叠

4.6 层叠布局 Stack、Positioned

eg：在视图上，显示loading动画

问：flutter text 左对齐_如何在Flutter中将文本垂直和水平居中？

答：首先可以使用Center让控件居中，其次使用textAlign设置水平居中，示例代码如下：

1
2
3
4
5
6
child: Center(
    child: Text(
        "Hello World",
         textAlign: TextAlign.center,
    ),
),

flutter 隐藏显示控件

1
2
3
4
Offstage(
  offstage: true, //true隐藏,false显示
  child: '子控件',
),