Electron中菜单项checked状态不生效问题排查

在Electron Fiddle中运行以下main.js代码示例时，点击Menu中的菜单项可成功修改其label，但无法修改checked状态。控制台输出显示menuTemplate的checked属性已变更，但界面未显示勾选标记。请问为何label修改生效而checked状态不生效？另外，Electron有时会在菜单项左侧显示小图标，该行为是否会造成干扰？若会，如何禁用？

环境信息：Electron Fiddle 0.39.0、Electron 41.4.0、MacOS 26.5

代码示例：

const { app, BrowserWindow,Menu } = require('electron')
const path = require('node:path')
const isMac = process.platform === 'darwin'
var itemToggle = false; // variable to toggle between states

const menuTemplate = [
   ...(isMac
    ? [{
        label: app.name,
        submenu: [
          {label: 'Quit ',
            accelerator: 'Cmd+Q',
            click: function(){
              setValObj.quit = true;
              closeAndQuit();
            }
          }
        ]
      }]
    : []), {
    label: 'Menu',
    submenu: [
      {
        label:"Item",
        checked: false,
        click: () => {
          itemToggle = !itemToggle;
          let label = "Item"
          if(itemToggle){label = "Another Item"} // toggle item label – works
          menuTemplate[1].submenu[0].label = label; 
          menuTemplate[1].submenu[0].checked = itemToggle; // toggle checkmark – registers in the var but is not implemented
          setMenuFromTemplate(menuTemplate);
          console.log(JSON.stringify(menuTemplate));
        }
      }
    ]
  }
];

function setMenuFromTemplate(template){
  menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    /*webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }*/
  })

  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow();
  setMenuFromTemplate(menuTemplate)

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

一、checked状态不生效的原因及解决方法 #

原因 #

Electron中，菜单项要显示勾选状态，必须明确设置type: 'checkbox'属性。你的代码仅设置了checked值，但未声明菜单项类型为复选框，Electron不会将其识别为可勾选的菜单项，因此checked值的变更无法同步到界面。而label修改不受菜单项类型限制，所以能正常生效。

解决方法 #

在目标菜单项的配置中添加type: 'checkbox'，修改后的菜单项代码如下：

{
  label:"Item",
  type: 'checkbox', // 新增类型声明
  checked: false,
  click: () => {
    // 原有逻辑保持不变
  }
}

添加后，点击菜单项时checked状态的变更会直接在界面上显示勾选/取消勾选的标记。

二、菜单项左侧图标干扰问题 #

是否会造成干扰 #

默认情况下，MacOS系统中Electron会为部分标准系统菜单项（如复制、粘贴）自动添加图标，但自定义菜单项一般不会自动生成图标。如果自定义菜单项意外出现图标，会破坏界面视觉一致性，确实会造成干扰。

禁用方法 #

如果需要禁用特定菜单项的图标，可在菜单项配置中显式设置icon: null：

{
  label:"Item",
  type: 'checkbox',
  checked: false,
  icon: null, // 禁用此菜单项的图标
  click: () => {
    // 原有逻辑保持不变
  }
}

若要全局禁用所有菜单项图标，可在构建菜单前遍历模板，为每个菜单项添加icon: null配置，不过更推荐逐个设置，避免影响标准系统菜单项的预期行为。

内容的提问来源于stack exchange，提问作者danbae