Flutter中使用Stack和Positioned這兩個組件來配合實現(xiàn)絕對定位。Stack允許子組件堆疊，而Positioned用于根據(jù)Stack的四個角來確定子組件的位置
1. Stack 介紹
Stack 源碼定義：
Stack({
Key? key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.clipBehavior = Clip.hardEdge,
List<Widget> children = const <Widget>[],
})
-
alignment：此參數(shù)決定如何去對齊沒有定位（沒有使用Positioned）或部分定位的子組件。所謂部分定位，在這里特指沒有在某一個軸上定位：left、right為橫軸，top、bottom為縱軸，只要包含某個軸上的一個定位屬性就算在該軸上有定位。 -
textDirection：和Row、Wrap的textDirection功能一樣，都用于確定alignment對齊的參考系，即：textDirection的值為TextDirection.ltr，則alignment的start代表左，end代表右，即從左往右的順序；textDirection的值為TextDirection.rtl，則alignment的start代表右，end代表左，即從右往左的順序。 -
fit：此參數(shù)用于確定沒有定位的子組件如何去適應(yīng)Stack的大小。StackFit.loose表示使用子組件的大小，StackFit.expand表示擴(kuò)伸到Stack的大小。 -
clipBehavior：此屬性決定對超出Stack顯示空間的部分如何剪裁，Clip枚舉類中定義了剪裁的方式，Clip.none表示不裁剪，Clip.hardEdge表示快速剪裁，但保真度較低，不應(yīng)用抗鋸齒。Clip.antiAlias比Clip.hardEdge慢一點，但邊緣平滑。Clip.antiAliasWithSaveLayer最慢，裁剪邊緣效果最好，但一般不用
示例1
class StackDemo1 extends StatelessWidget {
const StackDemo1({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
alignment: AlignmentDirectional(0, 0),
children: [
Image.network(
"https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
width: 200,
height: 200,
),
Container(
width: 159,
height: 150,
color: Colors.red,
),
Text(
"Hello World",
style: TextStyle(backgroundColor: Colors.white),
),
],
);
}
}
image.png
2. Positioned
Positioned 源碼定義：
const Positioned({
Key? key,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
required Widget child,
})
left、top 、right、 bottom分別代表離Stack左、上、右、底四邊的距離。width和height用于指定需要定位元素的寬度和高度。注意，Positioned的width、height 和其它地方的意義稍微有點區(qū)別，此處用于配合left、top 、right、 bottom來定位組件，舉個例子，在水平方向時，你只能指定left、right、width三個屬性中的兩個，如指定left和width后，right會自動算出(left+width)，如果同時指定三個屬性則會報錯，垂直方向同理。
Stack + Positioned 示例
示例1
class PositionedDemo1 extends StatelessWidget {
const PositionedDemo1({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
clipBehavior: Clip.none, //裁剪方式
children: [
Image.network(
"https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
width: 200,
),
Positioned(
left: 20,
bottom: -50,
child: Container(
width: 150,
height: 150,
color: Colors.red,
),
),
Positioned(
left: 20,
bottom: 20,
child: Text(
"來戰(zhàn)斗吧！",
style: TextStyle(fontSize: 20, color: Colors.orange),
),
),
],
);
}
}
image.png
示例2
class _MSHomeContentState extends State<MSHomeContent> {
void IconButtonEvent() {
setState(() {
isFavorite = !isFavorite;
});
}
var isFavorite = false;
@override
Widget build(BuildContext context) {
return Stack(
children: [
Image.network(
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091318%2F5g51pcfwqed5g51pcfwqed.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652509694&t=41fc509066338e4806331e5708055ab9",
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 8),
color: Color.fromARGB(200, 0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"唯美風(fēng)景",
style: TextStyle(fontSize: 18, color: Colors.white),
),
IconButton(
onPressed: IconButtonEvent,
icon: Icon(
Icons.favorite,
color: isFavorite ? Colors.red : Colors.white,
),
)
],
),
),
),
],
);
}
}
image.png
示例3
class StackDemo4 extends StatelessWidget {
const StackDemo4({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
//通過ConstrainedBox來確保Stack占滿屏幕
return ConstrainedBox(
constraints: BoxConstraints.expand(),
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Container(
color: Colors.red,
child: Text("Hello World"),
),
Positioned(left: 20, child: Text("I am Jack")),
Positioned(top: 20, child: Text("Your friend")),
],
),
);
}
}
image.png
由于第一個子文本組件Text("Hello world")沒有指定定位，并且alignment值為Alignment.center，所以它會居中顯示。第二個子文本組件Text("I am Jack")只指定了水平方向的定位(left)，所以屬于部分定位，即垂直方向上沒有定位，那么它在垂直方向的對齊方式則會按照alignment指定的對齊方式對齊，即垂直方向居中。對于第三個子文本組件Text("Your friend")，和第二個Text原理一樣，只不過是水平方向沒有定位，則水平方向居中。
示例4
class StackDemo5 extends StatelessWidget {
const StackDemo5({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
//通過ConstrainedBox來確保Stack占滿屏幕
return ConstrainedBox(
constraints: BoxConstraints.expand(),
child: Stack(
alignment: AlignmentDirectional.center,
fit: StackFit.expand, // 未定位widget占滿Stack整個空間
children: [
Positioned(left: 20, child: Text("I am Jack")),
Container(
color: Colors.red,
child: Text("Hello World"),
),
Positioned(top: 20, child: Text("Your friend")),
],
),
);
}
}
image.png
可以看到，由于第二個子文本組件沒有定位，所以fit屬性會對它起作用，就會占滿Stack。由于Stack子元素是堆疊的，所以第一個子文本組件被第二個遮住了，而第三個在最上層，所以可以正常顯示。
