Flutter 中 Container

在Flutter中，Container是一个常用的布局控件，用于创建一个矩形容器，可以用来包裹其他组件，并对这些组件进行样式、边距、填充等方面的设置。

以下是一个简单的示例代码，演示如何在Flutter应用中使用Container控件：

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('Container Example'),
        ),
        body: Center(
          child: Container(
            // 设置容器的宽度和高度
            width: 200,
            height: 200,
            // 设置容器的颜色
            color: Colors.blue,
            // 设置容器的边框
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.black,
                width: 2,
              ),
            ),
            // 设置容器的内边距
            padding: EdgeInsets.all(20),
            // 设置容器的子组件
            child: Text(
              'Hello, Container!',
              style: TextStyle(
                fontSize: 20,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，包含一个带有标题的AppBar和一个居中显示的Container控件。Container的属性被设置如下：

• width和height：设置容器的宽度和高度为200。
• color：设置容器的背景色为蓝色。
• decoration：使用BoxDecoration对象设置容器的边框，边框宽度为2，颜色为黑色。
• padding：设置容器的内边距为20。
• child：将一个文本组件作为容器的子组件，并设置文本样式。

除了示例中提到的属性之外，Container还有许多其他属性，例如alignment用于设置子组件的对齐方式，margin用于设置容器的外边距，constraints用于设置容器的约束条件等。Container非常灵活，可以用于创建各种复杂的布局效果。