第一章●第五节：组件介绍<02>

【接上篇：第一章●第四节：组件介绍<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',
  ),
),

占位

---

总目录结构