阅读 42

flutter笔记(三) 容器组件Container

flutter笔记汇总

上一篇笔记用了个Container组件,这一篇详细介绍一下,整体来说这个组件类似div,但是与div又不同,具体有哪些特性,先了解一下Container有哪些属性再总结,因为不了解有哪些属性直接看的话,会有点懵逼。

Container({
  Key key,
  AlignmentGeometry alignment,        //子组件的对齐方式
  EdgelnsetsGeometry padding,          //内边距
  Color color,                          //背景色
  Decoration decoration,                //背景装饰  相当于样式  在child之下
  Decoration foregroundDecoration,      //前景装饰  覆盖在child之上  如半透明遮罩效果
  double width,                         //宽
  double height,                         //高
  BoxConstraints constraints,           //容器的大小限制
  EdgelnsetsGeometry margin,            //外边距
  Matrix4 transform,                     //变换
  Widget child                            //子节点
})
复制代码

1、alignment

子组件的对齐方式,有子组件并且当前Container尺寸大于子组件尺寸时有效

new Container(
  color: Colors.red,
  width: 400.0,
  height: 400.0,
  alignment: Alignment.center,
  child: new Container(
    color: Colors.blue,
    width: 50.0,
    height: 50.0,
  )
)
复制代码

center:居中
centerLeft:靠左垂直居中
centerRight:靠右垂直居中
bottomCenter:底部居中
bottomLeft:左下
bottomRight:右下
topCenter:顶部居中
topLeft:左上
topRight:右上
可以看见除了center,都是两个单词拼在一起很好记,垂直方向在前,水平方向在后。
子组件尺寸要小于当前组件尺寸时才会生效。

2、padding & margin

这两个放一起,设置方式相同,这里以padding为例。

new Container(
  padding: EdgeInsets.all(10.0)
)
复制代码

EdgeInsets.all:四个内边距值相同
EdgeInsets.only:四个边距单独设置,不设置则为0,用法如下

padding: EdgeInsets.only(
  top: 10.0,
  left: 20.0
)
复制代码

可以只写一个,也可以四个全都写。
EdgeInsets.symmetric:可以设置同方向上的两个内边距

padding: EdgeInsets.symmetric(
  horizontal: 10.0,        //水平方向两个边距
  vertical: 20.0          //垂直方向两个边距
)
复制代码

EdgeInsets.zero:设置内边距为0
EdgeInsets.fromLTRBonly的简写,顺序为左上右下

padding: EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0)
复制代码

EdgeInsets.fromWindowPadding:具体用法不知道
***EdgeInsets这个组件是个公用组件,并不是只有padding可以用,比如margin也可以

3、color

背景色。

new Container(
  color: Colors.red
)
复制代码

4、decoration

***decoration不能和color同时用,会报错。

const BoxDecoration({
  Color color,
  DecorationImage image,
  BoxBorder border,
  BorderRadiusGeometry borderRadius,
  List<BoxShadow> boxShadow,
  Gradient gradient,
  BlendMode backgroundBlendMode,
  BoxShape shape: BoxShape.rectangle
})
复制代码

color

和color一样,没啥说的。

image

背景图,可以和背景色一起使用。

decoration: BoxDecoration(
  image: DecorationImage(
  //这里先用网图,怎么加载本地资源以后再细说
    image: new NetworkImage('https://cdn.jsdelivr.net/gh/flutterchina/website@1.0/images/flutter-mark-square-100.png')
  )
)
复制代码

border

边框,在container内部,和margin/padding类似,可以单独设置也可以设置为统一样式。

decoration: BoxDecoration(
  //border: Border.all(width: 2.0, color: Colors.blue)          设置为相同样式
  top: BorderSide(width: 2.0, color: Colors.blue),
  left: BorderSide(width: 4.0, color: Colors.yellow),
  right: BorderSide(width: 8.0, color: Colors.green),
  bottom: BorderSide(width: 16.0, color: Colors.purple)
)
复制代码

borderRadius

*圆角不能和border同时设置,同时存在时可以运行但是会抛出一个异常

decoration: new BoxDecoration(
  borderRadius: BorderRadius.only(                   //only对每个角单独设置
    bottomLeft: Radius.circular(20.0),                  //圆角值为20.0
    topLeft: Radius.zero,                                      //圆角为0
    bottomRight: Radius.elliptical(20.0, 40.0)       //圆角x方向为20.0,y方向为40.0
  )
)
复制代码

Radius.all:四个角同时设置,参数和但方向的参数相同(borderRadius: new BorderRadius.all(Radius.circular(20.0)))。
Radius.lerp: 做动画用的多一点暂时先不深入。

boxShadow

容器阴影

decoration: new BoxDecoration(
  boxShadow: [
    new BoxShadow(
      color: Colors.red,                      //阴影颜色
      offset: Offset(10.0, 20.0),          //偏移量x, y
      blurRadius: 10.0,                      //模糊
      spreadRadius: 10.0                  //延伸
    ),
  ]
)
复制代码

gradient

背景色渐变

 //径向渐变
decoration: BoxDecoration(
  gradient: RadialGradient(                         
    colors: [Colors.red, Colors.blue],            //渐变颜色
    center: Alignment.topLeft,                      //渐变中心点,可以设具体数值(center: const Alignment(0.7, -0.6))
    radius: 5.0                                              //渐变半径
    stops: [0.4, 1.0],                                    //渐变颜色的比例
  ),
)

//线性渐变
gradient: LinearGradient(
  begin: Alignment.topLeft,                            //渐变起始点
  end: Alignment(0.1, 0.1),                            //结束点
  colors: [Colors.red, Colors.blue],              
  tileMode: TileMode.mirror                          //模式有三个值(mirror:镜像,clamp: 单纯的单次渐变不做其他处理,repeated: 重复)
)

//扇形渐变
gradient: SweepGradient(
  center: FractionalOffset.center,    //渐变的圆心
  startAngle: 0.0,                      //渐变的起始角度
  endAngle: math.pi * 2,          //渐变的角度范围
  colors: const <Color>[
    Colors.blue,
    Colors.green,
    Colors.red,
    Colors.yellow,
    Colors.pink
  ],
  stops: const <double>[0.0, 0.25, 0.5, 0.75, 1.0],      //每种颜色所占的比例,总数为2,多出部分被初始颜色覆盖
)
复制代码

扇形渐变每种颜色的基准线为改颜色的中心线(不理解的自己试一下就知道了)。
tileMode是这三种渐变都有的属性,不仅限于线性渐变。
径向渐变、扇形渐变的圆心位置和线性渐变的起始/结束坐标都是可以设置具体数值的。

backgroundBlendMode

图像混合模式,这个东西有点多,要单开一篇。

shape

当前Container的形状

decoration: BoxDecoration(
  shape: BoxShape.rectangle
)
复制代码

有两个值
rectangle:矩形
circle:圆形,不会出现椭圆的情况,宽高不同时直径按小的那个值算。

5、width & height

这俩放一起,double类型,宽高。

6、constraints

对Container的尺寸约束

constraints: new BoxConstraints(
  minWidth: 200.0,
  maxWidth: 300.0,
  minHeight: 200.0,
  maxHeight: 300.0
)
复制代码

7、transform

对Container进行变换操作,和css的transform类似,值是一个矩阵(Matrix4)。
这里暂时跳过,开一篇单独说。

8、child

子节点,只能有一个子节点,没有children。

9、关于Container的特性

关于尺寸的自我调节

1、如果设置了width/height/constraints,并且尺寸小于父组件的尺寸,则为设置的宽高,如果大于父组件的尺寸则为父组件的宽高,如果父组件有padding,或当前组件有margin需要减去padding/margin
2、如果没有子节点并且没有width/height以及constraints约束,Container的尺寸会撑到最大,尽可能占满父节点。
2、如果有子节点并且没有width/height以及constraints约束,Container会尽量缩小。

关于渲染过程

生成节点: padding > decoration > constraints (width/height) > margin
绘制节点: transform > decoration > foregroundDecoration

Container差不多就这些东西,不是太深入,深入的东西就需要自己在项目或者demo中尝试了,还有一些即使是粗略的说也不少,放这里感觉不太合适,后边单独分析。