时间戳

首页 > 解决方案 > 如何向具有图像的容器添加突出显示颜色？

flutter - 如何向具有图像的容器添加突出显示颜色？

问题描述

我有一个带有 image 属性的容器。该容器被包裹在一个手势检测器中。长按时，会打开一个对话框，其中显示处理图像的多个选项。
我想为图像添加高亮颜色，以便在用户长按和高亮颜色时看到。我尝试使用墨水瓶，但没有任何反应。有什么办法可以达到这个效果吗？

GestureDetector(
        onLongPress: () {
          buildPeepShow(context, widget.post);
        },
        child: Material(
          color: Colors.transparent,
                  child: InkWell(
            splashColor: Colors.black.withAlpha(100),
                    child: Stack(
              children: [
                Container(
                  decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black.withOpacity(0.3),
                            spreadRadius: 0.3,
                            blurRadius: 8.0)
                      ],
                      color: Colors.yellow,
                      borderRadius: BorderRadius.circular(16.0),
                      image: DecorationImage(
                          image: CachedNetworkImageProvider(
                              widget.post.downloadURL[0]),
                          fit: BoxFit.cover)),
                ),
                Visibility(
                  visible: widget.post.downloadURL.length > 1 ? true : false,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 5.0, right: 8.0),
                    child: Image.asset(
                      'images/more.png',
                      scale: 10,
                    ),
                  ),
                ),
              
              ],
            ),
          ),
        ),
      );

标签： flutterdartflutter-layout

解决方案

用这个替换你的代码片段

return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                    color: Colors.black.withOpacity(0.3),
                    spreadRadius: 0.3,
                    blurRadius: 8.0)
              ],
              color: Colors.yellow,
              borderRadius: BorderRadius.circular(16.0),
              image: DecorationImage(
                  image: CachedNetworkImageProvider(
                      widget.post.downloadURL[0]),
                  fit: BoxFit.cover)),
        ),
        Visibility(
          visible: widget.post.downloadURL.length > 1 ? true : false,
          child: Material(
            child: InkWell(
              splashColor: Colors.red, // or the color you want
              onLongPress: (){
                //show your on long press event
              },
              child: Padding(
                padding: const EdgeInsets.only(top: 5.0, right: 8.0),
                child: Image.asset(
                  'images/more.png',
                  scale: 10,
                ),
              ),
            ),
          ),
        ),
      ],
    );

推荐阅读