flutter Container容器布局

Container容器布局

Container是一个拥有绘制、定位、调整大小的 widget，是开发中最常用、最基础的组件,和html中的div相似
相关属性

Container({
    super.key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  }) 

alignment

aligment可以设置内部组件child的位置对齐方式
如alignment: Alignment.bottomLeft表示在左下角

transform

对控件进行变换,其中包括位移,旋转,缩放,沿x轴或者y轴进行旋转

位移

transform: Matrix4.translationValues(x, y, z),

其中x,y,z分别表示沿该方向的移动

旋转

transform: Matrix4.rotationZ(0.2),

width与height

表示整个容器的宽和高

margin(外边距)与padding(内边距)

margin: const EdgeInsets.all(21), 设置所有方向的外边距为21
也可以设置为EdgeInsets.fromLTRB(left, top, right, bottom)分别数据各个方向的边距
margin和padding用法一样

child

相当于容器内的子元素,可以添加文本控件

decoration

可以在里面定义容器的背景设定（边框、圆角、阴影、形状、渐变、背景图像等）
有以下属性

 const BoxDecoration({
    this.color,  //背景颜色
    this.image,  //背景图片
    this.border,  //边框
    this.borderRadius, //边框圆角
    this.boxShadow, //阴影
    this.gradient,  //背景渐变
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
     })

更多参考:https://blog.csdn.net/chenlove1/article/details/83627831

gradient

在这个渐变属性中有多种渐变方式
扫描式渐变 gradient: SweepGradient

线性渐变 gradient: LinearGradient

径向渐变 gradient: RadialGradient

代码示例

 Center(
      child: Container(
        //相当于div
        width: 200,
        height: 100,
        alignment: Alignment.center, //设置内部组件的位置方式
        decoration: BoxDecoration(
          // color: Color.fromRGBO(240, 230, 140, 1), //设置填充
          border: Border.all(color: Colors.deepOrange, width: 2), //设置边框以及变宽颜色
          borderRadius: BorderRadius.circular(5), //设置圆角边框效果
          gradient: LinearGradient(
              colors: [Colors.red, Colors.yellow]), //设置线性渐变从蓝色到黄色
          boxShadow: [
            BoxShadow(
              color: Colors.indigoAccent, //设置阴影颜色
              blurRadius: 20, //设置阴影效果
            )
          ],
        ),
        child: Text(  //设置为文本控件
          "你好flutter!",   //设置文字内容
          textDirection: TextDirection.ltr,   //设置文字的方向
          style: TextStyle(color: Color.fromRGBO(0, 0, 255, 1), fontSize: 19),//设置文字样式属性
        ),
      ),
    );

images与icon

图片加载分为两种，一种是本地加载(asset)，一种是远程加载(network)

圆形图片的设置
代码演示:

 Center(
      child: Container(
        width: 50,   //设置容器宽高
        height: 50,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100), //设置圆形边框
            image: const DecorationImage(
              image: NetworkImage(
                  "http://xxxxx.xx:2333/upload/2022/11/4dffadc42c8c2eac3caf44d569b04cf.jpg"),   //远程加载图片
              fit: BoxFit.cover,   //设置超出容器的剪切方式
            )),
        // child: Image.network("xxxxxxx.xx:2333/upload/2022/11/4dffadc42c8c2eac3caf44d569b04cf.jpg"),
      ),
    );

方式二

ClipOval(
      child: Image.network(
        "http://xxxxxx/upload/2022/11/4dffadc42c8c2eac3caf44d569b04cf.jpg",
        width: 50,
        height: 50,
        fit: BoxFit.cover,
      ),
    );