Question

[更新]：我得到了解决方案，如果您需要代码，请在下面评论，或者如果您只是想知道我已经在这里写过：

解决方案是将封面图片和关注者与关注对象放在Column（作为单个小部件）中，然后将该列和Align（个人资料图片）都放在Stack中，然后设置固定 heightFactor。

所以它看起来像这样：

Stack(
  children: <Widget>[

    Column(
      children: <Widget>[
        Container(), //The Cover Photo
        Container(
          child: Card() //The Followers and Following Card
        )
      ]
    ),

    Align() //The Profile Picture having fixed heightFactor
  ]
)

该解决方案可在我拥有的所有4台设备上使用+ 2个Android模拟器（其中2个具有16：9的比例，2个具有18：9的比例和2个具有19：9的比例）。

问题如下：

在我的设备上，18:9 Aspect Ratio没有Bottom Overflowing问题。

但是在具有16:9 Aspect Ratio的设备上出现了此问题。

仅当我尝试设置heightFactor Followers & Following小部件中的Align时，这种情况才会发生。

我试图调整Stack中的许多内容，因此我可以克服这一点，但无法获得相似的结果。所以，我坚持下去。

据我所知，我只能使用Stack小部件来重叠。如果有任何可能的选择，请说。

这是我的代码：

Stack(
  children: <Widget>[
    Container(
      width: MediaQuery.of(context).size.width,
      height: 224.0,
      margin: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.circular(8.0),
        image: DecorationImage(
          image: NetworkImage("https://www.eta.co.uk/wp-content/uploads/2012/09/Cycling-by-water-resized-min.jpg"),
          fit: BoxFit.cover
          )
        ),
      ),

      Align(
        heightFactor: 5.0,
        child: Container(
          alignment: Alignment.bottomCenter,
          width: MediaQuery.of(context).size.width,
          height: 96.0,
          margin: EdgeInsets.all(8.0),
          child: Card(
            color: Colors.white,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
            elevation: 0.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Text(
                      "Followers",
                      style: TextStyle(
                        fontFamily: "Nunito",
                        fontWeight: FontWeight.bold,
                        color: Colors.blue
                        ),
                      ),

                      Text(
                        "3000",
                        style: TextStyle(
                          fontFamily: "Nunito",
                          color: Colors.blue
                        ),
                      ),
                    ],
                  ),

                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Text(
                        "Following",
                        style: TextStyle(
                          fontFamily: "Nunito",
                          fontWeight: FontWeight.bold,
                          color: Colors.blue
                        ),
                      ),

                      Text(
                        "0",
                        style: TextStyle(
                          fontFamily: "Nunito",
                          color: Colors.blue
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),

        Align(
          alignment: Alignment.bottomCenter,
          heightFactor: 2.75,
          child: Card(
            color: Colors.transparent,
            elevation: 0.0,
            child: Container(
              alignment: Alignment.bottomCenter,
              width: 96.0,
              height: 96.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  image: NetworkImage("https://cdn140.picsart.com/284302087007201.jpg?c256x256"),
                  fit: BoxFit.fill
                ),
                border: Border.all(width: 4.0, color: Colors.blue)
            ),
          ),
        ),
      ),
    ],
  ),

Answer 1

您已手动提供了窗口小部件的高度，因此它将在较小的屏幕上溢出。因此，您必须根据屏幕提供小部件的高度。您可以使用MediaQuery.of(context).size.height来获取设备的高度。

您还可以将其乘以某个数字以获得百分比的高度。例如，如果您希望屏幕的高度为80％，则可以执行MediaQuery.of(context).size.height * 80

Answer 2

@ yashthakkar1173的答案是正确的。那是做到这一点的一种方式。除此之外，我会说他的解决方案，您可以使用

ConstrainedBox(
   child: Card(),
   constraints: BoxConstraints(
   minHeight: 96.0,
   maxHeight: 106.0,
))

我观察到的是，您不需要将整个视图放在堆栈中，因为它只是前三个重叠的小部件，因此我将堆栈堆叠在一个列中并将MainAxisSize设置为Min。我已经做了类似的事情，或者您可以将其设置为max，这样它将始终填充剩余的所有空间。

如何调整Flutter Stack小部件以防止底部溢出？

2 个答案: