蓝布编程网

今天开始，学习每一个部件的用法，期待快速学会flutter,好开发软件，

一 代码实现

import 'package:flutter/material.dart';

void main() => runApp(MyApp());


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(title: const Text('Container例子'),),
        body: Center(
          child: Container(
            //容器大小
            width:200,
            height: 150,

            //装饰样式
            decoration: BoxDecoration(
              color: Colors.blue[100],
              border: Border.all(
                color: Colors.deepOrange,
                width: 3.0,
              ),
              borderRadius: BorderRadius.circular(0.5),
              boxShadow: [                           // 阴影效果
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 3,
                  blurRadius: 7,
                  offset: const Offset(0, 3),
                )
              ],
            ),
            // 内边距
            padding: const EdgeInsets.all(20),
            
            // 子元素
            child: const Text(
              'Flutter Container',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.deepPurple,
              ),
            ),
            
            // 外边距
            margin: const EdgeInsets.all(25),
            
            // 变换（旋转45度）
            transform: Matrix4.rotationZ(0.1),
            
            // 对齐方式
            alignment: Alignment.center,
          ),
        ),
      )
    );
  }
}

二 实现效果

三 关键属性说明

3.1尺寸控制：

width/height：直接设置宽高

constraints：使用布局约束

不设置尺寸时会自动适配子元素大小

3.2使用场景

1. 创建带背景/边框的可视区域
2. 为其他组件添加间距（padding/margin）
3. 实现简单的装饰效果（圆角/阴影）
4. 组合多个属性实现复杂样式

3.3注意事项

• Container没有子元素时，默认会填满可用空间（如果有父级约束）
• 同时设置color和decoration会冲突（应在decoration中设置颜色）
• 复杂的组合建议使用DecoratedBox或PhysicalModel替代