构造方法
<code>Container({ Key key,//当前widget标识 this.alignment,//子控件在容器内的对齐方式 this.padding,//内边距 Color color, //容器的背景颜色 Decoration decoration,//置背景图片、圆角、渐变、阴影、边框等背景装饰器 this.foregroundDecoration, double width,//控件宽 double height,//控件高 BoxConstraints constraints,//组件的宽高限制 this.margin,//外边距 this.transform,// Matrix4矩阵变换 this.child,//子控件})/<code> alignment
子控件在容器内的对齐方式,其类型分别是继承AlignmentGeometry的Alignment和AlignmentDirectional.
Alignment
- 上: Alignment.topLeft(顶部左对齐)、Alignment.topCenter(居中)、Alignment.topRight(右对齐)
- 中: Alignment.centerLeft(中部左对齐)、Alignment.center(居中) Alignment.centerRight(右对齐)
- 下: Alignment.bottomLeft(底部左对齐)、Alignment.bottomCenter(居中)、Alignment.bottomRight(右对齐)
AlignmentDirectional;对齐方式与文本的TextDirection的属性有关
- 上: AlignmentDirectional.topStart(顶部左对齐)、AlignmentDirectional.topCenter(居中)、 AlignmentDirectional.topEnd(右对齐)
- 中:AlignmentDirectional.centerStart(中部左对齐)、AlignmentDirectional.center(居中) AlignmentDirectional.centerEnd(右对齐)
- 下:AlignmentDirectional.bottomStart(底部左对齐)、AlignmentDirectional.bottomCenter(居中)、 AlignmentDirectional.bottomEnd(右对齐)
Alignment与AlignmentDirectional代码示例
<code>Container( margin: const EdgeInsets.only(top: 10), color: Colors.orange[100], alignment: Alignment.bottomRight, height: 100, child: Text('Alignment.bottomRight'),),Container( margin: const EdgeInsets.only(top: 10), color: Theme.of(context).primaryColor, height: 100.0, alignment: AlignmentDirectional.bottomEnd, child: Text( "AlignmentDirectional.bottomEnd=>TextDirection.ltr", textDirection: TextDirection.ltr, ),),Container( margin: const EdgeInsets.only(top: 10), color: Colors.orange[100], height: 100.0, alignment: AlignmentDirectional.bottomEnd, child: Text( "AlignmentDirectional.bottomEnd=>TextDirection.rtl", textDirection: TextDirection.rtl, ),),/<code>- result
padding
内边距;左,上,右,下;
margin
外边距,其属性也是用padding 实现的.
- padding与margin代码示例
<code>Container( margin: const EdgeInsets.only(top: 10), color: Theme.of(context).primaryColor, padding: EdgeInsets.only( left: 10.0, right: 50.0, top: 10.0, bottom: 30), child: Container( color: Colors.orange[100], child: Text("this.padding"), ),),Container( margin: const EdgeInsets.only(top: 10), color: Theme.of(context).primaryColor, padding: EdgeInsets.only( left: 10.0, right: 50.0, top: 10.0, bottom: 30), child: Container( color: Colors.orange[100], child: Text("this.margin"), ),),Container( margin: const EdgeInsets.only(top: 10), color: Theme.of(context).primaryColor, child: Container( margin: const EdgeInsets.only( left: 10.0, right: 50.0, top: 10, bottom: 30), color: Colors.orange[100], child: Text("this.margin"), ),),/<code>- result
Height & Width
从上面margin与padding的示例中就可以看出,相同的代码,显示“this.padding”的控件要长一点,而由于设置小字体后,第三个的控件是最小的,由此推断当Container 没有设置宽高时,会依据子控件的大小与padding属性调整自身的大小,而且是尽可能的小。通常有三种类型盒约束：
- 尽可能大。例如 Center,ListView,PageView渲染盒
- 跟随子widget大小。例如, Transform 和 Opacity 的渲染盒
- 指定尺寸。例如, Image 和 Text的渲染盒
Container， 会根据构造函数参数的不同而不同。Container默认是尽可能大的占用空间， 但是如果你给它指定一个width，那它就会采用指定的值
尺寸大小
- 如果Container没有子部件，没有宽高，没有约束，并且父部件提供了无限制约束(unbounded constraints)，Container会尽可能小。
- 如果Container没有子部件，没有对齐规则，但是提供了高度、宽度或者约束，那么Container会在遵循宽、高、约束和父部件约束的情况下，尽可能小。
- 如果Container没有子部件，没有宽高，没有约束，没有对齐，但是父部件提供了有限制约束，那么Container会扩张以适应（fit）父部件约束
- 如果Container有一个对齐规则，并且父部件提供了无限制约束，那么Container会尝试调整自己来包围子部件
- 如果Container有一个对齐规则，而且父部件提供了有限制约束，那么Container会尝试扩张以适应（fit）父部件，然后根据对齐方式，将子部件置于其内
- 另外，Container有子部件，但是Container没有宽高、约束、对齐规则，那么Container会传递父部件的约束到其子部件，然后调整自身来匹配子部件。
- margin和padding也会影响布局，decoration会隐性增加padding(比如设置border)。
- 默认是尽可能大
constrains
约束控件的最大最小宽高
BoxConstraints.tight
其方法定义:
<code>BoxConstraints.tight(Size size) : minWidth = size.width, maxWidth = size.width, minHeight = size.height, maxHeight = size.height;/<code>
可以看到BoxConstraints.tight约束控件的宽高是固定的了min=max。
BoxConstraints.loose
其方法定义:
<code>BoxConstraints.loose(Size size) : minWidth = 0.0, maxWidth = size.width, minHeight = 0.0, maxHeight = size.height;/<code>
BoxConstraints.loose最大宽高是指定值，最小是0。
BoxConstraints.expand
其方法定义:
<code>const BoxConstraints.expand({ double width, double height, }) : minWidth = width != null ? width : double.infinity, maxWidth = width != null ? width : double.infinity, minHeight = height != null ? height : double.infinity, maxHeight = height != null ? height : double.infinity;/<code>未指定宽高时,控件会尽可能大。
- Width,Height & constrains 代码
<code>Container( margin: const EdgeInsets.only(top: 10), width: 200.0, height: 100.0, color: Colors.orange[100], child: Text('width = 200,height = 100'),),Container( margin: const EdgeInsets.only(top: 10), color: Theme.of(context).primaryColor, constraints: BoxConstraints.expand(height: 50.0), child: Text('BoxConstraints constraints'),),/<code>- result
Color
容器的背景颜色,这个属性与decoration中的color属性冲突.
Decoration
其类型为Decoration,为一个抽象类,其主要属性有下:
- color
- image
- border
- gradient;渐变
- LinearGradient;线性渐变,设置起始位置和渐变色集合
- RadialGradient;放射渐变,以中心为原点向外发散渐变,可以设置发散的半径
- SweepGradient;扇形渐变,以水平x轴正向方向为起点,扫描到指定的角度;可以设置起始角度,结束角度,中心点
Decoration 相关代码
<code>Container( margin: const EdgeInsets.only(top: 10), constraints: BoxConstraints.expand(height: 100.0), padding: EdgeInsets.all(10.0), decoration: ShapeDecoration( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10)), color: Colors.orange[100], shadows: [ BoxShadow( color: Colors.red, offset: Offset(0.1, 0.5), blurRadius: 2.0), ]), child: Text('ShapeDecoration'), ),Container( margin: const EdgeInsets.only(top: 10), constraints: BoxConstraints.expand(height: 200), alignment: Alignment.center, padding: const EdgeInsets.all(10), decoration: BoxDecoration( gradient: LinearGradient( colors: [ Theme.of(context).primaryColor, Colors.orange[100] ]), shape: BoxShape.circle, boxShadow: [ BoxShadow( color: Colors.red, offset: Offset(0.1, 0.5), blurRadius: 2.0), ]), child: Text( "BoxDecoration", style: TextStyle(color: Colors.white), ), ),/<code>- result
transform
<code> Container( margin: const EdgeInsets.only(top: 10), padding: const EdgeInsets.only(top: 10.0, left: 10.0), constraints: BoxConstraints.expand(height: 100, width: 100), color: Colors.orange[100], child: Text('This.transform'), ),Container( margin: const EdgeInsets.only(top: 10), padding: EdgeInsets.only(top: 10, left: 10), constraints: BoxConstraints.expand(width: 100, height: 100), color: Colors.orange[100], transform: Matrix4.rotationY(3.14 / 4)..rotateX(3.14 / 4), child: Text('this.transform'), ),/<code>- result
分享到:
閱讀更多 Flutter學習記 的文章
關鍵字: 构造方法 EdgeInsets 控件
