禁用/灰显图像小部件
禁用/灰显图像小部件
提问于 2017-12-17 10:23:36
我有一堆图像小工具，当它们处于禁用状态时，应该看起来是灰色的。
有没有办法改变现有的图像，使其看起来禁用/灰显？
我希望避免同时使用启用的图像资源和禁用的图像资源，从而增加整体APK大小，而不是使用单个资源。
回答 9
Stack Overflow用户
回答已采纳
发布于 2019-03-03 23:29:49
将小部件设置为容器的子项，并添加foregroundDecoration，如下所示：
Container(
foregroundDecoration: BoxDecoration(
color: Colors.grey,
backgroundBlendMode: BlendMode.saturation,
),
child: child,
)--更新:基于flutter team的this new video，还有另一个小部件。代码基本相同，如下所示：
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.grey,
BlendMode.saturation,
),
child: child,
)但我还是更喜欢使用容器forgroundDecoration的方法，因为容器在相同的地方给了你更多的灵活性。
Stack Overflow用户
发布于 2020-05-29 12:39:28
根据ColorFiltered的flutter文档，可以按如下方式使用ColorFilter.matrix link：
const ColorFilter greyscale = ColorFilter.matrix(<double>[
0.2126, 0.7152, 0.0722, 0, 0,
0.2126, 0.7152, 0.0722, 0, 0,
0.2126, 0.7152, 0.0722, 0, 0,
0, 0, 0, 1, 0,
]);
ColorFiltered(
colorFilter: greyscale,
child: child,
);在这种情况下，ColorFilter将忽略图像的透明区域。
Stack Overflow用户
发布于 2018-06-25 05:00:31
从我个人的经验来看，我发现将滤色器与不透明度相结合，可以很好地为图像提供禁用状态。
上面显示的是我启用的其中一个图像的示例。
上面显示的是当您应用滤色器并向图像添加不透明小部件时图像的外观。
为了实现类似的功能，您需要以下代码：
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)
)
)
)
)
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47851690
复制相关文章
相似问题