Stack组件中子组件使用Positioned定位到最底部后,Positioned组件的宽度无法适应屏幕宽度,
Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
color: Colors.blue,
child: Text("top"),
),
Positioned(
bottom: 30,
child: Container(
color: Colors.red,
child:Text("abd"),
),
),
],
)
这样Positioned定位到最下面了,但是Container宽度不能撑满整个屏幕,有两种方法可以解决以上问题:
方法1:
给Container组件的width属性设置为MediaQuery.of(context).size.width:
Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
color: Colors.blue,
child: Text("top"),
),
Positioned(
bottom: 30,
child: Container(
color: Colors.red,
width: MediaQuery.of(context).size.width,
child: Text("abd"),
),
),
],
)
方法2:
直接使用Align组件
Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
color: Colors.blue,
child: Text("top"),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.yellow,
width: double.infinity,
child: Text("bottom"),
),
),
],
)
记录问题,希望和大家一起学习!