Flutter UI基础- Expanded, Row, Column

今天我们来看看和容器相关的几个控件

Expanded

Expanded这个控件会把同级别的控件，在父控件中填充满整个父控件。

这样解释起来还是很麻烦，不是很清晰，我们直接上代码比较一下效果。

首先，看一下没有添加 Expanded 的代码，和效果。

代码部分，没有添加expanded

代码效果

这是代码效果

如果加入 Expanded

代码如下：

加入expanded代码

效果如下：

如果添加文字之后，expanded 他的大小会受到文字的影响，我们通过代码来感受一下。

为了方便，我把代码和效果截图放在一起

如果字数长度变长，还会影响他的宽度，见下图。

Row和Column 类似

我们通过代码来看一下Row 效果， Row 的效果是横向排版，把Row 里面的children 控件全部横向排版。可以设置内边距，也可以结合Expanded 填充使用，还可以设置其中的子控件的比例大小.

这里，可以看到，margin 对绿色Expanded 在子控件中的影响情况，之前章节讲过相关部分，不在阐述，在这里我们主要看的是Row 控件，他的情况就是把三个子控件横向平铺，Expanded 去把其他子控件填充满整个父控件当中。

这里不再对Column 做相关讲解，因为效果一致，只不过是竖着的效果。