Flutter - Container(容器)

前端大家都知道有div用来布局，可以设置margin，padding等等，Flutter里面相对应的就是Container了。

             Container(
                child: Icon(  //添加一个子元素，用来展示icon
                  Icons.pool,
                  size: 32.0,
                  color: Colors.yellow,   // icon的颜色
                ),
                color: Color.fromRGBO(3, 54, 255, 1.0),  // 容器的背景色
                width: 90.0,  // 容器宽度
                height: 90.0, // 容器高度
                padding: EdgeInsets.all(16.0),  // 容器的内边距
                margin: EdgeInsets.fromLTRB(0.0, 300.0, 0.0, 0.0),  // 容器的外边距,这里四个参数和web不一样，顺序是 左，上，右，下
              )

那我们想要加上边框该如何呢，在Container里面有个decoration，它接收BoxDecoration的widget。这里面就可以放置border啦。

Container(
                child: Icon(
                  Icons.pool,
                  size: 32.0,
                  color: Colors.yellow,
                ),
                // color: Color.fromRGBO(3, 54, 255, 1.0),
                width: 90.0,
                height: 90.0,
                padding: EdgeInsets.all(16.0),
                margin: EdgeInsets.fromLTRB(0.0, 300.0, 0.0, 0.0),
                decoration: BoxDecoration(
                  color: Color.fromRGBO(3, 54, 255, 1.0), // 容器的背景色,注意和Container直接设置color效果一样，但会冲突，如果有BoxDecoration，那么背景色就在这里面设置
                  border: Border.all( // 设置四边，如果只要设置一边用Border(top:xxx,left:xxx,xxx,xxx)
                      style: BorderStyle.solid,
                      color: Colors.yellow,
                      width: 3.0),
                  borderRadius: BorderRadius.only( //如果要设置全部启用圆角效果用BorderRadius.circular
                    topLeft: Radius.circular(64.0),  //设置左上角圆角
                  ),
                  boxShadow: [
                    BoxShadow(
                      offset: Offset(6.0, 7.0), // 偏移量 x,y
                      color: Colors.lightBlue,
                      blurRadius: 1.0, //模糊程度
                      spreadRadius: 2.0, //扩散程度
                    ),
                    BoxShadow(
                      offset: Offset(-6.0, -8.0), // 偏移量 x,y
                      color: Colors.pink,
                      blurRadius: 2.0, //模糊程度
                      spreadRadius: 3.0, //扩散程度
                    ),
                  ],
                  // shape: BoxShape.circle,  //盒子形状，与borderRadius会冲突
                  // gradient: RadialGradient(
                  //   // 盒行渐变 添加渐变色
                  //   colors: [
                  //     Color.fromRGBO(7, 102, 255, 1.0),
                  //     Color.fromRGBO(3, 28, 128, 1.0),
                  //   ],
                  // ),
                  gradient: LinearGradient(
                    // 线行渐变 添加渐变色
                    colors: [
                      Color.fromRGBO(7, 102, 255, 1.0),
                      Color.fromRGBO(3, 28, 128, 1.0),
                    ],
                  ),
                  // image: xxxx //背景图像
                ),
              )