Flutter基础组建使用- Container

Posted 2021-09-13 bigshot

1、添加圆角

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.circular(20), // 也可以上下左右单独设置，如下
    borderRadius: BorderRadius.only(
       topLeft: Radius.circular(15),
       topRight: Radius.circular(15),
       bottomLeft: Radius.circular(15),
       bottomRight: Radius.circular(15),
    ),
  ),
)

2、添加阴影

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.red, // 阴影颜色
        blurRadius: 4, // 阴影模糊层度（大就更透明更扩散）
        offset: Offset(4, 8), // 阴影起始位置
        spreadRadius: 2, //阴影模糊大小
      ),
    ],
  ),
)

3、添加渐变

Container(
          width: 500,
          height: 500,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.white,
            gradient: LinearGradient(
              colors: [
                Colors.red,  // 渐变颜色 从red->amber
                Colors.amber,
              ],
              begin: Alignment.topLeft, // 开始位置 
              begin: Alignment(10,20), // 也可以是具体的坐标值
              end: Alignment.bottomRight, // 结束位置 同上
            ),
          ),
          child: Text(\'container\'),
        ),

4、形状(shape)

Container(
          width: 500,
          height: 500,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.white,
            shape: BoxShape.circle, // 默认BoxShape.rectangle(此属性和borderRadius不可共存)
          ),
          child: Text(\'container\'),
        ),

5、容器限定

 Container(
   width: 500,
   height: 500,
   alignment: Alignment.center,
   constraints: BoxConstraints(
     maxHeight: 200,   // 最大高度
     maxWidth: 260,    // 最大宽度
     minWidth: 100,    // 最小宽度
     minHeight: 100    // 最小高度
   ),
)