Flutter 入门指北(Part 4)：探索 Container 部件的奥秘

一、容器部件（Container）

容器部件（Container）是 Flutter 中最基础的布局部件之一，它可以容纳其他部件并控制它们的布局和样式。Container 部件的属性非常丰富，可以设置颜色、边框、圆角、阴影等多种样式。

在使用 Container 部件时，您可以通过其 child 属性来指定要容纳的子部件。Container 部件可以容纳任意数量的子部件，并且这些子部件可以是其他容器部件、文本部件、按钮部件等。

二、Expanded 小部件

Expanded 小部件是 Flutter 中的一个非常有用的布局部件，它可以帮助您调整子元素的大小比例。Expanded 小部件的 flex 属性决定了子元素在父容器中所占的比例，flex 值越大，子元素所占的比例就越大。

例如，以下代码将创建一个水平排列的 Container 部件，其中包含两个子部件：一个文本部件和一个按钮部件。文本部件的 flex 值为 1，按钮部件的 flex 值为 2。这意味着按钮部件将占用文本部件两倍的空间。

Container(
  child: Row(
    children: [
      Expanded(
        flex: 1,
        child: Text('文本部件'),
      ),
      Expanded(
        flex: 2,
        child: Button('按钮部件'),
      ),
    ],
  ),
)

三、实例演示

现在，让我们通过一个实例来演示如何使用 Container 部件和 Expanded 小部件。我们将创建一个简单的登录表单，其中包含一个文本输入框和一个按钮。

首先，我们在 pubspec.yaml 文件中添加对 flutter_form_builder 包的依赖：

dependencies:
  flutter_form_builder: ^7.0.0

然后，我们在 main.dart 文件中导入 flutter_form_builder 包：

import 'package:flutter_form_builder/flutter_form_builder.dart';

接下来，我们编写一个名为 LoginForm 的类，该类继承自 StatefulWidget。在 LoginForm 类的 build 方法中，我们使用 Container 部件和 Expanded 小部件来构建登录表单。

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: FormBuilder(
        key: _formKey,
        child: Column(
          children: [
            Expanded(
              flex: 1,
              child: FormBuilderTextField(
                name: 'username',
                decoration: InputDecoration(
                  labelText: '用户名',
                ),
              ),
            ),
            SizedBox(height: 20),
            Expanded(
              flex: 1,
              child: FormBuilderTextField(
                name: 'password',
                decoration: InputDecoration(
                  labelText: '密码',
                ),
              ),
            ),
            SizedBox(height: 20),
            Expanded(
              flex: 1,
              child: FormBuilderElevatedButton(
                onPressed: () {},
                child: Text('登录'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

最后，我们在 MaterialApp 的 home 属性中指定 LoginForm 类，以便在应用程序启动时显示登录表单。

return MaterialApp(
  home: LoginForm(),
);

通过上面的代码，我们创建了一个简单的登录表单。该表单包含一个文本输入框和一个按钮，文本输入框用于输入用户名和密码，按钮用于提交登录表单。

四、总结

在本文中，我们介绍了 Container 部件和 Expanded 小部件的使用方法。Container 部件可以容纳其他部件并控制它们的布局和样式，而 Expanded 小部件可以帮助您调整子元素的大小比例。通过掌握这些知识，您将能够创建出更具吸引力和用户友好的 Flutter 应用程序。