Stack 这个是Flutter中布局用到的组件，跟Android中FrameLayout很像，都是可以叠加的现实View
常用属性
| 属性名 | 功能 |
|---|---|
| alignment | 配置所有子元素的显示位置 |
| textDirection | 子组件排列方向 TextDirection.ltr：从左往右排列。TextDirection.rtl：从右往左排列 |
| fit | 如何确定没有使用 Position 包裹的子组件的大小，可选值有StackFit.loose：子组件宽松取值，可以从 min 到 max。 StackFit.expand：子组件取最大值.StackFit.passthrough：不改变子组件约束条件。 |
/*
*Stack 组件基本属性
*/
class StackView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
alignment:
AlignmentDirectional.bottomStart, //指的是子Widget的对其方式，默认情况是以左上角为开始点
fit: StackFit
.loose, // expand使子Widget的大小和父组件一样大,StackFit.loose 指的是子Widget 多大就多大
children: [
Container(
width: 120.0,
height: 120.0,
color: Colors.blue,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
Container(
width: 80.0,
height: 80.0,
color: Colors.grey,
)
],
);
}
}
image.png
STack Positioned 的基本属性
/*
* STack Positioned 的基本属性
*/
class StackDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
alignment: AlignmentDirectional.center,
children: [
Positioned(
top: 0,
left: 0,
child: Container(
width: 60,
height: 60,
color: Colors.red,
),
),
Positioned(
top: 0,
right: 0,
child: Container(
width: 60,
height: 60,
color: Colors.green,
),
),
Positioned(
bottom: 0,
left: 0,
child: Container(
width: 60,
height: 60,
color: Colors.blue,
),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
width: 60,
height: 60,
color: Colors.yellow,
),
),
],
);
}
}
image.png
STack Align 的基本属性
/*
* STack Align 的基本属性
*/
class StackAlign extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment(-1, -1),
child: Container(
width: 60,
height: 60,
color: Colors.yellow,
)),
Align(
alignment: Alignment(1, 1),
child: Container(
width: 60,
height: 60,
color: Colors.red,
)),
Align(
alignment: Alignment(0, 0),
child: Container(
width: 60,
height: 60,
color: Colors.green,
)),
Align(
alignment: Alignment(0, 1),
child: Container(
width: 60,
height: 60,
color: Colors.blue,
)),
Align(
alignment: Alignment(1, 0),
child: Container(
width: 60,
height: 60,
color: Colors.black,
)),
Align(
alignment: Alignment(-1, 0),
child: Container(
width: 60,
height: 60,
color: Colors.grey,
)),
Align(
alignment: Alignment(0, -1),
child: Container(
width: 60,
height: 60,
color: Colors.pink,
)),
Align(
alignment: Alignment(1, -1),
child: Container(
width: 60,
height: 60,
color: Colors.amberAccent,
)),
Align(
alignment: Alignment(-1, 1),
child: Container(
width: 60,
height: 60,
color: Colors.purple,
)),
],
);
}
}
image.png