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

一起养小猫2026-01-28 8:16

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

文章目录

  • [Flutter for OpenHarmony 实战：Container与Padding布局完全指南](#Flutter for OpenHarmony 实战：Container与Padding布局完全指南)
    • 摘要
    • 前言
    • 一、Container容器
      • [1.1 基础用法](#1.1 基础用法)
      • [1.2 内边距padding](#1.2 内边距padding)
      • [1.3 外边距margin](#1.3 外边距margin)
      • [1.4 装饰decoration](#1.4 装饰decoration)
      • [1.5 对齐与约束](#1.5 对齐与约束)
      • [1.6 变换transform](#1.6 变换transform)
    • 二、Padding内边距
      • [2.1 Padding Widget](#2.1 Padding Widget)
      • [2.2 vs Container padding](#2.2 vs Container padding)
    • 三、Margin外边距
      • [3.1 使用Margin](#3.1 使用Margin)
      • [3.2 使用SizedBox间距](#3.2 使用SizedBox间距)
    • 四、实际应用案例
      • [4.1 卡片组件](#4.1 卡片组件)
      • [4.2 徽章组件](#4.2 徽章组件)
      • [4.3 渐变按钮](#4.3 渐变按钮)
    • 总结

摘要

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

前言

刚开始学Flutter，几乎每个Widget都用Container包一层。后来才发现，Container很强大，但不能滥用。

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

一、Container容器

1.1 基础用法

dart 复制代码 
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

dart 复制代码 
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

dart 复制代码 
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

dart 复制代码 
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 对齐与约束

dart 复制代码 
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

dart 复制代码 
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

dart 复制代码 
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

dart 复制代码 
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

dart 复制代码 
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间距

dart 复制代码 
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 卡片组件

dart 复制代码 
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 徽章组件

dart 复制代码 
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 渐变按钮

dart 复制代码 
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布局的基础。

核心要点：

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

最佳实践：

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

布局要简洁高效。

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

相关推荐
zilikew2 小时前
Flutter框架跨平台鸿蒙开发——手工制作教程APP的开发流程
flutter·华为·harmonyos·鸿蒙
晚霞的不甘2 小时前
Flutter for OpenHarmony《淘淘购物》 分类页：从静态 UI 到动态交互的全面升级
flutter·ui·前端框架·交互·鸿蒙
HeDongDong-2 小时前
详解Kotlin的各种类（使用场景导向）
android·开发语言·kotlin
kirk_wang2 小时前
Flutter艺术探索-Flutter列表性能优化：ListView.builder与itemExtent
flutter·移动开发·flutter教程·移动开发教程
Xxtaoaooo2 小时前
React Native 跨平台鸿蒙开发实战：与鸿蒙原子化服务（Atomic Service）融合
react native·react.js·harmonyos
Whisper_Sy10 小时前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 网络状态实现
android·java·开发语言·javascript·网络·flutter·php
ujainu11 小时前
Flutter + OpenHarmony 网格布局：GridView 与 SliverGrid 在鸿蒙设备内容展示中的应用
android·flutter·组件
龙之叶12 小时前
【Android Monkey源码解析五】- 异常处理
android·数据库
明道源码12 小时前
Android Studio AVD 模拟器的使用与配置
android·android studio
热门推荐
01GitHub 镜像站点02【网络安全测试】Burp Suite工具使用说明、配置及常见问题（有关必回）03OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)04Claude Code Skills 实用使用手册05UV安装并设置国内源06struts2 XML外部实体注入漏洞复现（CVE-2025-68493）07Open Code教程（四）| 高级配置与集成08在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）09AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南10Linux下V2Ray安装配置指南