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