Flutter 使用 Stack 或任何其他方法重叠具有动态高度的多个小部件

Posted 2023-02-23

【中文标题】Flutter 使用 Stack 或任何其他方法重叠具有动态高度的多个小部件

【英文标题】：Flutter overlap multiple widgets with dynamic height using Stack or any other approach

【发布时间】：2021-03-26 00:13:53

【问题描述】：

到目前为止，Flutter 是一个相当新的框架，在灵活设计方面存在许多挫折。我想要实现的目标可以通过图像更容易地展示出来。

正如您所见，当瓷砖具有边框半径时，例如在图像中，它们必须重叠，以免像第一张图像中那样留下空白空间。我当然使用“堆栈”小部件实现了这一点，方法是为上方的小部件提供固定高度，并在循环中为以下小部件提供固定顶部填充，以便我在第二张和第三张图像中获得视图。但是，这种方法使我无法在每个小部件中使用动态尺寸，因为我无法在构建时获得前一个小部件的高度。

有没有人遇到过这种 UI 模式或类似的模式可以帮助我处理这个案例？感谢您在这方面的任何合作。

【参考方案1】：

我认为您需要自己计算事物，而不是考虑它是如何绘制的，而恰恰是您希望用数学如何绘制它。

当然要找到动态值，可以在 build 函数中使用它：

var screenSize = MediaQuery.of(context).size;
var width = screenSize.width;
var height = screenSize.height;

并在此基础上进行计算。

如果您需要在build 函数运行之前获得这些值，出于initState 或其他原因，您可以使用width 和height 初始化此小部件，如果您知道我的意思，因为width 和height的屏幕在每个小部件中都是一样的。