需要一个解决方法，使 Indexedstack 始终与最大的子级一样大

Question

我有一个索引堆栈。第一个子控件的内容是第二个子控件的一半，但第一个子控件的高度与第二个子控件的高度相同。由于设计，这似乎是预期的结果，但它很烦人，因为当我滚动第一个子小部件时，底部有一堆额外的空间。我该如何解决这个问题？

Flutter团队为什么要这样设计呢？为什么不根据小部件而不是根据最大的子部件给小部件子部件高度？

Answer 1

该解决方案保留了状态，这是 IndexedStack 的关键功能之一。大多数发布的解决方案都会在索引更改时删除状态，而我需要保留状态。

如果处于活动状态，Widget 高度没有限制；如果处于非活动状态，则将其高度限制为 1 像素 SizedBox。这使得活动的 Widget 变得最大，因此您的 Widget 会以其个人尺寸呈现，而无需增加空间。

IndexedStack(
  index: selectedIndex,
  children: [
    SizedBox(
        height: selectedIndex == 0 ? null : 1,
        child: Widget1()),
    SizedBox(
        height: selectedIndex == 1 ? null : 1,
        child: Widget2()),
    SizedBox(
        height: selectedIndex == 2 ? null : 1,
        child: Widget3())
  ],
);

Answer 2

我今天遇到了完全相同的问题。我的解决方法是仅渲染基于索引号可见的堆栈。

      Widget _buildPage2() {
        if(index != 1) { // Empty container
          return Container();
        }
        return Column( // Actual Widget which has a different height
          children: <Widget>[]
        );
     }

我还没弄清楚如何开始controller.animateTo工作。

编辑

我controller.animateTo通过触发一个Future.delayed事件来开始工作。您可以使用更好的方法，如另一篇文章WidgetBindings中所述。