[英]Flutter: bottom center widget in stack
I wanna achieve like this pic. 我想实现像这张照片。 to simplify I created a stack that contains two Containers.
为简化起见,我创建了一个包含两个容器的堆栈。 i want to bottom center the small container using Align widget but its not working!
我想使用Align小部件将小容器的底部居中,但无法正常工作! it is always remaining at the top
它始终保持在顶部
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,
),
)
],
),
You can use the Positioned.fill with Align inside a Stack: 您可以在堆栈中使用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,
),
),
)
],
),
],
);
How about this? 这个怎么样?
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(
bottom: -30,
left: 0,
right: 0,
child: Center(
child: Container(
width: 60,
height: 60,
color: Colors.black,
),
),
)
],
),
Try wrap your container into a Column and use axis align properties. 尝试将容器包装到Column中并使用轴对齐属性。
Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
//width: MediaQuery.of(context).size.width, In my test this line causes bad behavior
height: 170,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(0),
bottomRight: Radius.circular(0))),
// child: Image.network(tutorImage),
),
Column(
mainAxisAlignment: MainAxisAlignment.end, // start at end/bottom of column
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Center( // center in horizontal axis
child: Container(
width: 60,
height: 60,
color: Colors.black,
),
),
],
),
],
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.