Flutter容器（2）：容器组件（Container）

fengMisaka / 2024-10-12 / 原文

在 Flutter 中，Container（容器）是一个常用的部件，它提供了一种灵活的方式来创建和定位其他部件。Container 可以用于设置部件的大小、边距、边框、背景颜色等属性，同时还可以对子部件进行对齐、填充和变换等操作。

如果你需要一个视图，有一个背景颜色、图像、有固定的尺寸、需要一个边框、圆角等效果，那么就可以使用 Container 组件。

一、Container 的基本属性

下面我们来看一下 Container 有哪些属性：

Container({
  this.alignment, // 对齐方式
  this.padding, // 内边距
  Color color, // 背景颜色
  Decoration decoration, // 背景装饰，如边框、圆角、阴影等
  Decoration foregroundDecoration, // 前景装饰
  double width,// 容器的宽度
  double height, // 容器的高度
  BoxConstraints constraints, // 容器大小的限制条件
  this.margin,// 外边距
  this.transform, // 变换
  this.child,
})

大多数属性在介绍其它容器时都已经介绍过了，不再赘述，但有两点需要说明：

容器的大小可以通过width、height属性来指定，也可以通过constraints来指定，如果同时存在时，width、height优先。实际上Container内部会根据width、height来生成一个constraints；
color和decoration是互斥的，实际上，当指定color时，Container内会自动创建一个decoration；

二、Container 的对齐方式

通过 alignment 属性，你可以指定 Container 内部子部件的对齐方式。以下是一些常见的对齐方式：

Alignment.topLeft // 将子部件对齐到 Container 的左上角
Alignment.center // 将子部件居中对齐到 Container
Alignment.bottomRight // 将子部件对齐到 Container 的右下角

你还可以通过 Alignment 类的其他静态属性来实现更多的对齐方式。

三、Container 的边距和填充

通过 padding 属性，你可以设置 Container 的内边距，从而控制子部件与 Container 之间的间距。而 margin 属性则用于设置 Container 的外边距，控制 Container 与其它部件之间的间距。这些属性可以接受 EdgeInsets 类的实例，方便你灵活地调整边距和填充。

四、Container 的装饰和样式

Container 的 decoration 属性可以让你为 Container 添加装饰，如边框、圆角和阴影等效果。你可以使用 BoxDecoration 类的实例来定义 Container 的装饰效果。通过 color 属性，你还可以为 Container 设置背景颜色。

五、Container 的大小调整

通过 width 和 height 属性，你可以直接设置 Container 的宽度和高度。你可以指定一个具体的数值，也可以使用 double.infinity 来让 Container 的大小自适应父部件或屏幕。

六、Container 的代码示例

让我们通过多个代码示例来了解如何使用 Container：

6.1 示例 1：基本用法

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Container Demo'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            margin: const EdgeInsets.all(20),
            padding: const EdgeInsets.all(10),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(10),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  spreadRadius: 2,
                  blurRadius: 5,
                ),
              ],
            ),
            child: const Text(
              'Hello, Flutter!',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

效果图如下所示：

在上述代码示例中，我们创建了一个具有自定义样式和布局的 Container 部件。Container 的宽度和高度分别为 200，外边距和内边距都设置为 20 和 10，子部件居中对齐。Container 的背景颜色为蓝色，设置了圆角和阴影效果。最后，Container 中包含了一个文本部件，显示了"Hello, Flutter!"的文本内容。

6.2 示例 2：动态宽度和高度

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Container 示例'),
        ),
        body: Builder(
          builder: (context) {
            return Center(
              child: Container(
                width: MediaQuery.of(context).size.width * 0.8,
                height: 100,
                color: Colors.yellow,
                child: const Text(
                  '动态大小的容器',
                  style: TextStyle(fontSize: 20, color: Colors.black),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

效果图如下所示：

在上述代码示例中，我们使用 MediaQuery 来获取屏幕的宽度，并将 Container 的宽度设置为屏幕宽度的 80%。高度为 100，背景颜色为黄色。在 Container 中包含了一个文本部件，显示了"Dynamic Size Container"的文本内容。

6.3 示例 3：实现圆角图像

可以通过 Container+BoxDecoration来实现圆角图像。

实现代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Container 示例'),
        ),
        body: Builder(
          builder: (context) {
            return Center(
              child: Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    image: const DecorationImage(
                      image: NetworkImage(
                          "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
                    )),
              ),
            );
          },
        ),
      ),
    );
  }
}

效果图如下所示：

七、注意事项

在使用 Container 部件时，有一些注意事项需要考虑：

Container 的大小和位置是由其父部件和布局约束决定的。因此，在使用 Container 时，需要确保它能够适应父部件的大小和布局要求。
当 Container 的大小属性与装饰属性冲突时，装饰属性会优先生效。例如，如果设置了装饰的边框宽度为 5 像素，同时指定了 Container 的宽度为 100 像素，那么边框的宽度仍然会是 5 像素，而不是 100 像素。