在 Flutter 应用里面，界面的布局经常会用到 Row 还有 Column .. Row 表示横着排 .. Column 是竖着排 .. Flutter 借用了 CSS 里的 Flebox 的概念 .. 所以了解一下 CSS 里的 Flexbox 布局的方法，可以帮助我们理解在 Flutter 应用里实现布局 ..

在我们自己创建的 LayoutDemo 这个小部件里面，可以先添加一个 Container .. 它的 child ... 先用一下 Row .. 这个东西就相当于是在 Flexbox 里面，把 Flex 容器的 flex-direction 设置成了 row ..

它的孩子们会水平排列在一起 .. 添加一个 children 属性 .. 它的值是一组 widget .. 在它里可以添加几个东西 .. 这个 IconBadge 是我们自己定义的一个小部件 .. 上面会显示一个指定的小图标 .. 然后有一个蓝色的背景 ..

再添加两个这样的小部件 ... 修改一下要显示的小图标 .. beach_access ... 下面这个可以是 airplanemode_active ..

你会发现，在 Row 里面，它的孩子们横着排列 ...

我们可以再试一下 Column ... 把 Row 换成 Column ... 现在应用界面上的这几个蓝色背景的小图标会竖着排列 .. 在 CSS 的 Flexbox 里面，这个 Column 就相当于是把 flex-direction 设置成了 column 的一个 flex 容器 ...