我想达到这样的照片。为了简化我创建了一个包含两个容器的堆栈。我想使用Align小部件将小容器置于底部中心,但它不起作用!它始终保持在顶部
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,
),
)
],
),
尝试将容器包装到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,
),
),
],
),
],
),
这个怎么样?
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,
),
),
)
],
),