我想要实现像这张照片一样的效果。为了简化,我创建了一个包含两个容器的堆栈。我想使用对齐小部件将小容器底部居中,但它不起作用!它始终保持在顶部
Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 170,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(0),
bottomRight: Radius.circular(0))),
// child: Image.network(tutorImage),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: 60,
height: 60,
color: Colors.black,
),
)
],
),
最佳答案
您可以在堆栈内使用 Positioned.fill 和 Align:
Column(
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 170,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.only(bottomLeft: Radius.circular(0), bottomRight: Radius.circular(0))),
// child: Image.network(tutorImage),
),
Positioned.fill(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
width: 60,
height: 60,
color: Colors.black,
),
),
)
],
),
],
);
关于dart - Flutter:堆栈中底部中心小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55054721/