Flutter GridView 底部项目在使用 Align 嵌套在 Stack 中时被切断

Question

我的应用程序有一个

GridView

显示项目列表。在

GridView

的底部是一个

Align

来过滤项目。都是

Stack

的孩子。问题是

Align

小部件被绘制在

GridView

小部件上，并切断了最底部项目的图像和文本。

我尝试过的解决方案：

1. 迭代

   clipBehavior

   的各种

   Stack

   选项。
2. 用

   Stack

   将

   Container

   包裹在

   height: double.maxFinite

   中。
3. 暂时删除

   Align

   以查看问题所在。
4. 将

   Align

   包裹在

   Positioned.fill

中

Stack(
    children: <Widget> [
      buildGridViewWidget(context, snapshot),
      buildFilterWidget()
    ]
);

GridView buildGridViewWidget(BuildContext context, AsyncSnapshot<List<FoodMenuItem>> snapshot) {
  return GridView.count(
      childAspectRatio: MediaQuery.of(context).size.width /
          (MediaQuery.of(context).size.height / 2.15),
      mainAxisSpacing: 6,
      crossAxisSpacing: 6,
      padding: const EdgeInsets.all(6),
      crossAxisCount: 2,
      children: List.generate(snapshot.data!.length, (index) {
        return MenuItemWidget(snapshot.data![index]);
      })
  );
}

  Align buildFilterWidget() {
    return Align(
      alignment: FractionalOffset.bottomCenter,
      child: Container(
        color: Colors.white,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SizedBox(width: 8),
            buildExpandedFilterOption('all', FilterState.all),
            SizedBox(width: 8),
            buildExpandedFilterOption('burger', FilterState.hamburger),
            SizedBox(width: 8),
            buildExpandedFilterOption('fry', FilterState.fry),
            SizedBox(width: 8),
            buildExpandedFilterOption('shake', FilterState.shake),
            SizedBox(width: 8),
          ],
        ),
      ),
    );
  }

Answer 1

Stack

应替换为

Column

，因为重叠是不可取的。

                Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Expanded(child: buildGridViewWidget(context, snapshot)),
                      buildFilterWidget()
                    ]
                );