Flutter 基础组件 Row & Column 入门指南

2024-02-10 06:38:07

简介

Row 和 Column 是 Flutter 中常用的多子控件容器组件，Row 用于水平布局子组件，而 Column 用于垂直布局子组件。它们都是继承自 RenderBox 的 StatelessWidget，因此也可以直接用于 Stack 组件的子组件。

重要概念

在使用 Row 和 Column 进行布局时，我们需要了解一些重要的概念：

主轴（mainAxisAlignment） ：主轴是指与布局方向相同的方向，在 Row 中为水平方向，在 Column 中为垂直方向。主轴对齐方式是指子组件在主轴方向上的对齐方式。
交叉轴（crossAxisAlignment） ：交叉轴是指与布局方向垂直的方向，在 Row 中为垂直方向，在 Column 中为水平方向。交叉轴对齐方式是指子组件在交叉轴方向上的对齐方式。
对齐方式 ：对齐方式用于指定子组件在主轴和交叉轴方向上的对齐方式，Flutter 中提供了多种对齐方式，例如 Start、Center、End 等。

属性

Row 和 Column 都具有以下属性：

mainAxisAlignment ：指定主轴对齐方式，可选值有 Start、Center、End、SpaceAround、SpaceBetween、SpaceEvenly。
crossAxisAlignment ：指定交叉轴对齐方式，可选值有 Start、Center、End、Stretch。
children ：子组件列表，用于指定要布局的子组件。

使用方法

使用 Row 和 Column 布局子组件非常简单，只需要在父组件中定义 Row 或 Column 组件，然后将要布局的子组件添加到 children 属性中即可。例如：

Row(
  children: [
    Text('文本1'),
    Text('文本2'),
    Text('文本3'),
  ],
);

示例

下面是一个使用 Row 和 Column 布局子组件的示例：

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('文本1'),
                Text('文本2'),
                Text('文本3'),
              ],
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('文本4'),
                Text('文本5'),
                Text('文本6'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}