如何在 Flutter 中的图像上叠加图标？答案

【问题标题】：How to overlay an icon on an image in Flutter?如何在 Flutter 中的图像上叠加图标？
【发布时间】：2021-02-12 23:23:35
【问题描述】：

我有一个交错的 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,
            ),
          ),
        );

这就是结果的样子：

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

【问题讨论】：

您是否尝试过在堆栈中使用定位小部件？
是的，我尝试使用堆栈，但它没有在中心正确对齐。

标签： flutter user-interface dart

【解决方案1】：

您使用了正确的小部件Stack，但也许您错过了一些东西。
我用fit: StackFit.expand, 将Container 包裹在Stack 上以填满所有空间，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,
                ),
              ),
            )

【讨论】：

【解决方案2】：

使用具有 center 对齐属性的 Stack 小部件。

child: Stack(
  alignment: Alignment.center,
  children: <Widget>[
     //Image
     //Icon
  ],
),

【讨论】：

试过了，但项目在交错网格中移位。
也许可以尝试在装饰中使用您的图像： BoxDecoration(image: DecorationImage()) 并将图标作为容器的子项。