Flutter Stack组件
Stack表示堆的意思,我们可以用Stack或者Stack结合Align或者Stack结合Postitiond来实现页面的定位布局
| 属性 | 说明 |
|---|---|
| alignment | 配置所有子元素的显示位置 |
| children | 子组件 |
Stack组件,可以让组件下children内的所有组件进行堆叠.再通过alignment属性来设置堆叠布局的位置
简单看一个Stack堆叠
import 'package:flutter/material.dart';
class StackPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'stack page',
home: Scaffold(
appBar: AppBar(
title: Text('Stack Page')
),
body: PageWidget()
),
);
}
}
class PageWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.center, //- Stack 下的所有元素都以中心对齐堆叠
children: <Widget>[
Container(
width:300.0,
height:400.0,
color: Colors.orangeAccent,
),
Container(
width:100.0,
height:150.0,
color: Colors.pinkAccent
),
Text('我是文本'), //- 文本在最下面加载,才能够显示在最上面,如果顺序不同,可能文字被其他区块遮挡
],
);
}
}
页面效果:
image.png
上面的demo中,我们使用了一个关键属性
alignment,具体排列可以参考Alignment下的方位属性.当然我们也可以不使用Alignment的方位属性,可以使用Alignment指定方位.需要直接实例化Alignment()这个类,传入X,Y的值.区间为-1 到 1.对应X轴和Y轴的坐标位置.
class PageWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment(1,1), //- Alignment()实例化类传入XY的坐标,区间为-1 到 1
children: <Widget>[
Container(
width:300.0,
height:400.0,
color: Colors.orangeAccent,
),
Container(
width:100.0,
height:150.0,
color: Colors.pinkAccent
),
Text('我是文本'), //- 文本在最下面加载,才能够显示在最上面,如果顺序不同,可能文字被其他区块遮挡
],
);
}
}
我们设置Alignment实例化类里传入1,1对应为X轴和Y轴最大值.那么应该是右下角.手机上显示为:
image.png
容器内有多个元素需要定位
我们在使用Stack组件进行子组件布局的时候,没法对单一组件进行定位.这个时候我们就需要使用Stack结合Align或者Positioned属性进行实现.
Stack配合Align实现单一子组件定位:
| 属性 | 说明 |
|---|---|
| alignment | 配置所有子元素的显示位置 |
| child | 子组件 |
class PageWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
height:400.0,
width: 300.0,
color:Colors.orangeAccent,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Icon(Icons.home, size: 40, color: Colors.white),
),
Align(
alignment: Alignment(0.7, 1),
child: Icon(Icons.search, size: 30, color: Colors.blue),
),
Align(
alignment: Alignment(0, 0),
child: Icon(Icons.bubble_chart, size: 80, color: Colors.red),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
width:80.0,
height:160.0,
color: Colors.blueGrey
),
)
],
),
);
}
}
实现效果:
image.png
Stack配合Align实现单一子组件定位:
| 属性 | 说明 |
|---|---|
| top | 子元素距离顶部的距离 |
| bottom | 子元素距离底部的距离 |
| left | 子元素距离左边的距离 |
| right | 子元素距离右边的距离 |
| child | 子组件 |
代码:
class PageWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
height:400.0,
width: 300.0,
color:Colors.orangeAccent,
child: Stack(
children: <Widget>[
Positioned(
left:10,
child: Icon(Icons.home, size: 40, color: Colors.white),
),
Positioned(
bottom: 50,
child: Icon(Icons.search, size: 30, color: Colors.blue),
),
Positioned(
bottom: 100,
child: Icon(Icons.bubble_chart, size: 80, color: Colors.red),
),
Positioned(
left:50,
top:50,
child: Container(
width:80.0,
height:160.0,
color: Colors.blueGrey
),
)
],
),
);
}
}
页面效果:
image.png
