Question

我想创建一个小部件，它是带有网络图像的圆形按钮。轻击时应该会产生涟漪效应。

我已经尝试过使用Inkwell，但是即使type: MaterialType.circle仍在加载图像后，它仍显示为Square图像，并且不会裁剪为Circle。

return Material(
          elevation: 0,
          type: MaterialType.circle,
          color: Colors.grey[200],
          child: Ink.image(
            image: NetworkImage(url),
            fit: BoxFit.cover,
            width: 120.0,
            height: 120.0,
            child: InkWell(
              onTap: () {},
              child: null,
            ),
          ),

编辑

谢谢大家！几乎可以使用以下代码：

但是如何在加载时使网络图像淡入？

FadeInImage.memoryNetwork不是ImageProvider，它是一个小部件，我该如何实现？

return Material(
            type: MaterialType.circle,
            clipBehavior: Clip.hardEdge,
            color: Colors.grey[200],
            child: Ink.image(
              image: NetworkImage(url),
              fit: BoxFit.fill,
              child: InkWell(
                onTap: () {},
                child: null,
              ),
            ));

Answer 1

只需将Clip.hardEdge小部件中的clipBehavior属性设置为Material。

Material(
      elevation: 0,
      type: MaterialType.circle,
      clipBehavior: Clip.hardEdge,
      ...

别忘了重新启动应用程序。

此处有更多信息：https://docs.flutter.io/flutter/material/Material/clipBehavior.html

更新

使用FadeInImage小部件

    Material(
              elevation: 0,
              clipBehavior: Clip.hardEdge,
              type: MaterialType.circle,
              color: Colors.grey[200],
              child: Stack(
                children: [
                  FadeInImage.assetNetwork(
                    placeholder: "resources/your_placeholder_image.png",
                    image:
                        'https://img.depor.com/files/ec_article_multimedia_gallery/uploads/2018/07/05/5b3e3ad01bd47.jpeg',
                    fit: BoxFit.cover,
                    width: 120.0,
                    height: 120.0,
                  ),
                  Positioned.fill(
                    child: Material(
                        color: Colors.transparent,
                        child: InkWell(
                            splashColor: Colors.lightGreenAccent, onTap: () {})),
                  ),
                ],
              ),
            ),

具有网络图像和涟漪效果的“创建圆圈”按钮

1 个答案: