使图像窗口小部件禁用/变灰

Posted 2021-04-05

我有一堆Image小部件，当它们处于禁用状态时，应该显示为灰色。

有没有办法改变现有图像使它看起来禁用/变灰？

我想避免同时启用图像资源和禁用图像资源增加整体APK大小而不是拥有单个资产。

答案

将小部件设置为容器的子级，并添加foregroundDecoration，如下所示：

Container(
  foregroundDecoration: BoxDecoration(
    color: Colors.grey,
    backgroundBlendMode: BlendMode.saturation,
  ),
  child: child,
)

另一答案

但是不可能直接。对于运行时灰度，您可以使用带有颤动的飞镖image package。使用dart图像包加载图像，应用灰度函数，从灰度图像中读取字节，并将其与Image.memory颤振小部件一起使用。

您可以在不为彩色图像应用灰度的情况下获取字节。

希望有所帮助！

另一答案

根据我自己的个人经验，我发现将滤镜和Opacity结合使用可以很好地为图像提供禁用状态。

上面显示的是我启用的图像之一的示例。

上面显示的是每当您应用滤色器并向图像添加“不透明度”窗口小部件时，该图像看起来如何。

为了实现类似的东西，你需要这个代码：

  new Material(
      elevation: 2.0,
      child: new Opacity(
        opacity: 0.3,
        child: new Container(
          padding: new EdgeInsets.all(20.0),
          child: new Image.asset("assets/<your icon>", fit: BoxFit.cover, color: Colors.grey),
          decoration: new BoxDecoration(
            border: new Border.all(
              width: 2.0, color: const Color(0x40000000)),
              borderRadius: const BorderRadius.all(const Radius.circular(5.0)
            )
          )
        )
      )
  );

另一答案

使用“不透明度”窗口小部件或AbsorbPointer窗口小部件