flutter - 如何在Flutter中在图像上叠加图标？

Question

我有一个如下所示的交错GridView。在网格的每个项目中，我都试图将图标放置在其中心，并覆盖图像的顶部。我尝试使用堆栈，但图标似乎已移位。
这是我的代码:

Scaffold(
          body: Align(
            alignment: Alignment.topCenter,
            child: StaggeredGridView.countBuilder(
              crossAxisCount: 4,
              itemCount: 8,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(6)),
                    child: Image.network(
                      'https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
                      fit: BoxFit.fitHeight,
                    ),
                  ),
                );
              },
              staggeredTileBuilder: (int index) =>
                  new StaggeredTile.count(2, index.isEven ? 2 : 3),
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
            ),
          ),
        );

结果是这样的:

这就是我一直在努力实现的目标:

Answer 1

您使用了正确的小部件Stack，但也许您错过了一些东西。
我用Container用Stack包裹了fit: StackFit.expand,，以填充所有空间，并且Positioned将位于中间
因此，这里有完整的代码，它可能会有所帮助:

Scaffold(
              body: Align(
                alignment: Alignment.topCenter,
                child: StaggeredGridView.countBuilder(
                  crossAxisCount: 4,
                  itemCount: 8,
                  itemBuilder: (BuildContext context, int index) {
                    return Stack(
                      fit: StackFit.expand,
                      children: [
                        Container(
                          child: ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(6)),
                            child: Image.network(
                              'https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
                              fit: BoxFit.fitHeight,
                            ),
                          ),
                        ),
                        Positioned(child: Icon(Icons.play_arrow))
                      ],
                    );
                  },
                  staggeredTileBuilder: (int index) =>
                  new StaggeredTile.count(2, index.isEven ? 2 : 3),
                  mainAxisSpacing: 4.0,
                  crossAxisSpacing: 4.0,
                ),
              ),
            )