Flutter---Container

概念

一个多功能容器，可以设置背景、边距、大小、装饰等

核心属性

Dart 复制代码

child	Widget?	容器内的子组件	
width	double?	容器宽度	
height	double?	容器高度	
color	Color?	背景色	
padding	EdgeInsetsGeometry?	内边距（内容到边框）	
margin	EdgeInsetsGeometry?	外边距（容器到外部）	
decoration	BoxDecoration?	装饰（圆角、阴影、渐变等）	
alignment	AlignmentGeometry?	子组件对齐方式	
constraints	BoxConstraints?	额外约束限制	
transform	Matrix4?	变换（旋转、缩放）	
clipBehavior	Clip?	裁剪行为

基本用法

Dart 复制代码

        Container(
            width:100, //宽
            height: 100,//高
            //外边距：有三个参数all(全部)，only(单边)，symmetric(水平或垂直)，
            margin: EdgeInsets.symmetric(horizontal: 8),
            padding: EdgeInsets.all(8),//内边距的用法和外边距一样
            alignment: Alignment(0, 0),//对齐方式
            decoration: BoxDecoration(
              //颜色，withOpacity是用来设置透明度的，值的范围（0.0~1.0）
              color: Color(0xFF5091C9).withOpacity(0.3),
              //圆角效果
              borderRadius: BorderRadius.circular(20),
              //边框
              border: Border.all(color: Colors.black,width: 5)，
              boxShadow: [                    // 阴影
                  BoxShadow(
                    color: Colors.black26, //颜色
                    blurRadius: 8, //模糊程度
                    offset: Offset(2, 2),//偏移
                    spreadRadius:2,//扩散范围
                  ),
                ],
              //设置形状
             // shape: BoxShape.circle， //形状和圆角不能同时设置
            ),
            child: Text(
               "内容"
            ),
          )

不同方式的圆角

Dart 复制代码

// 不同角的圆角
Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(10),
      bottomLeft: Radius.circular(5),
      bottomRight: Radius.circular(15),
    ),
  ),
  child: Text('四个角不同圆角'),
)

线性渐变LinearGradient

Dart 复制代码

// 线性渐变
Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Colors.blue,
        Colors.purple,
      ],
    ),
    borderRadius: BorderRadius.circular(12),
  ),
  child: Center(child: Text('渐变色', style: TextStyle(color: Colors.white))),
)

径向渐变（从中心向外）RadialGradient

Dart 复制代码

// 径向渐变（从中心向外）
Container(
  decoration: BoxDecoration(
    gradient: RadialGradient(
      center: Alignment.center,
      radius: 0.8,
      colors: [
        Colors.yellow,
        Colors.orange,
        Colors.red,
      ],
    ),
  ),
  child: Text('径向渐变'),
)

设置图片背景

Dart 复制代码

Container(
  width: 200,
  height: 150,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/images/background.png'),
      fit: BoxFit.cover,  // 覆盖
    ),
    borderRadius: BorderRadius.circular(12),
  ),
  child: Center(
    child: Text(
      '背景图',
      style: TextStyle(color: Colors.white, fontSize: 20),
    ),
  ),
)

对齐方式

Dart 复制代码

Container(
  width: 200,
  height: 200,
  color: Colors.grey[200],
  alignment: Alignment.center,  // 居中
  child: Container(
    width: 50,
    height: 50,
    color: Colors.blue,
  ),
)


// 常用的对齐常量
alignment: Alignment.topLeft      // 左上
alignment: Alignment.topCenter    // 上中
alignment: Alignment.topRight     // 右上
alignment: Alignment.centerLeft   // 左中
alignment: Alignment.center       // 正中心（默认）
alignment: Alignment.centerRight  // 右中
alignment: Alignment.bottomLeft   // 左下
alignment: Alignment.bottomCenter // 下中
alignment: Alignment.bottomRight  // 右下

自定义偏移

Dart 复制代码

// 坐标范围：-1.0 ~ 1.0
Container(
  alignment: Alignment(-0.5, 0.3),  // 左偏50%，下偏30%
  child: Container(width: 50, height: 50, color: Colors.blue),
)

约束控制

Dart 复制代码

Container(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 300,
    minHeight: 50,
    maxHeight: 150,
  ),
  color: Colors.blue,
  child: Text('尺寸限制'),
)