Flutter框架跨平台鸿蒙开发——Container组件基础使用

Container是Flutter中最常用的布局容器组件之一，它提供了丰富的属性来控制子组件的布局、装饰和变换。Container就像一个多功能容器，可以添加边距、填充、边框、圆角、阴影等效果。

鸣弦artha

397人浏览 · 2026-01-22 21:39:00

鸣弦artha · 2026-01-22 21:39:00 发布

一、Container组件简介

Container组件的重要性

Container在实际开发中应用极为广泛，从简单的背景色设置到复杂的多层装饰，都能通过Container轻松实现。

二、Container属性详解

核心属性对比

属性名	类型	默认值	说明	使用场景
padding	EdgeInsetsGeometry	null	内边距	子元素与容器边缘的间距
margin	EdgeInsetsGeometry	null	外边距	容器与外部元素的间距
color	Color	null	背景颜色	简单的背景色
decoration	BoxDecoration	null	装饰效果	复杂的装饰（边框、渐变等）
width	double	null	宽度	指定容器宽度
height	double	null	高度	指定容器高度
constraints	BoxConstraints	null	尺寸约束	限制容器的最小/最大尺寸
alignment	AlignmentGeometry	null	对齐方式	子元素在容器中的对齐
transform	Matrix4	null	变换矩阵	旋转、缩放等变换

color与decoration互斥

需要注意的是，color和decoration属性不能同时使用：

// ✅ 正确 - 使用color
Container(
  color: Colors.blue,
  child: Text('背景色'),
)

// ✅ 正确 - 使用decoration
Container(
  decoration: BoxDecoration(
    color: Colors.blue,
  ),
  child: Text('装饰背景'),
)

// ❌ 错误 - 同时使用
Container(
  color: Colors.blue,
  decoration: BoxDecoration(...), // 错误
  child: Text('错误示例'),
)

三、基础用法

最简单的Container

Container(
  color: Colors.blue,
  child: Text('这是一个Container'),
)

指定宽高

Container(
  width: 200,
  height: 100,
  color: Colors.green,
  child: Center(child: Text('200x100')),
)

内边距和外边距

Container(
  margin: EdgeInsets.all(16),
  padding: EdgeInsets.all(24),
  color: Colors.orange,
  child: Text('外边距16，内边距24'),
)

四、装饰效果

圆角边框

使用BoxDecoration创建复杂的装饰效果：

Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.blue.shade100,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(
      color: Colors.blue,
      width: 2,
    ),
  ),
  child: Text('圆角边框'),
)

渐变背景

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
  child: Center(
    child: Text('渐变背景', style: TextStyle(color: Colors.white)),
  ),
)

阴影效果

Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 8,
        offset: Offset(0, 4),
      ),
    ],
  ),
  child: Text('带阴影的容器'),
)

五、尺寸约束

使用constraints

Container(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 300,
    minHeight: 50,
    maxHeight: 150,
  ),
  color: Colors.teal,
  child: Text('尺寸约束'),
)

尺寸约束示例

约束类型	效果	使用场景
minWidth	最小宽度	确保内容不被压缩
maxWidth	最大宽度	限制内容扩展
minHeight	最小高度	确保可点击区域
maxHeight	最大高度	限制内容溢出

六、对齐方式

alignment属性

使用alignment控制子元素在容器中的位置：

Container(
  width: 200,
  height: 100,
  color: Colors.purple.shade100,
  alignment: Alignment.center,
  child: Text('居中对齐'),
)

七、变换效果

transform属性

使用transform实现旋转、缩放等变换：

Container(
  width: 100,
  height: 100,
  color: Colors.red,
  transform: Matrix4.rotationZ(0.5), // 旋转30度
  child: Center(child: Text('旋转')),
)

缩放变换

Container(
  width: 100,
  height: 100,
  color: Colors.green,
  transform: Matrix4.diagonal3(1.5, 1.5, 1), // 放大1.5倍
  child: Center(child: Text('缩放')),
)

八、完整示例

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Container组件基础')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          // 基础Container
          const Text(
            '基础Container',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 12),
          Container(
            padding: const EdgeInsets.all(16),
            color: Colors.blue.shade100,
            child: const Text('最简单的Container示例'),
          ),
          const SizedBox(height: 24),

          // 指定尺寸
          const Text(
            '指定尺寸',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 12),
          Row(
            children: [
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
                child: const Center(child: Text('100x100')),
              ),
              const SizedBox(width: 16),
              Container(
                width: 150,
                height: 80,
                color: Colors.green,
                child: const Center(child: Text('150x80')),
              ),
            ],
          ),
          const SizedBox(height: 24),

          // 边距设置
          const Text(
            '边距设置',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 12),
          Container(
            margin: const EdgeInsets.all(16),
            padding: const EdgeInsets.all(24),
            color: Colors.orange.shade100,
            child: const Text('外边距16，内边距24'),
          ),
          const SizedBox(height: 24),

          // 圆角边框
          const Text(
            '圆角边框',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 12),
          Row(
            children: [
              Expanded(
                child: Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.blue.shade100,
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.blue, width: 2),
                  ),
                  child: const Center(child: Text('圆角8')),
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.purple.shade100,
                    borderRadius: BorderRadius.circular(16),
                    border: Border.all(color: Colors.purple, width: 2),
                  ),
                  child: const Center(child: Text('圆角16')),
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.pink.shade100,
                    borderRadius: BorderRadius.circular(24),
                    border: Border.all(color: Colors.pink, width: 2),
                  ),
                  child: const Center(child: Text('圆角24')),
                ),
              ),
            ],
          ),
          const SizedBox(height: 24),

          // 渐变背景
          const Text(
            '渐变背景',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 12),
          Container(
            height: 100,
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.blue, Colors.purple],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
            ),
            child: const Center(
              child: Text('渐变背景', style: TextStyle(color: Colors.white)),
            ),
          ),
          const SizedBox(height: 24),

          // 阴影效果
          const Text(
            '阴影效果',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 12),
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.1),
                      blurRadius: 4,
                      offset: const Offset(0, 2),
                    ),
                  ],
                ),
                child: const Center(child: Text('阴影小')),
              ),
              const SizedBox(width: 12),
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      blurRadius: 8,
                      offset: const Offset(0, 4),
                    ),
                  ],
                ),
                child: const Center(child: Text('阴影中')),
              ),
              const SizedBox(width: 12),
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.3),
                      blurRadius: 12,
                      offset: const Offset(0, 6),
                    ),
                  ],
                ),
                child: const Center(child: Text('阴影大')),
              ),
            ],
          ),
          const SizedBox(height: 24),

          // 对齐方式
          const Text(
            '对齐方式',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 12),
          Wrap(
            spacing: 12,
            runSpacing: 12,
            children: [
              _buildAlignmentBox(Alignment.topLeft, '左上'),
              _buildAlignmentBox(Alignment.topCenter, '上中'),
              _buildAlignmentBox(Alignment.topRight, '右上'),
              _buildAlignmentBox(Alignment.centerLeft, '左中'),
              _buildAlignmentBox(Alignment.center, '居中'),
              _buildAlignmentBox(Alignment.centerRight, '右中'),
              _buildAlignmentBox(Alignment.bottomLeft, '左下'),
              _buildAlignmentBox(Alignment.bottomCenter, '下中'),
              _buildAlignmentBox(Alignment.bottomRight, '右下'),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildAlignmentBox(Alignment alignment, String label) {
    return Container(
      width: 80,
      height: 80,
      decoration: BoxDecoration(
        color: Colors.teal.shade100,
        border: Border.all(color: Colors.teal),
      ),
      alignment: alignment,
      child: Text(label),
    );
  }
}

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

演化的史诗：鸿蒙APP基于 Flutter 的 EVO-CHRONOS 全景生命进化系统开发实录

人工智能6S服务平台

Flutter框架跨平台鸿蒙开发——购物满减计算器开发流程

本文介绍了使用Flutter框架开发跨平台鸿蒙购物满减计算器的完整流程。该应用支持满减、折扣和自定义规则三种优惠模式，具备智能计算最优优惠方案的功能。文章详细讲解了项目结构设计、技术栈选择（Flutter 3.10+、Dart 3.0+、HarmonyOS 3.0+）、核心计算逻辑实现（包括满减计算、折扣计算和自定义规则解析）以及UI界面设计要点。通过该教程，开发者可以掌握Flutter在鸿蒙系统