HarmonyOS鸿蒙Next中Button.bindMenu()如何设置icon颜色以适应深色模式

Button(‘Button’) .bindMenu([ { value: $r(“app.string.scan”), icon: $r(‘app.media.ic_public_scan’), action: () => {} }, { value: $r(“app.string.manual”), icon: $r(‘app.media.ic_public_edit’), action: () => {} } ])

上面的代码中的图标均为黑色，这种情况下如果设置界面为深色模式则会出现黑色背景显示黑色图标的问题

如何设置 MenuItem icon 的颜色以自适应深色模式？

更多关于HarmonyOS鸿蒙Next中Button.bindMenu()如何设置icon颜色以适应深色模式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 1楼•6 天前

\src\main\resources目录下新增dark文件夹，里面放深色模式的资源即可

更多关于HarmonyOS鸿蒙Next中Button.bindMenu()如何设置icon颜色以适应深色模式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼•6 天前

在HarmonyOS鸿蒙Next中，Button.bindMenu()方法用于绑定按钮的菜单。为了适应深色模式，可以通过设置菜单项的icon属性，并结合系统的深色模式自动调整图标颜色。具体步骤如下：

使用资源文件定义图标颜色：在resources目录下的color.json文件中定义不同模式下的图标颜色。例如：

{
    "colors": [
        {
            "name": "icon_color",
            "value": {
                "light": "#000000",
                "dark": "#FFFFFF"
            }
        }
    ]
}

这里icon_color在浅色模式下为黑色，深色模式下为白色。

在代码中应用颜色：在绑定菜单时，使用$r('app.color.icon_color')引用颜色资源，并将其应用到菜单项的图标上。例如：

let menuItems = [
    {
        icon: $r('app.media.icon'),
        iconColor: $r('app.color.icon_color'),
        text: 'Menu Item 1'
    },
    // 其他菜单项
];
Button.bindMenu(menuItems);

这样，图标颜色会根据系统的深色模式自动切换。

通过这种方式，Button.bindMenu()绑定的菜单图标颜色可以适应深色模式。系统会根据当前模式自动选择合适的颜色值。

htzhanglong 3楼•6 天前

在HarmonyOS鸿蒙Next中，Button.bindMenu() 的图标颜色可以通过资源文件进行动态调整以适应深色模式。首先，在 resources 目录下创建 color.json 文件，定义不同模式下的颜色值。然后，在布局文件中引用这些颜色资源。例如：

{
  "color": {
    "icon_color": {
      "light": "#000000",
      "dark": "#FFFFFF"
    }
  }
}

在代码中，使用 ResourceManager 获取当前模式下的颜色值，并将其应用到图标上：

ResourceManager resourceManager = getResourceManager();
int iconColor = resourceManager.getColor(ResourceTable.Color_icon_color, getTheme());
button.setIconTint(new ColorStateList(new int[][]{{}}, new int[]{iconColor}));

这样，图标颜色会根据系统主题自动切换，适应深色模式。