堆栈小部件在 GridView.builder() 中不起作用答案

【问题标题】：Stack Widget not working inside GridView.builder()堆栈小部件在 GridView.builder() 中不起作用
【发布时间】：2022-11-08 16:12:19
【问题描述】：

我正在尝试进行以下设计：

我将 Firebase 用作我的后端即服务，但我的代码无法正常工作。没有错误，但 UI 视觉效果看起来很时髦。我正在尝试创建一个 GridView.builder() 并显示我的 UI 网格（下面提供的设计），但图像无法正常工作。 . 你会看到浅蓝色是背景色，并且图像应该覆盖整个单元格，甚至在带有文本小部件的容器后面。查看代码：

return GridView.builder(
                      shrinkWrap: true,
                      itemCount: locations.length,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4,
                        mainAxisSpacing: 37,
                        crossAxisSpacing: 37,
                      ),
                      itemBuilder: (context, index) {
                        Location location = locations[index];
                        return MouseRegion(
                          cursor: SystemMouseCursors.click,
                          child: GestureDetector(
                            child: Container(
                              decoration: BoxDecoration(
                                color: blue100,
                                borderRadius: BorderRadius.circular(
                                  20,
                                ),
                              ),
                              child: Stack(
                                children: [
                                  ClipRRect(
                                    child: Image.network(
                                      location.image,
                                      fit: BoxFit.cover,
                                    ),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                  Container(
                                    child: Column(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      children: [
                                        Container(
                                          decoration: BoxDecoration(
                                            color: isLight
                                                ? Color(0xFFF2F2F2)
                                                : Colors.black,
                                            borderRadius: BorderRadius.only(
                                              bottomLeft: Radius.circular(
                                                20,
                                              ),
                                              bottomRight: Radius.circular(
                                                20,
                                              ),
                                            ),
                                          ),
                                          height: isSmall ? 44 : 67,
                                          child: Center(
                                            child: CustomText(
                                              text: locations[index].street,
                                              size: isSmall ? 12 : 15,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                    );

这是此代码导致的原因：

您可以清楚地看到代码在那里，并且一般的东西正在工作，尽管图像不想合作并且以不同的方式调整自身大小。

为什么是这样？它与GridView ..有关吗？

【问题讨论】：

标签： flutter gridview widget stack flutter-web

【解决方案1】：

我也尝试过不使用 Stack，请参阅下面的代码，希望对您有所帮助。在我的代码中添加一些更改，如图像和文本在GridView.builder() 内添加下面的设计代码

Card(
      elevation: 5,
      shadowColor: Colors.grey,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(
          20,
        ),
      ),
      margin: EdgeInsets.all(5),
      child: Container(
        height: 200,
        width: 200,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(
                      10,
                    ),
                    topRight: Radius.circular(
                      10,
                    ),
                  ),
                  image: DecorationImage(
                    fit: BoxFit.fill,
                    image: NetworkImage(
                      'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
                    ),
                  ),
                ),
              ),
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8.0),
              decoration: BoxDecoration(
                color: Colors.grey.shade300,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(20.0),
                  bottomRight: Radius.circular(20.0),
                ),
              ),
              child: Text(
                '300 E Mejor Dr.',
              ),
            ),
          ],
        ),
      ),
    ),

结果屏幕->

【讨论】：

【解决方案2】：

GridView.builder(
          padding: const EdgeInsets.all(10),
          itemCount: itemProvider.sitem.length,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 3 / 2,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10),
          itemBuilder: (context, index) => Card(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)),
                child: GestureDetector(
                  onTap: () {},
                  child: Stack(
                    children: [
                      Container(
                          child: Center(
                        child: Image.network(
                          itemProvider.sitem[index].imageURL.toString(),
                          fit: BoxFit.fill,
                        ),
                      )),
                      Positioned(
                          top: 10,
                          left: 20,
                          child: Text('${itemProvider.sitem[index].name}'))
                    ],
                  ),
                ),

【讨论】：