Question

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

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

我希望避免同时启用图片资源和已停用的图片素材增加整体APK尺寸，而不是拥有单一资源。

Answer 1

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

Answer 2

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

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

Answer 3

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

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

希望有所帮助！

Answer 4

根据我自己的亲身经历，我发现将滤色器与不透明度结合使用可以很好地使图像处于禁用状态。

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

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

要实现类似的功能，您需要以下代码：

  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 5

如果您的孩子是.png图像，则在您放置TECH_ID YRTR pre_drop_courses post_drop_courses unchanged 71795 20213 BUSN 2100,BUSN 2400,ACCT 2254 BUSN 1102,BUSN 1102,BUSN 1102 FALSE 71795 20183 BUSN 1102,BUSN 1102,BUSN 1102 BUSN 2100,BUSN 2400,ACCT 2254 FALSE 73677 20183 BIOL 2041,BIOL 2041,BIOL 2041 BIOL 2042,BIOL 2042,BIOL 2042 FALSE 73677 20193 BIOL 2042,BIOL 2042,BIOL 2042 BIOL 2041,BIOL 2041,BIOL 2041 FALSE时，flutter将以灰色背景呈现它。使用与小部件背景相同的颜色，您将获得完美的禁用图像

structure(list(TECH_ID = c("00000108", "00000108", "00000270"
), YRTR = c("20173", "20173", "20183"), pre_drop_courses = c("MUSC 2231,MUSC 2281,MUSC 2231,MUSC 2281,MUSC 2231,MUSC 2281", 
"MUSC 2231,MUSC 2281,MUSC 2231,MUSC 2281,MUSC 2231,MUSC 2281", 
"ACCT 1853,ACCT 1853,ACCT 1853"), post_drop_courses = c("MUSC 2231,MUSC 2281,MUSC 2231,MUSC 2281,MUSC 2231,MUSC 2281", 
"MUSC 1116,MUSC 1116,MUSC 1116", "ACCT 1853,ACCT 1853,ACCT 1853"
), unchanged = c(TRUE, FALSE, TRUE)), row.names = c(NA, 3L), class = "data.frame")

如果要在用户单击时更改图像的颜色，可以执行以下操作：

Colors.grey

Answer 6

使用不透明度小部件或AbsorbPointer小部件

Answer 7

我根据上面的标记答案创建了一个小部件：

import 'package:flutter/material.dart';

class DisabledRenderer extends StatelessWidget {
  final Widget child;
  final bool enabled;
  final double padding;
  final double boxWidth;
  final Color boxColor;
  final double boxRadius;

  DisabledRenderer(
      {@required this.child,
      @required this.enabled,
      this.padding = 2,
      this.boxWidth = 2,
      this.boxColor = Colors.white,
      this.boxRadius = 5.0});

  @override
  Widget build(BuildContext context) => Material(
        elevation: 2.0,
        child: Opacity(
          opacity: enabled ? 1 : 0.3,
          child: Container(
            padding: EdgeInsets.all(padding),
            child: child,
            decoration: BoxDecoration(
              border: Border.all(width: boxWidth, color: boxColor),
              borderRadius: BorderRadius.all(Radius.circular(boxRadius)),
            ),
          ),
        ),
      );
}

在使用中它看起来像这样：

DisabledRenderer(enabled: false, child: Icon(MdiIcons()['speedometer'],);

enable bool通常与StreamBuilder一起使用以侦听模型事件。如何执行此操作，请搜索Flutter Bloc模式和StreamBuilder

Answer 8

我改编了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 9

我认为可以使用alpha来做到这一点，它可以产生禁用的效果。这个技巧也适用于黑暗和明亮的主题，因为它继承自父级。我使用了cardColor，您可以选择任何主题并应用颜色。

Theme.of(context).cardColor.withAlpha(180)

Answer 10

截图：

代码：

ColorFiltered(
  colorFilter: ColorFilter.mode(
    Colors.black.withOpacity(0.5), // 0 = Colored, 1 = Black & White
    BlendMode.saturation,
  ),
  child: Image.asset(
    'chocolate_image',
    fit: BoxFit.cover,
  ),
)

Source

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

10 个答案: