为什么具有对齐方式的Container子级会更改Flutter中的堆栈定位行为?

时间:2019-04-30 16:38:03

标签: flutter flutter-layout

代码

    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],
          )
        ],
      ),
    );

屏幕截图

enter image description here

问题描述

该列中有2个堆栈子级。

对于没有Container(alignment:)子代的第一个堆栈,将根据第一个子代的位置放置第二个和第三个子代。

对于第二个有Container(alignment:)个孩子的堆栈,我有一些疑问:

  1. 为什么第三个孩子Foo而不是第一个孩子CircleAvatar会根据整个宽度放置自己?从第一个堆栈更改此行为。

  2. 第一个孩子CircleAvatar为何更改自己的位置?什么规则适用于当前位置?

  3. 为什么第四个子元素Container(alignment:)会更改堆栈元素的整个布局和宽度?堆栈的宽度是第一个孩子的宽度,但是现在,它成为父容器的宽度。

  4. 第四个孩子的centerRight为什么与第二个孩子'Mia B'而不是第一个孩子CircleAvatar对齐?我以为第一个孩子是结盟基地。但是现在,第四个孩子与第二个孩子具有相同的X轴。

0 个答案:

没有答案