在flutter中的GridView上方添加覆盖

Question

我正在尝试向 Flutter 中的 GridView 添加叠加层。我想要实现的效果是我的网格最初显示为被阻止，然后，例如单击按钮后，删除覆盖层并显示底层内容。然而，我所做的每一次尝试都会导致全屏覆盖，或者我必须声明固定高度，但对于自适应的 GridView 来说并不是一个很好的选择。

这就是我正在尝试做的：

但是我的小部件看起来像这样：

这是我的代码：

Stack(
 children: [
    GridView.builder(
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 12,
    mainAxisSpacing: 12), 
    itemCount: myList.length,
    itemBuilder: (
       context,
       index,
    ) {
    return Container(
       width: 50, 
      height:50,
    decoration: BoxDecoration(
    border: Border.all(color: Colors.black)
  ),
    
}),

Center(
   child: Container(
   width: double.infinity, 
   color: Colors.grey,
  ),
)],
),

谢谢大家

Answer 1

尝试这个版本；它可能会解决您的问题：

GridView 包装在 Visibility 小部件中，该小部件根据布尔变量 isOverlayVisible 控制其可见性。覆盖层是使用与 GridView 位于同一级别的半透明容器来实现的。使用 Positioned 小部件来定位按钮（在本例中为 ElevatedButton）以切换 isOverlayVisible 布尔值，从而控制覆盖层的可见性。

bool isOverlayVisible = true; // Define a boolean to toggle the overlay

Stack(
  children: [
    // Your GridView wrapped in a Visibility widget to control its visibility
    Visibility(
      visible: !isOverlayVisible,
      child: GridView.builder(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 12,
          mainAxisSpacing: 12,
        ),
        itemCount: myList.length,
        itemBuilder: (context, index) {
          return Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black),
            ),
            // Your grid item content here
          );
        },
      ),
    ),
    // Semi-transparent overlay container
    Container(
      color: Colors.black.withOpacity(0.5), // Adjust opacity as needed
    ),
    // Your button or trigger to toggle the overlay
    Positioned(
      top: 20, // Adjust position as needed
      left: 20, // Adjust position as needed
      child: ElevatedButton(
        onPressed: () {
          setState(() {
            isOverlayVisible = !isOverlayVisible; // Toggle overlay visibility
          });
        },
        child: Text(isOverlayVisible ? 'Show Content' : 'Hide Content'),
      ),
    ),
  ],
);