堆棧內的對齊小部件占據全屏

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: (){}),
        ),
      )

    ],
  )

現在，當我從第二個子級中刪除Align小部件時，堆棧與其子級一樣大。

Answer 1

您沒有為其widthFactor小部件和heightFactor提供Align小部件值，並且根據Align類文檔，您提到的行為是預期的：

如果小部件的尺寸受到限制並且widthFactor和heightFactor為null，則它將盡可能大。

為了確認這一點，我為widthFactor和heightFactor都分配了值1.0 ，並返回到其預期的大小（較大的小部件的大小，即FloatingActionButton ）：

 Align(
        alignment: Alignment.bottomCenter,
        widthFactor: 1.0,
        heightFactor: 1.0,
        child: Container(
          width: 80,
          height: 80,
          decoration: BoxDecoration(color: Colors.deepPurpleAccent, shape: BoxShape.circle),
          child: IconButton(icon: Icon(Icons.search), onPressed: (){}),
        ),
      )

Answer 2

沒問題。 它應該占據所有屏幕。

堆棧大小由未定位的子項定義。 如果使用Align，則Stack沒有限制，它將擴展。

如果要在小部件之間建立聯系，則必須改用Positioned小部件。

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

從文檔：

堆棧本身的大小將包含所有未定位的子項，這些子項將根據對齊方式定位（在從左到右的環境中，默認值為左上角；在從右到左的環境中，默認值為右上角）。

也，

然后根據已定位的子項的頂部，右側，底部和左側屬性相對於堆棧放置它們。

是的，這會造成混亂，即使有經驗的開發人員有時也會在使用Stack時感到困惑。 這是最難掌握的小部件之一。

Answer 3

堆棧將和未定位的子堆棧一樣大。 Align使堆棧與我上面的代碼中的屏幕一樣大。 將堆棧限制為與其內容一樣大。 我將紙疊包裹在一個容器中，並給它固定了高度。

現在，堆棧已達到其高度限制。 因此，當我現在在其子級中使用align時。 它只有和包含它的容器一樣高。

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