FlutterGridView覆盖问题：过滤部分防止单击选项

Question

我正在构建一个flutter应用程序，该应用在gridview.builder中显示优惠列表。在网格上方，我有一个过滤部分，该部分在滚动时会平稳扩展和崩溃。此过滤部分包含几个应单击并悬停的过滤按钮。

，无论如何，我正在遇到一个问题：

当过滤部分扩展时，所有过滤选项出现 视觉上，但它们不能单击或悬停。 它似乎是一个看不见的覆盖层正在覆盖它们。 只能单击/悬停在第一个按钮（第二行的上尖），其余的 完全没有反应

GridView本身可以正常工作，并且卡片位置 正确

App结构
过滤部分放置在报价网格上方。
• 过滤部分的高度基于 _fisfilteringhidden.

提供网格包裹在列内的扩展的小部件中 填充可用空间 AnimatedContainer（高度：FelteringHeight）用于防止 折叠过滤部分时重叠问题。

代码片段：

•     AnimatedContainer(
    duration: const Duration(milliseconds: 600),
    height: filteringHeight, // Adjust height dynamically
  ),
  
  Expanded(
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: GridView.builder(
        controller: _scrollController, // Track scrolling
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          childAspectRatio: 3 / 4,
        ),
        itemCount: offerData.length,
        itemBuilder: (context, index) {
          return buildOfferCard(
            offerData[index]['image']!,
            offerData[index]['title']!,
            offerData[index]['description']!,
            offerData[index]['discount']!
          );
        },
      ),
    ),
  ),

我尝试了什么
• 检查覆盖问题

I在我的过滤器按钮ONTAP方法中添加了一个debugprint语句，除非按钮在第一行中，否则它不会触发。 调试的不透明度

i我将过滤部分包裹在一个红色的半透明容器中，发现正在视觉上渲染扩展的过滤区域，但有些东西覆盖了下部。

忽略测试的忽略和吸收室

将AnimatedContainer包装在一个忽略的pointer中，确认该区域正在拦截水龙头。

电势原因 i怀疑该问题是由AnimatedContainer（高度：FelteringHeight）引起的，它可能会在过滤选项上创建透明但交互式覆盖。这个无形的层阻止了与按钮的交互。

问题

如何修改布局，以防止过滤光动画阻止交互作用，同时仍然确保平稳的展开/折叠运动并将非扩展部分保持在过滤选项下？

任何帮助将不胜感激！ 🚀 我找到了修复程序。问题与使用过滤选项的动画容器有关。在为容器着色时，我意识到容器的高度不如显示的过滤器的高度。我扩大了高度以覆盖所有过滤器。然后，由于代码以下行，动画容器在向上悬停时并未完全折叠回：

double filteringHeight = _isFilteringHidden ? 0:80;

i必须将动画过滤器选项容器设置为0至-80，以完全折叠，消失并允许卡向上移动。

double filteringHeight = _isFilteringHidden ? -80:80;
      
AnimatedContainer(
            duration: const Duration(milliseconds: 600),
            curve: Curves.easeInOut,
            height: filteringHeight+80, // Adjust height dynamically
            child: AnimatedOpacity(
              duration: const Duration(milliseconds: 600),
              opacity: _isFilteringHidden ? 0.0 : 1.0, // Fade effect
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                child: Wrap(
                  alignment: WrapAlignment.center,
                  spacing: 8,
                  runSpacing: 8,
                  children: [
                    buildFilterButton("All"),
                    buildFilterButton("Cafes"),
                    buildFilterButton("Restaurants"),
                    buildFilterButton("Bars"),
                    buildFilterButton("Culture"),
                    buildFilterButton("Beauty"),
                    buildFilterButton("Wellness"),
                    buildFilterButton("Family"),
                    buildFilterButton("Sports"),
                    buildFilterButton("Tours"),
                    buildFilterButton("Services"),
                  ],
                ),
              ),
            ),
          ),

现在所有过滤器选项都可以悬停，可单击。