『Flutter』布局组件 Container、Row、Column、Stack

程序员 NEO

发布于 2025-03-07 09:23:27

9800

代码可运行

文章被收录于专栏：前端必修课前端必修课

运行总次数：0

代码可运行

1.前言

经过上一Flutter 入门必学 MaterialApp 与 Scaffold 核心组件实战篇文章，开发出来了第二个 Flutter 程序，接下来是给大家详细的介绍下 Flutter 的布局组件。

2.布局组件

Flutter 的布局组件非常的多，这里我就给大家介绍几个常用的布局组件，其他的布局组件大家可以去官方文档查看。

官方文档：https://flutter.dev/docs/development/ui/widgets/layout

2.1. Container

Flutter中的Container组件是一个非常通用且多功能的布局构件。它可以用来创建矩形的视觉元素，可以装饰以盒子装饰（例如背景色或边框），也可以配置边距、填充和尺寸约束。Container可以包含一个单独的子元素，但不是专门用来做子元素布局的，对于布局，Flutter提供了其他组件如Row、Column或Stack。

常用属性：

1. child: 容器内的单个子Widget。
2. padding: 插入子Widget周围的空白空间。
3. color: 容器的背景颜色。
4. decoration: 绘制在容器上的装饰，通常用于添加背景图像、边框、阴影等。
5. margin: 围绕容器外边缘的空白空间。
6. width 和 height: 容器的宽度和高度。
7. alignment: 控制子Widget如何在容器内对齐。

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: Container(
            width: 150.0,
            height: 150.0,
            padding: const EdgeInsets.all(16.0),
            margin: const EdgeInsets.symmetric(horizontal: 20.0),
            alignment: Alignment.center,
            color: Colors.blue,
            child: const Text(
              'Hello Container!',
              style: TextStyle(color: Colors.white),
            ),
          ))));
}

效果图：

2.2. Row

在Flutter中，Row和Column是用于布局的基本组件，它们分别用于在水平和垂直方向上排列子组件。

Row组件可以在水平方向上排列其子组件。它是一个灵活的布局工具，常用于创建水平布局。

常用属性：

• children: Row中的子组件列表。
• mainAxisAlignment: 如何沿主轴（在此情况下为水平方向）对齐子组件。
• crossAxisAlignment: 如何沿交叉轴（在此情况下为垂直方向）对齐子组件。
• mainAxisSize: 主轴的大小，默认为MainAxisSize.max。

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: const Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Icon(Icons.share),
              Icon(Icons.thumb_up),
              Icon(Icons.thumb_down),
            ],
          )
      )
    )
 );
}

效果图：

这个例子创建了一个Row，其中包含三个图标，这些图标在行中均匀分布。

2.3. Column

Column组件用于在垂直方向上排列其子组件。

常用属性：

• children: Column中的子组件列表。
• mainAxisAlignment: 如何沿主轴（在此情况下为垂直方向）对齐子组件。
• crossAxisAlignment: 如何沿交叉轴（在此情况下为水平方向）对齐子组件。
• mainAxisSize: 主轴的大小，默认为MainAxisSize.max。

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: const Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('First Item'),
              Text('Second Item'),
              Text('Third Item'),
            ],
          )
      )
    )
 );
}

效果图：

3. Stack

在Flutter中，Stack组件用于将多个子组件重叠在一起。Stack允许子组件相对于其边缘或相对于其他子组件的位置进行定位，非常适合用来创建重叠的布局。

常用属性：

1. children: Stack中的子组件列表。列表中的第一个组件是底部组件，随后的组件会在上面层叠。
2. alignment: 决定非定位子组件的对齐方式。默认值是AlignmentDirectional.topStart。
3. fit: 如何调整非定位子组件的大小。默认值是StackFit.loose，意味着子组件自身决定其大小。
4. overflow: 已弃用，替代属性为clipBehavior，决定如何显示超出Stack边界的子组件。

3.1.基本使用

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                width: 300,
                height: 300,
                color: Colors.red,
              ),
              Container(
                width: 200,
                height: 200,
                color: Colors.green,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ],
          )
      )
    )
 );
}

这个示例创建了一个Stack，其中包含三个大小不同、颜色不同的容器。最大的容器（红色）位于底部，其次是绿色和蓝色的容器。

children 是一个包含三个 Container 组件的列表，这些组件作为 Stack 组件的子元素。每个 Container 都有自己的尺寸和颜色。在 Stack 中，这些容器会按照列表中的顺序层叠显示，最先出现的在底部，最后出现的在顶部。

3.2.实现定位

在Flutter中，使用Stack和Positioned组件可以实现类似CSS中的绝对定位效果。Positioned组件可以指定子组件在Stack中的确切位置。

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: Stack(
            children: <Widget>[
              Positioned(
                left: 50,
                transform: translateY( 50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              ),
              Positioned(
                right: 50,
                bottom: 50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
              ),
              Positioned(
                left: 150,
                top: 150,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ),
            ],
          )
      )
    )
 );
}

效果图：