Question

我正在使用align将小部件放置在堆栈中。当我在堆栈中的任何孩子中使用align时，堆栈将全屏显示。否则，堆栈的高度就是孩子的最高。我在这里很困惑。不使用align来对齐堆栈中的子项吗？

这是我的代码：

   bottomNavigationBar: Stack(
    children: <Widget>[
      Container(
        color: Colors.greenAccent,
        width: double.infinity,
        height: 45,
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: Container(
         width: 80,
         height: 80,
          decoration: BoxDecoration(color: Colors.deepPurpleAccent, shape: BoxShape.circle),
          child: IconButton(icon: Icon(Icons.search), onPressed: (){}),
        ),
      )

    ],
  )

现在，当我从第二个子级中删除“对齐”小部件时，堆栈便与其子级一样大。

Answer 1

您没有为其Align和widthFactor赋予heightFactor小部件值，根据Align class documentation ，您所提到的行为是可以预期的：

如果此小部件的尺寸受到限制并且widthFactor和heightFactor为null，则它将尽可能大。

为确认这一点，我为1.0和widthFactor都分配了值heightFactor，并返回到其预期的大小（较大的窗口小部件{{1} }）：

FloatingActionButton

Answer 2

没有问题。它应该占据所有屏幕。

堆栈的大小由未定位的子级定义。如果您使用Align，则Stack没有限制，它将展开。

如果要在小部件之间建立联系，则必须改为使用定位小部件。

https://api.flutter.dev/flutter/widgets/Stack-class.html

来自文档：

堆栈本身的大小将包含所有未定位的子项，这些子项根据对齐方式定位（在从左到右的环境中默认为左上角，从右到左为默认右上角环境）。

还

然后根据已定位的子项的顶部，右侧，底部和左侧属性将它们相对于堆栈放置。

是的，它会混淆一段时间，即使经验丰富的开发人员有时也会在使用Stack时混淆。这是最难掌握的小部件之一。

Answer 3

堆栈将与其未定位的子代一样大。 Align使堆栈与我上面的代码中的屏幕一样大。将堆栈限制为与其内容一样大。我将纸叠包裹在一个容器中，并给它固定了高度。

现在，堆栈已限制其高度。因此，当我现在在其子级中使用align时。它只有包含它的容器高。

简而言之，只需用固定高度的容器包裹堆栈即可。

堆栈内的对齐小部件占据全屏

3 个答案: