HarmonyOS鸿蒙Next中如何对应用到所有页面进行一键置灰

HarmonyOS鸿蒙Next中如何对应用到所有页面进行一键置灰 有如下场景，

根据服务端下发的字段判断应用页面是否需要一键置灰，如果服务端告诉端侧需要一键置灰，则将所有页面设置成黑白色。该场景主要应对国家特定事件。

在iOS上的实现如下:

+ (void)enableGlobalGray {
    UIWindow *window = [[[UIApplication sharedApplication] delegate] window];
    NSNumber *nvalue = @(0.03);
    window.layer.filters = @[({
        CIFilter *filter = [NSClassFromString(@"CAFilter") filterWithName:@"colorSaturate"];
        [filter setValue:nvalue forKey:@"inputAmount"];
        filter;
    })];
}

在鸿蒙上如何实现此功能？


更多关于HarmonyOS鸿蒙Next中如何对应用到所有页面进行一键置灰的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

一键置灰可以通过选择设置页面根组件的如下通用属性：

1、.saturate(0) https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-image-effect-V5#saturate

2、.grayscale(1) https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-image-effect-V5#grayscale

saturate(0)示例代码：

@Entry
@Component
struct Index {
  build() {
    Row {
      Column {
        Image($r("app.media.icon"))
          .autoResize(true)
          .width(100)
          .height(100)
      }
    }
    .width('100%')
    .height('100%')
    .saturate(0)
  }
}

.grayscale(1)示例代码：

@Entry
@Component
struct ArkUIClubTest {
  @State saturateValue: number = 0;

  build() {
    Column({ space: 10 }) {
      Row({ space: 10 }) {
        Text('Red Text')
          .fontColor(Color.Red)
          .fontSize(22)
        Text('Blue Text')
          .fontColor(Color.Blue)
          .fontSize(22)
      }
      Row({ space: 10 }) {
        Button('White Text')
          .fontColor(Color.White)
      }
      Flex()
        .width("100%")
        .height(50)
        .backgroundColor(Color.Pink)
      Image($r("app.media.startIcon"))
        .height(150)
      Row({ space: 10 }) {
        Button('页面置灰')
          .onClick(() => {
            this.saturateValue = 1; // 页面置灰
          })
        Button('恢复彩色')
          .onClick(() => {
            this.saturateValue = 0; // 页面复原
          })
      }
    }
    .width("100%")
    .height("100%")
    .padding(10)
    .grayscale(this.saturateValue) // 设置根组件的颜色饱和度
  }
}

更多关于HarmonyOS鸿蒙Next中如何对应用到所有页面进行一键置灰的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-image-effect-V5#grayscale

在HarmonyOS鸿蒙Next中，对应用到所有页面进行一键置灰可以通过设置全局的页面样式来实现。具体步骤如下：

  1. 定义全局样式：在resources/base/element/目录下创建一个全局样式文件，例如global_style.json，并在其中定义置灰效果。可以使用opacity属性来实现置灰效果。

    {
  "class": "global_style",
  "attributes": {
    "opacity": 0.5
  }
}

  2. 应用全局样式：在config.json文件中，将定义的全局样式应用到所有页面。可以在"module"下的"pages"节点中，为每个页面添加"style"属性，引用全局样式。

    {
  "module": {
    "pages": [
      {
        "name": "MainPage",
        "style": "global_style"
      },
      {
        "name": "DetailPage",
        "style": "global_style"
      }
      // 其他页面
    ]
  }
}

  3. 动态置灰：如果需要在运行时动态切换置灰效果，可以在页面代码中使用setStyle方法来动态修改样式。

    // 在某个页面或组件中
this.$element('pageId').setStyle({
  opacity: 0.5
});

在HarmonyOS鸿蒙Next中，可以通过修改全局主题样式实现应用到所有页面的一键置灰。具体步骤如下：

  1. 在resources/base/element/目录下，创建或修改color.json文件，定义灰色调色板。
  2. 在resources/base/profile/目录下，创建或修改theme.json文件，将全局主题的颜色引用为灰色。
  3. 在entry/src/main/resources/base/profile/目录下，确保app.json中引用了修改后的主题文件。

修改后，所有页面的UI元素将自动应用灰色样式，实现一键置灰效果。

回到顶部