【Flutter】页面布局：线性布局（Row 和 Column）

在 Flutter 中，布局（Layout）是应用开发的核心之一。通过布局组件，开发者可以定义应用中的控件如何在屏幕上排列。Row 和 Column 是 Flutter 中最常用的两种线性布局方式，用于水平和垂直排列子组件。在本教程中，我们将详细介绍这两个布局组件的用法，并通过实例帮助理解如何使用它们来构建灵活、响应式的用户界面。

线性布局简介

线性布局是指组件按一定方向依次排列，方向可以是水平（Row）或者垂直（Column）。在 Flutter 中，Row 用于水平排列，Column 用于垂直排列。它们都可以包含多个子组件，按照一定规则依次布局。

Row 和 Column 的基本属性：

• children : 这是它们最主要的属性，用于指定要排列的子组件，通常是一个 Widget 的列表（List<Widget>）。
• mainAxisAlignment : 控制主轴（Row 的主轴是水平轴，Column 的主轴是垂直轴）上的对齐方式。
• crossAxisAlignment : 控制交叉轴（Row 的交叉轴是垂直轴，Column 的交叉轴是水平轴）上的对齐方式。
• mainAxisSize: 决定主轴的尺寸大小，是占满可用空间还是仅包裹内容。

Row：水平布局

Row 是一个水平方向的布局组件，它允许子组件在水平轴上依次排列。通过 Row，你可以很容易地实现按钮栏、图标栏等常见的水平布局场景。

Row 基本示例

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('Row 示例')),
        body: Row(
          children: <Widget>[
            Icon(Icons.home, size: 40, color: Colors.blue),
            Icon(Icons.favorite, size: 40, color: Colors.red),
            Icon(Icons.settings, size: 40, color: Colors.green),
          ],
        ),
      ),
    );
  }
}

在这个例子中，Row 组件水平排列了三个图标。Row 中的 children 属性是一个 List<Widget>，每个子组件会按顺序从左到右进行排列。

Row 主要属性详解

1. mainAxisAlignment

   控制子组件在主轴（水平方向）上的对齐方式。mainAxisAlignment 提供了几种常用的对齐方式：

   • MainAxisAlignment.start: 子组件从主轴起始位置排列（默认）。
   • MainAxisAlignment.end: 子组件从主轴结束位置排列。
   • MainAxisAlignment.center: 子组件在主轴上居中排列。
   • MainAxisAlignment.spaceBetween: 子组件在主轴上平均分布，首尾组件紧贴两端，中间均匀间隔。
   • MainAxisAlignment.spaceAround: 子组件在主轴上均匀分布，每个组件两侧有相同的间距。
   • MainAxisAlignment.spaceEvenly: 子组件均匀分布，子组件之间以及两端的间距都相同。

   示例：

   Row(
     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
     children: <Widget>[
       Icon(Icons.home, size: 40),
       Icon(Icons.favorite, size: 40),
       Icon(Icons.settings, size: 40),
     ],
   )

2. crossAxisAlignment

   控制子组件在交叉轴（垂直方向）上的对齐方式：

   • CrossAxisAlignment.start: 子组件在交叉轴起始位置对齐。
   • CrossAxisAlignment.end: 子组件在交叉轴结束位置对齐。
   • CrossAxisAlignment.center: 子组件在交叉轴上居中对齐（默认）。
   • CrossAxisAlignment.stretch: 拉伸子组件以占满交叉轴。

   示例：

   Row(
     crossAxisAlignment: CrossAxisAlignment.center,
     children: <Widget>[
       Icon(Icons.home, size: 40),
       Icon(Icons.favorite, size: 60),
       Icon(Icons.settings, size: 40),
     ],
   )

3. mainAxisSize

   控制 Row 在主轴方向的尺寸大小，默认是 MainAxisSize.max，即尽可能占用主轴的全部空间。如果只想让 Row 根据子组件的宽度进行调整，可以设置为 MainAxisSize.min。

   示例：

   Row(
     mainAxisSize: MainAxisSize.min,
     children: <Widget>[
       Icon(Icons.home, size: 40),
       Icon(Icons.favorite, size: 40),
       Icon(Icons.settings, size: 40),
     ],
   )

Column：垂直布局

与 Row 类似，Column 用于将子组件按垂直方向排列。它适用于需要将多个组件上下堆叠的场景，例如表单、列表项等。

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('Column 示例')),
        body: Column(
          children: <Widget>[
            Text('Flutter', style: TextStyle(fontSize: 24)),
            Icon(Icons.favorite, size: 50, color: Colors.red),
            Text('Dart', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}

在此示例中，Column 将三个子组件按垂直方向依次排列。与 Row 类似，Column 也有一些控制排列和对齐的属性。

Column 主要属性详解

1. mainAxisAlignment

   控制子组件在主轴（垂直方向）上的对齐方式，属性和 Row 中的 mainAxisAlignment 用法相同。

   示例：

   Column(
     mainAxisAlignment: MainAxisAlignment.spaceAround,
     children: <Widget>[
       Text('上方文本', style: TextStyle(fontSize: 24)),
       Icon(Icons.favorite, size: 50),
       Text('下方文本', style: TextStyle(fontSize: 24)),
     ],
   )

2. crossAxisAlignment

   控制子组件在交叉轴（水平方向）上的对齐方式，属性与 Row 中的 crossAxisAlignment 类似。

   示例：

   Column(
     crossAxisAlignment: CrossAxisAlignment.center,
     children: <Widget>[
       Text('文本1', style: TextStyle(fontSize: 24)),
       Text('文本2', style: TextStyle(fontSize: 24)),
     ],
   )

3. mainAxisSize

   控制 Column 在主轴方向的尺寸大小，默认是 MainAxisSize.max，即尽可能占用垂直方向的全部空间。如果只想让 Column 根据子组件的高度进行调整，可以设置为 MainAxisSize.min。

   示例：

   Column(
     mainAxisSize: MainAxisSize.min,
     children: <Widget>[
       Text('文本1', style: TextStyle(fontSize: 24)),
       Text('文本2', style: TextStyle(fontSize: 24)),
     ],
   )

---

使用 Expanded 调整布局

Expanded 是一个非常实用的组件，它可以让某个子组件在主轴方向上占据尽可能多的空间。在 Row 和 Column 布局中，使用 Expanded 可以灵活调整子组件的大小和占比。

示例：使用 Expanded

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
        height: 50,
      ),
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 50,
    ),
  ],
)

在这个示例中，Expanded 让第一个子组件（红色容器）在 Row 的水平方向上占据尽可能多的空间，而第二个子组件（绿色容器）固定宽度为 100 像素。

Row 和 Column 组合使用

在实际开发中，你经常需要将 `

Row和Column组合使用来创建复杂的布局结构。通过将Row和Column` 嵌套在一起，可以轻松构建出网格布局、表单布局等复杂界面。

示例：嵌套使用 Row 和 Column

Column(
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Icon(Icons.home, size: 40),
        Icon(Icons.favorite, size: 40),
        Icon(Icons.settings, size: 40),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Text('Home'),
        Text('Favorite'),
        Text('Settings'),
      ],
    ),
  ],
)

这个示例展示了如何将 Row 和 Column 组合使用，一个 Row 中放置了图标，另一个 Row 中放置了对应的文本。

总结

Row 和 Column 是 Flutter 中最基础、最常用的布局组件，它们分别用于水平和垂直排列子组件。通过合理地使用这些线性布局组件，并结合属性如 mainAxisAlignment、crossAxisAlignment 和 Expanded，开发者可以轻松构建出灵活、响应式的用户界面。

掌握 Row 和 Column 的使用技巧，是 Flutter 布局系统中非常重要的一部分。在后续的开发中，随着需求的复杂化，线性布局通常会与其他布局组件如 Stack、Flex 等组合使用，构建出更加复杂的界面。