flutter之Container盒子小部件

浅浅的花香味﹌ 2022-12-28 09:04 164阅读 0赞

Container(
          // 接收的子元素
          child: Icon(Icons.pool,size: 32.0, color: Colors.white,),
          // 内边距 
          padding: EdgeInsets.all(16.0),
          // 外边距
          margin: EdgeInsets.all(16.0),
          // 宽度
          width: 90.0,
          // 高度
          height: 90.0,
          // 盒子修饰器
          decoration: BoxDecoration(   // div装饰器
          // 背景颜色
            color: Colors.lightBlue,
          // 实线边框
    //              border: Border(
    //                  top: BorderSide(
    //                    color: Colors.red,
    //                    width: 3.0,
    //                    style: BorderStyle.solid
    //                  ),
    //                  left: BorderSide(
    //                      color: Colors.red,
    //                      width: 3.0,
    //                      style: BorderStyle.solid
    //                  )
    //              )
            // 实线边框写法二
            border: Border.all(
                color: Colors.red, width: 3.0, style: BorderStyle.none
            ),
            // 盒子形状 ：方形  圆形
            shape: BoxShape.circle,  // rectangle
            // 盒子阴影效果
            boxShadow: [
              BoxShadow(
                offset: Offset(0.0, 12.0), // 位置偏移
                color: Color.fromRGBO(16, 20, 188, 1.0), // 阴影颜色
                blurRadius: 25.0, // 模糊程度
                spreadRadius: -9.0,
              ),
            ],
            // 盒子滤镜
            gradient: LinearGradient( // 线性渐变
              colors: [
                Color.fromRGBO(7, 102, 255, 1.0),
                Color.fromRGBO(3, 28, 128, 1.0),
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
        );