Flutter Container 组件详解

简介

Container 是 Flutter 中一个功能丰富的布局组件,它可以用来设置子组件的大小、边距、装饰等。Container 可以看作是多个基础组件的组合,包括 Padding、Margin、Decoration 等。

基本用法

Container(
  width: 200,
  height: 200,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        offset: Offset(0, 2),
        blurRadius: 6.0,
      ),
    ],
  ),
  child: Text(
    'Hello Flutter',
    style: TextStyle(color: Colors.white),
  ),
)

常用属性

alignment

子组件的对齐方式:

• Alignment.center
• Alignment.topLeft
• Alignment.bottomRight 等

padding/margin

内外边距设置:

padding: EdgeInsets.symmetric(
  horizontal: 16.0,
  vertical: 8.0,
),
margin: EdgeInsets.only(
  left: 10.0,
  top: 10.0,
),

decoration

容器装饰:

decoration: BoxDecoration(
  color: Colors.white,
  borderRadius: BorderRadius.circular(8.0),
  border: Border.all(
    color: Colors.grey,
    width: 1.0,
  ),
  boxShadow: [
    BoxShadow(
      color: Colors.black12,
      offset: Offset(0, 2),
      blurRadius: 4.0,
    ),
  ],
)

constraints

尺寸约束:

constraints: BoxConstraints(
  minWidth: 100,
  maxWidth: 300,
  minHeight: 50,
  maxHeight: 150,
)

使用场景

1. 创建卡片布局
2. 设置组件边距
3. 添加边框和阴影
4. 实现渐变背景

完整示例

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Container Demo'),
      ),
      body: Center(
        child: Container(
          width: 300,
          padding: EdgeInsets.all(16.0),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Colors.blue,
                Colors.purple,
              ],
            ),
            borderRadius: BorderRadius.circular(12.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                offset: Offset(0, 4),
                blurRadius: 10.0,
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  CircleAvatar(
                    radius: 30,
                    backgroundImage: NetworkImage(
                      'https://picsum.photos/200',
                    ),
                  ),
                  SizedBox(width: 16),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'John Doe',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Text(
                        'Software Developer',
                        style: TextStyle(
                          color: Colors.white70,
                          fontSize: 14,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              SizedBox(height: 16),
              Text(
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
              SizedBox(height: 16),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton.icon(
                    icon: Icon(Icons.thumb_up, color: Colors.white),
                    label: Text(
                      'Like',
                      style: TextStyle(color: Colors.white),
                    ),
                    onPressed: () {},
                  ),
                  SizedBox(width: 8),
                  TextButton.icon(
                    icon: Icon(Icons.share, color: Colors.white),
                    label: Text(
                      'Share',
                      style: TextStyle(color: Colors.white),
                    ),
                    onPressed: () {},
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

进阶用法

1. 渐变背景

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Colors.blue, Colors.purple],
    ),
  ),
)

2. 响应式容器

LayoutBuilder(
  builder: (context, constraints) {
    return Container(
      width: constraints.maxWidth * 0.8,
      padding: EdgeInsets.all(constraints.maxWidth * 0.05),
      child: Text('Responsive Container'),
    );
  },
)

性能优化建议

1. 避免不必要的 Container 嵌套
2. 使用 const 构造函数
3. 合理使用 constraints
4. 避免过度装饰

注意事项

1. decoration 和 color 属性不能同时使用
2. 注意 constraints 的使用
3. 合理设置 width 和 height
4. 注意性能影响

总结

Container 是一个功能强大的组合组件,通过合理配置可以实现各种布局效果。在使用时需要注意性能优化和约束规则。