一、Stack 组件
Stack 表示堆的意思，我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局
| 属性 | 说明 |
|---|---|
| alignment | 配置所有子元素的显示位置 |
| children | 子组件 |
class StackAlignmentWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Stack(
alignment: Alignment.bottomRight,
// alignment: Alignment(1, 0.3),
// alignment: Alignment(1, -0.2),
children: <Widget>[
Container(
width: 300,
height: 400,
color: Colors.red
),
Text('我是一个文本',
style: TextStyle(
fontSize: 40,
color: Colors.white
)
)
]
)
);
}
}
StackWidget.png
二、Stack 与 Align
Stack 组件中结合 Align 组件可以控制每个子元素的显示位置
| 属性 | 说明 |
|---|---|
| alignment | 配置所有子元素的显示位置 |
| children | 子组件 |
class StackAlignWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 300,
height: 400,
color: Colors.red,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment(1, -0.2),
child: Icon(Icons.home, size: 30, color: Colors.white)
),
Align(
alignment: Alignment.center,
child: Icon(Icons.search, size: 30, color: Colors.white)
),
Align(
alignment: Alignment.bottomRight,
child: Icon(Icons.settings_applications, size: 30, color: Colors.white)
)
]
)
)
);
}
}
StackAlignWidget.png
三、Stack 与 Positioned
Stack 组件中结合 Positioned 组件也可以控制每个子元素的显示位置
| 属性 | 说明 |
|---|---|
| top | 子元素距离顶部的距离 |
| bottom | 子元素距离底部的距离 |
| left | 子元素距离左侧的距离 |
| right | 子元素距离右侧的距离 |
| child | 子组件 |
class StackPositionedWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 300,
height: 400,
color: Colors.red,
child: Stack(
children: <Widget>[
Positioned(
child: Icon(Icons.home, size: 40, color: Colors.white)
),
Positioned(
bottom: 0,
left: 100,
child: Icon(Icons.search, size: 30, color: Colors.white)
),
Positioned(
right: 0,
child: Icon(Icons.settings_applications, size: 30, color: Colors.white)
)
]
)
)
);
}
}
StackPositionedWidget.png
