使图像小部件禁用/变灰

Question

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

有没有一种方法可以更改现有图像，使其看起来已禁用/变灰？

我想避免同时启用图像资产和禁用图像资产来增加整体APK大小，而不要增加单个资产。

Answer 1

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

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

-更新：根据flutter团队的新视频，还有另一个小部件。代码基本相同，就像这样：

ColorFiltered(
  colorFilter: ColorFilter.mode(
    Colors.grey,
    BlendMode.saturation,
  ),
  child: child,
)

但是我仍然更喜欢使用Container forgroundDecoration的方法，因为container在同一位置为您提供了更多的灵活性。

Answer 2

根据 ColorFiltered 的颤振文档，您可以使用 ColorFilter.matrix链接，如下所示：

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 将忽略图像的透明区域。

Answer 3

根据我自己的个人经验，我发现将滤色器与不透明度相结合可以很好地为图像提供禁用状态。

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

上面显示的是当您应用滤色器并向图像添加不透明度小部件时该图像的外观。

为了实现类似的东西，您需要以下代码：

  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)
            )
          )
        )
      )
  );

Answer 4

我改编了 Mark O'Sullivan 的帖子并创建了一个通用小部件：

要使用它：

text = Text("Hellow World");
GrayedOut(text);

或者

GrayedOut(text, grayedOut: true);

和班级

class GrayedOut extends StatelessWidget {
  final Widget child;
  final bool grayedOut;

  GrayedOut(this.child, {this.grayedOut = true});

  @override
  Widget build(BuildContext context) {
    return grayedOut ? new Opacity(opacity: 0.3, child: child) : child;
  }
}

Answer 5

如果你的孩子是一个 .png 图像，如果你把Colors.grey. 使用与小部件背景相同的颜色，您将拥有完美的禁用图像

ColorFiltered(
    colorFilter: ColorFilter.mode(
        Colors.white,
        BlendMode.saturation,
    ),
    child: child,
)

如果您想在用户单击时更改图像的颜色，您可以这样做：

GestureDetector(

    onTap: () => {

        setState((){

            _active = !_active;

        })
    
    },
    child: ColorFiltered(
    
        colorFilter: _active ? ColorFilter.mode(
                                                                                 
            Colors.transparent,                                                          
            BlendMode.saturation,

        ) : ColorFilter.mode(
                                                                         
            Colors.white,
            BlendMode.saturation,
        ),

        child: Image(

            image: Image.asset("assets/test.png").image
           
        ),
    ),
)

Answer 6

这个小部件实现了Google Flutter 工程师 @dnfield在Flutter GitHub 问题上所说的内容，它适用于具有透明背景的图像。

import 'package:flutter/widgets.dart';

class GrayscaleColorFiltered extends StatelessWidget {
  final Widget child;

  const GrayscaleColorFiltered({Key? key, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ColorFiltered(
      colorFilter: 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,
      ]),
      child: child,
    );
  }
}