【接上篇：第一章●第四节：组件介绍<01>】
垂直和水平布置多个组件
最常见的布局模式之一是使用垂直或水平排列组件。我们可以使用Row组件水平排列组件，也可以使用Column组件垂直排列组件。
在Flutter中创建Row组件或Column组件，我们可以将列表子组件添加到Row组件或Column组件中。反之，每个子组件本身可以是一行或一列。以下将显示如何在行或列中嵌套使用行或列。
行列嵌套
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("行列嵌套"),
),
body: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
children: <Widget>[
Text("第一列"),
Text("第二列"),
Row(
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star),
],
),
Text("好评"),
],
),
Row(
children: <Widget>[
Column(
children: <Widget>[
Icon(Icons.home),
Row(
children: <Widget>[
Text("首页"),
],
),
Row(
children: <Widget>[
Text("Home")
],
)
],
),
Column(
children: <Widget>[
Icon(Icons.account_circle),
Row(
children: <Widget>[
Text("我的"),
],
),
Row(
children: <Widget>[
Text("Mine")
],
)
],
),
Column(
children: <Widget>[
Icon(Icons.message),
Row(
children: <Widget>[
Text("消息"),
],
),
Row(
children: <Widget>[
Text("Message")
],
)
],
),
],
)
],
),
Image.asset(
'images/logo.jpg',
)
],
),
),
);
}
}
行列嵌套
组件对齐
我们可以通过使用mainAxisAlignment和crossAxisAlignment属性控制行或列如何对齐子组件。对于一行，mainAxis水平延伸，crossAxis垂直延伸。对于列，mainAxis垂直延伸，crossAxis水平延伸。
通过在Row组件和Column组件中设置mainAxisAlignment和crossAxisAlignment属性来使其居于屏幕正中。MainAxisAlignment和CrossAxisAlignment类中提供了各种对齐方式，具体阅读这两个类。
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
居中显示
下面我们将三个图片放置在Row组件中，3个图像中的每一个是100像素宽。渲染框宽度超过300像素，这时我们需要将MainAxis对齐设置为三个图片均匀划分水平空间。
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset(
'images/pic1.jpg',
),
Image.asset(
'images/pic2.jpg',
),
Image.asset(
'images/pic3.jpg',
)
],
),
行
列的工作方式与行的工作方式相同。
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset(
'images/pic1.jpg',
),
Image.asset(
'images/pic2.jpg',
),
Image.asset(
'images/pic3.jpg',
)
],
),
列
尺寸组件
当布局太大导致设备无法正常显示时，会在边缘出现黄色和黑色条纹图案。
溢出
这种情况，我们可以使用Expanded组件来调整组件大小以适应行或列。
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: Image.asset(
'images/pic1.jpg',
),
),
Expanded(
child: Image.asset(
'images/logo.png',
),
),
Expanded(
child: Image.asset(
'images/pic2.jpg',
),
),
],
),
Expanded组件
若想要某一个组件占用的空间是其他组件的两倍，我们可以使用Expanded组件的flex属性，将其设置为2。
Expanded(
flex: 2,
child: Image.asset(
'images/logo.png',
),
),
占位
