一、介绍
stack 层叠组件
一般Stack和Align组件或者Stack和Positioned组件结合使用，实现页面的定位布局
二、Stack源码
Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,//子组件的对齐方式
this.textDirection,//排序方式
this.fit = StackFit.loose,//如何确定没有使用 Position 包裹的子组件的大小
this.overflow = Overflow.clip,//超出部分的处理方式
this.clipBehavior = Clip.hardEdge,
List children = const [],//子组件
}) : assert(clipBehavior != null),
super(key: key, children: children);
三、Stack的属性
| 属性 | 说明 |
|---|---|
| alignment | 子组件的对齐方式 AlignmentDirectional.topCenter垂直靠顶部水平居中对齐 AlignmentDirectional.topRight垂直靠顶部水平靠右对齐 AlignmentDirectional.centerLeft垂直居中水平靠左对齐 AlignmentDirectional.center垂直和水平居中都对齐 AlignmentDirectional.centerRight垂直居中水平靠右对齐 AlignmentDirectional.bottomLeft垂直靠底部水平靠左对齐 AlignmentDirectional.bottomCenter垂直靠底部水平居中对齐 AlignmentDirectional.bottomRight垂直靠底部水平靠右对齐 AlignmentDirectional(double,double)组件的中心为原点，取值范围[-1,1],根据取值进行偏移 |
| textDirection | 子组件排序方向 TextDirection.ltr从左往右排列 TextDirection.rtl从右往左排列 |
| fit | 如何确定没有使用 Position 包裹的子组件的大小 StackFit.loose子组件宽松取值，可以从 min 到 max StackFit.expand子组件取最大值 StackFit.passthrough不改变子组件约束条件 |
| overflow | 超出部分的处理方式 Overflow.clip超出部分剪切 Overflow.visible超出部分可见 |
| children | 子组件数组 |
四、Stack的demo
Stack(
alignment: AlignmentDirectional(-0.5,0.5),
fit: StackFit.loose,
textDirection: TextDirection.rtl,
children: [
Container(
height: 100,
width: 100,
color: Colors.red,
),
Text(
"我是文本"
),
Text(
"222222222"
),
],
);
企业微信截图_16069263638073.png
五、Align源码
const Align({
Key key,
this.alignment = Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child,
}) : assert(alignment != null),
assert(widthFactor == null || widthFactor >= 0.0),
assert(heightFactor == null || heightFactor >= 0.0),
super(key: key, child: child);
六、Align属性
| 属性 | 说明 |
|---|---|
| alignment | 子组件的对齐方式 Alignment.topCenter垂直靠顶部水平居中对齐 Alignment.topRight垂直靠顶部水平靠右对齐 Alignment.centerLeft垂直居中水平靠左对齐 Alignment.center垂直和水平居中都对齐 Alignment.centerRight垂直居中水平靠右对齐 Alignment.bottomLeft垂直靠底部水平靠左对齐 Alignment.bottomCenter垂直靠底部水平居中对齐 Alignment.bottomRight垂直靠底部水平靠右对齐 Alignment(double,double)组件的中心为原点，取值范围[-1,1],根据取值进行偏移 |
| widthFactor | 宽度系数，double |
| heightFactor | 高度系数，double |
| child | 子组件 |
七、Stack Align结合的demo
return Container(
height: 400,
width: 400,
color: Colors.red,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Icon(Icons.account_circle,size: 40,color: Colors.white,)
),
Align(
alignment: Alignment.topLeft,
child: Icon(Icons.cached_outlined,size: 40,color: Colors.white,)
),
Align(
alignment: Alignment.bottomRight,
child: Icon(Icons.baby_changing_station,size: 40,color: Colors.white,)
)
],
),
);
企业微信截图_16069291654716.png
八、Positioned的源码
const Positioned({
Key key,
this.left,//
this.top,
this.right,
this.bottom,
this.width,
this.height,
@required Widget child,
}) : assert(left == null || right == null || width == null),
assert(top == null || bottom == null || height == null),
super(key: key, child: child);
九、Positioned的属性
| 属性 | 说明 |
|---|---|
| left | 左间距 |
| top | 上间距 |
| right | 右间距 |
| bottom | 下间距 |
| width | 子组件的宽度 |
| height | 子组件的高度 |
十、Stack Positioned结合使用demo
return Container(
height: 400,
width: 400,
color: Colors.red,
child: Stack(
children: [
Positioned(
left: 10,
top: 10,
width: 60,
height: 60,
child: Container(
color: Colors.black,
),
),
Positioned(
right: 10,
top: 10,
width: 60,
height: 60,
child: Container(
color: Colors.blue,
),
),
Positioned(
left: 10,
bottom: 10,
width: 40,
height: 40,
child: Container(
color: Colors.yellow,
),
),
Positioned(
bottom: 10,
right: 10,
width: 40,
height: 40,
child: Container(
color: Colors.deepPurple,
),
)
],
),
);
企业微信截图_16069298614958.png