Flutter for OpenHarmony 实战：Container与Padding布局完全指南

一起养小猫

565人浏览 · 2026-01-27 23:35:45

一起养小猫 · 2026-01-27 23:35:45 发布

Flutter for OpenHarmony 实战：Container与Padding布局完全指南

摘要

Container是最常用的布局Widget，提供了装饰、内边距、外边距等功能。Padding专门用于设置内边距。掌握Container和Padding的使用是Flutter布局的基础。这篇文章我想深入讲解Container和Padding的使用方法。

前言

欢迎加入开源鸿蒙跨平台社区：开源鸿蒙跨平台开发者社区
刚开始学Flutter，几乎每个Widget都用Container包一层。后来才发现，Container很强大，但不能滥用。

Padding也是如此，很多时候直接用padding参数就够了。这篇文章我想分享Container和Padding的使用经验。

在这里插入图片描述

一、Container容器

在这里插入图片描述

1.1 基础用法

class BasicContainer extends StatelessWidget {
  const BasicContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
        child: Center(
          child: Text(
            '200 x 200',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

1.2 内边距padding

在这里插入图片描述

class ContainerPadding extends StatelessWidget {
  const ContainerPadding({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 所有边相同
        Container(
          padding: EdgeInsets.all(20),
          color: Colors.blue,
          child: Text('内边距20'),
        ),

        // 分别设置
        Container(
          padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
          color: Colors.green,
          child: Text('不对称内边距'),
        ),

        // 只设置水平
        Container(
          padding: EdgeInsets.symmetric(horizontal: 30),
          color: Colors.orange,
          child: Text('水平内边距30'),
        ),

        // 只设置垂直
        Container(
          padding: EdgeInsets.symmetric(vertical: 20),
          color: Colors.purple,
          child: Text('垂直内边距20'),
        ),
      ],
    );
  }
}

1.3 外边距margin

在这里插入图片描述

class ContainerMargin extends StatelessWidget {
  const ContainerMargin({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey,
      child: Column(
        children: [
          // 所有边相同
          Container(
            margin: EdgeInsets.all(20),
            color: Colors.blue,
            height: 50,
          ),

          // 分别设置
          Container(
            margin: EdgeInsets.fromLTRB(10, 20, 10, 20),
            color: Colors.green,
            height: 50,
          ),

          // 只设置水平
          Container(
            margin: EdgeInsets.symmetric(horizontal: 30),
            color: Colors.orange,
            height: 50,
          ),
        ],
      ),
    );
  }
}

1.4 装饰decoration

在这里插入图片描述

class ContainerDecoration extends StatelessWidget {
  const ContainerDecoration({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 颜色装饰
        Container(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('颜色'),
        ),

        // 渐变装饰
        Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.blue, Colors.purple],
            ),
          ),
          child: Text('渐变'),
        ),

        // 圆角
        Container(
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Text('圆角'),
        ),

        // 边框
        Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.red,
              width: 2,
            ),
            borderRadius: BorderRadius.circular(10),
          ),
          child: Text('边框'),
        ),

        // 阴影
        Container(
          decoration: BoxDecoration(
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.3),
                blurRadius: 10,
                spreadRadius: 5,
              ),
            ],
          ),
          child: Text('阴影'),
        ),

        // 组合装饰
        Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.purple, Colors.pink],
            ),
            borderRadius: BorderRadius.circular(15),
            boxShadow: [
              BoxShadow(
                color: Colors.purple.withOpacity(0.5),
                blurRadius: 10,
                offset: Offset(0, 5),
              ),
            ],
          ),
          padding: EdgeInsets.all(20),
          child: Text('组合装饰', style: TextStyle(color: Colors.white)),
        ),
      ],
    );
  }
}

1.5 对齐与约束

在这里插入图片描述

class ContainerAlignment extends StatelessWidget {
  const ContainerAlignment({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 居中对齐
        Container(
          height: 100,
          color: Colors.grey.shade200,
          alignment: Alignment.center,
          child: Text('居中'),
        ),

        // 右上角
        Container(
          height: 100,
          color: Colors.grey.shade200,
          alignment: Alignment.topRight,
          child: Text('右上'),
        ),

        // 自定义位置
        Container(
          height: 100,
          color: Colors.grey.shade200,
          alignment: Alignment(0.5, -0.5),
          child: Text('自定义'),
        ),

        // 宽度约束
        Container(
          constraints: BoxConstraints(
            minWidth: 100,
            maxWidth: 200,
            minHeight: 50,
            maxHeight: 100,
          ),
          color: Colors.blue,
          child: Text('约束'),
        ),
      ],
    );
  }
}

1.6 变换transform

在这里插入图片描述

class ContainerTransform extends StatelessWidget {
  const ContainerTransform({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 旋转
        Container(
          transform: Matrix4.rotationZ(0.3),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(10),
          ),
          padding: EdgeInsets.all(20),
          child: Text('旋转'),
        ),

        // 缩放
        Container(
          transform: Matrix4.identity()..scale(1.5),
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(10),
          ),
          padding: EdgeInsets.all(20),
          child: Text('缩放'),
        ),

        // 平移
        Container(
          transform: Matrix4.translationValues(20, 20, 0),
          decoration: BoxDecoration(
            color: Colors.orange,
            borderRadius: BorderRadius.circular(10),
          ),
          padding: EdgeInsets.all(20),
          child: Text('平移'),
        ),
      ],
    );
  }
}

二、Padding内边距

在这里插入图片描述

2.1 Padding Widget

class PaddingWidget extends StatelessWidget {
  const PaddingWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20),
      child: Container(
        color: Colors.blue,
        child: Text('被Padding包裹'),
      ),
    );
  }
}

2.2 vs Container padding

class PaddingComparison extends StatelessWidget {
  const PaddingComparison({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Container的padding
        Container(
          padding: EdgeInsets.all(20),
          color: Colors.blue,
          child: Text('Container padding'),
        ),

        // Padding Widget
        Padding(
          padding: EdgeInsets.all(20),
          child: Container(
            color: Colors.green,
            child: Text('Padding Widget'),
          ),
        ),
      ],
    );
  }
}

三、Margin外边距

在这里插入图片描述

3.1 使用Margin

class MarginWidget extends StatelessWidget {
  const MarginWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          margin: EdgeInsets.only(bottom: 20),
          color: Colors.blue,
          height: 50,
        ),
        Container(
          margin: EdgeInsets.symmetric(vertical: 10),
          color: Colors.green,
          height: 50,
        ),
      ],
    );
  }
}

3.2 使用SizedBox间距

class SpacingWithSizedBox extends StatelessWidget {
  const SpacingWithSizedBox({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(color: Colors.blue, height: 50),
        SizedBox(height: 20), // 垂直间距
        Container(color: Colors.green, height: 50),
        SizedBox(height: 20),
        Container(color: Colors.orange, height: 50),
      ],
    );
  }
}

四、实际应用案例

在这里插入图片描述

4.1 卡片组件

class CardContainer extends StatelessWidget {
  const CardContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10,
            offset: Offset(0, 4),
          ),
        ],
      ),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '卡片标题',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 8),
            Text('卡片内容'),
          ],
        ),
      ),
    );
  }
}

4.2 徽章组件

class BadgeContainer extends StatelessWidget {
  final String label;
  final Widget child;
  final Color color;

  const BadgeContainer({
    super.key,
    required this.label,
    required this.child,
    this.color = Colors.red,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        Positioned(
          right: 0,
          top: 0,
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 6, vertical: 2),
            decoration: BoxDecoration(
              color: color,
              borderRadius: BorderRadius.circular(10),
            ),
            constraints: BoxConstraints(
              minWidth: 16,
              minHeight: 16,
            ),
            child: Text(
              label,
              style: TextStyle(
                color: Colors.white,
                fontSize: 10,
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ],
    );
  }
}

4.3 渐变按钮

class GradientButton extends StatelessWidget {
  final String label;
  final VoidCallback? onPressed;

  const GradientButton({
    super.key,
    required this.label,
    this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.blue, Colors.purple],
          ),
          borderRadius: BorderRadius.circular(25),
          boxShadow: [
            BoxShadow(
              color: Colors.blue.withOpacity(0.3),
              blurRadius: 10,
              offset: Offset(0, 5),
            ),
          ],
        ),
        child: Text(
          label,
          style: TextStyle(
            color: Colors.white,
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

总结

Container和Padding是Flutter布局的基础。

核心要点：

Container提供装饰、padding、margin等功能
不能同时使用color和decoration
Padding专门用于设置内边距
SizedBox可以创建间距
合理使用避免过度嵌套

最佳实践：

只需要padding用Padding Widget
需要装饰用Container
间距优先用SizedBox
避免无用的Container嵌套
使用const优化性能

布局要简洁高效。

欢迎加入开源鸿蒙跨平台社区：开源鸿蒙跨平台开发者社区

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

空间智能技术格局：人工智能+时代 Pixel-to-Space 路线的战略突破

随着人工智能进入的新阶段，空间智能（Spatial Intelligence）正在成为继大模型之后的下一代技术基础设施。传统人工智能主要处理文本、语音和图像，而空间智能则让 AI 能够理解。：以 Omniverse 为核心的数字孪生与物理AI平台：以自动驾驶为核心的视频世界模型体系：以世界模型与智能体为核心的认知体系：以AR/地图/视觉定位为核心的空间计算体系与此同时，中国企业这一技术路线通过，实