Flutter 初识：布局控件

Flutter 提供了丰富的布局控件，用于构建复杂而灵活的用户界面。为了更好地理解和使用这些控件，我们可以将它们按照功能和用途进行分类。以下是详细的分类及其对应的控件介绍。

Container

Container 是 Flutter 中一个常用的控件，用于创建具有指定属性的小部件。

属性解析

Container({
    super.key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• alignment: 控制子控件在容器中的对齐方式。例如，可以将子控件放置在容器的中心、顶部、底部等。
• padding: 容器内边距，即内容与容器边界之间的空白区域。可以使用 EdgeInsets 来设置具体的边距值。
• color: 容器的背景颜色。如果同时设置了 decoration 属性，且 decoration 中也包含了颜色，color 会被忽略。
• decoration: 容器的装饰，例如背景色、边框、阴影等。BoxDecoration 是一个常见的实现类。
• foregroundDecoration: 前景装饰，与 decoration 类似，但会绘制在子控件的前面。
• width: 容器的宽度，类型为 double?，即可选的双精度浮点数。
• height: 容器的高度，类型同样为 double。
• constraints: 盒子约束条件，例如最大宽度、最小宽度、最大高度、最小高度等。可以使用 BoxConstraints 来设置具体的约束条件。
• margin: 容器外边距，即容器与外部元素之间的空白区域。同样可以使用 EdgeInsets 来设置具体的边距值。
• transform: 应用到容器上的变换矩阵，例如旋转、缩放、平移等。可以使用 Matrix4 来设置具体的变换。
• transformAlignment: 变换的对齐方式，即变换操作相对于哪个点进行。例如，可以以容器的中心点作为变换的基准点。
• child: 容器内部的子控件，可以是任意类型的小部件。
• clipBehavior: 定义如何剪裁容器的内容。默认值为 Clip.none，不进行剪裁。可以选择其他值如 Clip.hardEdge、Clip.antiAlias、Clip.antiAliasWithSaveLayer 等。

示例

class ContainerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container Example')),
      body: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(20.0),
        // color: Colors.blueAccent,
        width: 300.0,
        height: 300.0,
        constraints: BoxConstraints(
          maxWidth: 350.0,
          maxHeight: 350.0,
        ),
        margin: EdgeInsets.all(10.0),
        transform: Matrix4.rotationZ(0.1),
        transformAlignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(15.0),
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              offset: Offset(4, 4),
              blurRadius: 10.0,
            ),
          ],
        ),
        foregroundDecoration: BoxDecoration(
          border: Border.all(color: Colors.white, width: 3.0),
        ),
        clipBehavior: Clip.hardEdge,
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(color: Colors.white, fontSize: 24.0),
        ),
      ),
    );
  }
}

备注Container的Color不能和decoration的Color同时配置，否则报错，只需配置一个即可。
 
 

SizedBox

SizedBox 是 Flutter 中的一个常用控件，用于创建固定尺寸的空白区域或限制子控件的尺寸

属性解析

const SizedBox({
  super.key,
  this.width,
  this.height,
  super.child,
})

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• width: 设置 SizedBox 的宽度，类型为 double?，表示可以为空。如果未设置，默认为无限制宽度。
• height: 设置 SizedBox 的高度，类型为 double?，表示可以为空。如果未设置，默认为无限制高度。
• child: SizedBox 内部的子控件，可以是任意类型的小部件。如果未设置，SizedBox 将展示一个固定尺寸的空白区域。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container Example')),
      body: SizedBox(
        width: 200.0,
        height: 50.0,
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Button with SizedBox'),
        ),
      ),
    );
  }
}

 
 

Padding

Padding 是 Flutter 中的一个常用控件，用于在其子控件周围添加内边距（padding）

属性解析

const Padding({
    super.key,
    required this.padding,
    super.child,
  })

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• padding: 内边距（padding），类型为 EdgeInsets，用于指定子控件相对于容器边界的距离。这个参数是必填项。
• child: Padding 内部的子控件，可以是任意类型的小部件。如果未设置，则仅显示内边距。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Padding Example')),
      body: Padding(
        padding: EdgeInsets.all(20.0), // 设置四个方向的内边距均为 20 像素
        child: Container(
          color: Colors.blue,
          child: Text(
            'Hello, Padding!',
            style: TextStyle(color: Colors.white, fontSize: 24.0),
          ),
        ),
      ),
    );
  }
}

 
 

Center

Center 是 Flutter 中的一个常用控件，用于将其子控件放置在父容器的中心

属性解析

const Center({
  super.key,
  this.widthFactor,
  this.heightFactor,
  super.child,
})

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• widthFactor: 一个可选的倍数，用于设置子控件相对于父容器宽度的比例。如果未设置，则宽度将自适应子控件。
• heightFactor: 一个可选的倍数，用于设置子控件相对于父容器高度的比例。如果未设置，则高度将自适应子控件。
• child: Center 内部的子控件，可以是任意类型的小部件。如果未设置，则 Center 将只生成一个空白区域。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Center Example')),
      body: Center(
        widthFactor: 2.0,
        heightFactor: 2.0,
        child: Container(
          color: Colors.green,
          width: 50.0,
          height: 50.0,
          child: Center(
            child: Text(
              'Scaled Center!',
              style: TextStyle(color: Colors.white, fontSize: 12.0),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

 
 

Align

Align 是 Flutter 中的一个常用控件，用于将其子控件对齐到指定的位置。

属性解析

  const Align({
    super.key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    super.child,
  })

• key: 用于标识小部件的唯一标识符，主要用于在更新树中保持状态的一致性。
• alignment: 一个 Alignment 对象，指定子控件在父容器中的对齐方式。默认值为 Alignment.center，即居中对齐。其他常见的对齐方式有 Alignment.topLeft、Alignment.topRight、Alignment.bottomLeft、Alignment.bottomRight 等。
• widthFactor: 一个可选的倍数，用于设置子控件相对于父容器宽度的比例。如果未设置，则宽度将自适应子控件。
• heightFactor: 一个可选的倍数，用于设置子控件相对于父容器高度的比例。如果未设置，则高度将自适应子控件。
• child: Align 内部的子控件，可以是任意类型的小部件。如果未设置，则 Align 仅提供对齐功能。

示例

class WidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Align Example')),
      // 右下角对齐，带宽高比例因子
      body: Container(
        color: Colors.red[50],
        width: 200.0,
        height: 200