final _child1 = CircleAvatar(backgroundColor: Colors.blueGrey, radius: 100.0);
final _child2 = Container(child: Text('Mia B', style: TextStyle(fontSize: 20.0, color: Colors.white)));
final _child3 = Positioned(top: 35.0, left: 35.0, child: Text('Foo', style: TextStyle(fontSize: 20.0,color: Colors.red)));
final _child4 = Container(alignment: Alignment.centerRight, child: Text('Bar', style: TextStyle(fontSize: 20.0,color: Colors.red)));
return Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[
Stack(
alignment: Alignment(0.6, 0.6),
children: [_child1, _child2, _child3],
),
Stack(
alignment: Alignment(0.6, 0.6),
children: [_child1, _child2, _child3, _child4],
)
],
),
);
该列中有2个堆栈子级。
对于没有Container(alignment:)
子代的第一个堆栈,将根据第一个子代的位置放置第二个和第三个子代。
对于第二个有Container(alignment:)
个孩子的堆栈,我有一些疑问:
为什么第三个孩子Foo
而不是第一个孩子CircleAvatar
会根据整个宽度放置自己?从第一个堆栈更改此行为。
第一个孩子CircleAvatar
为何更改自己的位置?什么规则适用于当前位置?
为什么第四个子元素Container(alignment:)
会更改堆栈元素的整个布局和宽度?堆栈的宽度是第一个孩子的宽度,但是现在,它成为父容器的宽度。
第四个孩子的centerRight
为什么与第二个孩子'Mia B'而不是第一个孩子CircleAvatar对齐?我以为第一个孩子是结盟基地。但是现在,第四个孩子与第二个孩子具有相同的X轴。