(6)、Study Flutter Row/Column Wi

作者: 北有花开 | 来源:发表于2019-03-01 15:21 被阅读0次

这节开始讲介绍容器类组件介绍，首先介绍Row/Column Widget，它可以在横向/纵向包含一组widget组件。

Row Widget属性介绍

一个小部件，用于在水平数组中显示其子项。

要使子项扩展以填充可用的水平空间，请将子项包装在Expanded小部件中。

“行”窗口小部件不会滚动（并且通常将行中的子项多于可用空间中的子项被视为错误）。如果您有一系列小部件并希望它们能够在没有足够空间的情况下滚动，请考虑使用ListView。

children在横向上包含一系列widget组件。

body: Row(
          children: <Widget>[
            Text("Text1"),
            RaisedButton(child: Text("RaisedButton1"),),
            RaisedButton(child: Text("RaisedButton2"),),
            Text("Text2"),
          ],
        ),

mainAxisAlignment在flex中，子widget应该如何沿着主轴放置。
start将子widget集合放置在容器起点的位置，默认。

QQ截图20190110110456.png
center 将子widget集合放置在容器中间的位置，
QQ截图20190110110537.png
end 将子widget集合放置在容器末尾的位置，
QQ截图20190110110556.png
spaceBetween 将空闲的控件均匀的分配在子widget集合中
QQ截图20190110110716.png
spaceAround 将空闲的控件均匀的分配在子widget集合中，并且第一个和最后一个也存在一定的空闲。
QQ截图20190110110920.png
spaceEvenly 将空闲的控件均匀的分配在子widget集合中，并且第一个和最后一个均匀分配。
QQ截图20190110111054.png
mainAxisSize 容器应该占多大的空间
min 容器尽可能的占用最少的空闲空间，类似Android的wrap_content
max 容器尽可能的占用最多的空闲空间，类似Android的match_content
crossAxisAlignment 在flex中，子widget应该如何沿着横轴放置。
start从容器的最左上面开始，横向的放置子widget集合。

QQ截图20190110112559.png
center从容器的垂直中间位置，横向的放置子widget集合。
QQ截图20190110113152.png
end从容器的垂直底部位置，横向的放置子widget集合。
QQ截图20190110113251.png