(6)、Study Flutter Row/Column Widget组件学习

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

Row Widget属性介绍

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

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

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

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

body: Row(
          children: [
            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

stretch横向的放置子widget集合,并且填充横轴。

QQ截图20190110113506.png

• textDirection 这个属性之前就介绍过，就不过多介绍了。
• verticalDirection 容器垂直流动方向
• textBaseline用于对齐文本的水平线