Flutter基础组建使用- Container

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    // 最小高度
   ),
)
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容