Flutter - 布局Widget

Flutter的布局主要分为 单子组件 和 多子组件 两大类：

Container、Padding、Align这些属于单子组件，而Row、Column、ListView这些则是多子组件。 

单子组件

Align组件

Align 是一个用于控制子组件位置的单子布局组件。它通过指定对齐方式（如居中、右上角、底部等）将子组件放置在可用空间内的特定位置，常用于精确控制子组件的布局。在 Android/iOS 中 align 只是一个属性，在 Flutter 中是一个组件。

    /**
     * Align 默认会填满父容器的可用空间，可以通过 widthFactor 和 heightFactor 按比例缩设置。
     */
    Align(
      child: Icon(Icons.people, size: 36, color: Colors.blue),
      /**
       * 对齐方式，默认居中对齐 (子组件在父容器中的对齐位置)
       * 使用 Alignment(x, y) 或 AlignmentDirectional(start, y)（支持 RTL 布局）指定坐标
       */
      alignment: Alignment.topCenter,
      /**
       * 按子组件的尺寸比例控制 Align 自身大小
       * Align 宽度为子组件的 3 倍，高度为子组件的 2 倍
       */
      widthFactor: 3,
      heightFactor: 2
    );

Center组件

Center 是一个专门用于将子组件居中对齐的单子布局组件。Center 继承 Align，它是 Align 组件的简化版本，默认将子组件放置在父容器的中心位置，非常适合快速实现居中布局。

    // Center 不支持设置背景色
    Center(
      child: Icon(Icons.people, size: 36, color: Colors.blue),
      widthFactor: 3,
      heightFactor: 3
    );

Padding 组件

Padding 是一个用于为子组件添加内边距（即子组件与其父容器之间的空白区域）的布局组件。它是控制界面元素间距的核心工具之一，常用于优化视觉效果或避免内容紧贴容器边缘。

Padding 在Android/iOS 也是一个属性，在 Flutter 是一个组件。

    return Padding(
        // 通过 EdgeInsets 设置不同方向的内边距（如上下左右、对称或自定义）
        padding: EdgeInsets.all(16),
        child: Text(
          "我在练习书法，但不是写在纸上，而是用心去感受每一个字的灵魂。这是一种玄学，也是一种艺术。",
          style: TextStyle(color: Colors.teal, fontSize: 18)
        )
    );

Container 组件

Container 是最常用且功能最丰富的布局组件之一，它结合了多个单一功能组件的能力（如装饰、尺寸控制、对齐、边距等），可以快速实现复杂的视觉效果。类似于 Android 的 View，iOS 的 UIView，在开发中使用频率较高。

    /**
     * 注：容器的大小可以通过 width、height属性来指定，也可以通过 constraints 来指定，
     * 如果同时存在时，width、height优先。（Container内部会根据width、height来生成一个 constraints）
     * color和decoration是互斥的，当指定color时，Container内会自动创建一个 decoration.
     */
    return Container(
      color: Colors.blueGrey,
      width: 240,
      height: 120,
      child: Text(
          "我在练习书法，但不是写在纸上，而是用心去感受每一个字的灵魂。这是一种玄学，也是一种艺术。",
          overflow: TextOverflow.ellipsis
      ),
      alignment: Alignment.center,
      padding: EdgeInsets.all(8),
      margin: EdgeInsets.all(20)
    );

BoxDecoration 组件

BoxDecoration 是一个用于定义容器（如 Container、DecoratedBox）视觉样式的类，支持设置背景色、边框、圆角、阴影、渐变等复杂装饰效果。它是构建精美 UI 的核心工具之一。

    return Container(
      width: 150,
      height: 150,
      child: Text("我在练习书法，但不是写在纸上，而是用心去感受每一个字的灵魂。这是一种玄学，也是一种艺术。"),
      margin: EdgeInsets.all(16),
      padding: EdgeInsets.all(12),
      decoration: BoxDecoration(
          // 背景颜色
          // color: Colors.blueGrey,
          // 边框样式（支持单边设置）
          border: Border.all(color: Colors.blue, width: 2),
          // 圆角半径（需与 shape 配合）
          borderRadius: BorderRadius.circular(10),
          // 阴影效果（支持多个叠加）
          boxShadow: [BoxShadow(color: Colors.red, blurRadius: 5)],
          // 渐变背景（与 color 互斥）,只保留一个
          gradient: LinearGradient(colors: [Colors.blueGrey, Colors.grey])),
    );