Stack Widget 在 GridView.builder() 内不工作

Question

我正在尝试做如下设计：

我正在使用 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 有问题..?

Answer 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.',
              ),
            ),
          ],
        ),
      ),
    ),

结果屏幕->

Stack Widget 在 GridView.builder() 内不工作

Stack Widget not working inside GridView.builder()

stack

gridview

widget

flutter

flutter-web