Flutter Stack組件
Stack表示堆的意思,我們可以用Stack或者Stack結(jié)合Align或者Stack結(jié)合Postitiond來實現(xiàn)頁面的定位布局
| 屬性 | 說明 |
|---|---|
| alignment | 配置所有子元素的顯示位置 |
| children | 子組件 |
Stack組件,可以讓組件下children內(nèi)的所有組件進行堆疊.再通過alignment屬性來設(shè)置堆疊布局的位置
簡單看一個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('我是文本'), //- 文本在最下面加載,才能夠顯示在最上面,如果順序不同,可能文字被其他區(qū)塊遮擋
],
);
}
}
頁面效果:
image.png
上面的demo中,我們使用了一個關(guān)鍵屬性
alignment,具體排列可以參考Alignment下的方位屬性.當然我們也可以不使用Alignment的方位屬性,可以使用Alignment指定方位.需要直接實例化Alignment()這個類,傳入X,Y的值.區(qū)間為-1 到 1.對應X軸和Y軸的坐標位置.
class PageWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment(1,1), //- Alignment()實例化類傳入XY的坐標,區(qū)間為-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('我是文本'), //- 文本在最下面加載,才能夠顯示在最上面,如果順序不同,可能文字被其他區(qū)塊遮擋
],
);
}
}
我們設(shè)置Alignment實例化類里傳入1,1對應為X軸和Y軸最大值.那么應該是右下角.手機上顯示為:
image.png
容器內(nèi)有多個元素需要定位
我們在使用Stack組件進行子組件布局的時候,沒法對單一組件進行定位.這個時候我們就需要使用Stack結(jié)合Align或者Positioned屬性進行實現(xiàn).
Stack配合Align實現(xiàn)單一子組件定位:
| 屬性 | 說明 |
|---|---|
| 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
),
)
],
),
);
}
}
實現(xiàn)效果:
image.png
Stack配合Align實現(xiàn)單一子組件定位:
| 屬性 | 說明 |
|---|---|
| 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
