Rimuovi la barra dei menu dall'app Electron


104

Come rimuovo questa barra dei menu dalle mie app di elettroni:

barra dei menu

Inoltre dice "Hello World" (è perché ho scaricato electron pre-costruito e andrà via una volta che avrò impacchettato l'applicazione?). Non li ho codificati nell'html, quindi non so come ottenerlo! -

Risposte:


149

È possibile utilizzare w.setMenu(null)o impostare frame: false(questo rimuove anche i pulsanti per chiudere, ridurre a icona e ingrandire le opzioni) sulla finestra. Vedere setMenu () o BrowserWindow () . Controlla anche questo thread


Electron ora ha win.removeMenu()( aggiunto nella v5.0.0 ), per rimuovere i menu dell'applicazione invece di utilizzare win.setMenu(null).


Electron 7.1.x sembra avere un bug in cui win.removeMenu()non funziona. L'unica soluzione è usareMenu.setApplicationMenu(null)


4
frame: falsel'ha fatto per me.
mwilson

5
fwiw removeMenu()è solo per Linux e Windows
primavera

che dire nelle finestre aperte da window.open () in una finestra già aperta con un menu?
Michael

4
Electron 7.1.1 ha un problema in cui setMenue removeMenunon funziona più il collegamento
P Fuster

1
Né la soluzione originale né quella di modifica funzionano. Questa non dovrebbe più essere la risposta.
Tyguy7

63

Usa questo:

mainWindow = new BrowserWindow({width: 640, height: 360})
mainWindow.setMenuBarVisibility(false)

Riferimento: https://github.com/electron/electron/issues/1415

Ho provato mainWindow.setMenu(null), ma non ha funzionato.


2
Ho provato mainWindow.setMenu(null)con l'elettrone 5.0.2 e non ha funzionato neanche per me. Non sono sicuro del motivo per cui vedo consiglio di usarlo ovunque, e stavo vagando se sono l'unico che sta facendo qualcosa di sbagliato. Il tuo consiglio di utilizzo setMenuBarVisibility, sebbene rimuova la visibilità della barra dei menu, non la rimuove completamente. Può essere ripristinato premendo il Alttasto.
Artium

1
FWIW: Con Election 6.0.X né .setMenu(null)o ha .removeMenu()funzionato per me. .setMenuBarVisibility(false)rimuove la barra dei menu e il Alttasto funziona solo se .setAutoHideMenuBar(true)viene eseguito.
Bob Nadler

1
+1, in Arch Linux, setMenu(null)non ha funzionato, ma setMenuBarVisibility(false)funziona come previsto (la barra non può essere ripristinata premendo il alttasto come menzionato da @Artium).
Amir A. Shabani

Questa è la soluzione che ha funzionato per me. La risposta contrassegnata come corretta non funziona su Ubuntu 18.04, Electron v6.0.9
Christoffer

Grande! Avevo bisogno di un modo semplice per includere scorciatoie da tastiera senza mostrare la barra dei menu. Grazie mille!
Anis R.

26

Per Electron 7.1.1, puoi usare questo:

const {app, BrowserWindow, Menu} = require('electron')
Menu.setApplicationMenu(false)

6
Aggiorna modifica per me: ha Menu.setApplicationMenu(null)funzionato in 7.1.2Altre soluzioni non ha funzionato per me!
TessavWalstijn

1
Funziona anche su 7.1.4. Aggiorna la risposta corretta per assicurarti che chiunque abbia questo problema sarà in grado di raggiungere la soluzione.
Emilio Numazaki

Funziona per me in electron 7.1.6
Iuninefrendor

1
@OP - Benvenuto in Stack Overflow e grazie per l'ottima risposta! Una nota: fai attenzione quando copi e incolli le virgolette da altri programmi come MS Word. Le virgolette formattate come "electron" non sono le stesse delle virgolette non formattate come "electron" nella maggior parte dei casi.
sfarbota

1
Funziona per me in Electron 7.19 Questo dovrebbe essere sicuramente aggiornato come risposta corretta
Darkrender

9

Quando impacchettate la vostra app, il menu predefinito non sarà più lì, se questo vi disturba durante lo sviluppo, potete chiamare setMenu(null)nella finestra del browser come suggerito da @TonyVincent.


Grazie per aver accennato al fatto che il pacchetto dell'app rimuoverà il menu predefinito. Mi stavo chiedendo su quel punto specifico.
raddevus

9

A partire dalla versione 7.0.0, la maggior parte delle soluzioni di cui sopra non funziona più. BrowserWindow.setMenu()è stato sostituito da Menu.setApplicationMenu(), che ora cambia il menu su tutte le finestre. setMenu(), removeMenu()non fare più nulla, che tra l'altro sono ancora menzionati nei documenti.

setAutoHideMenuBar()funziona ancora, ma potrebbe essere un fastidio se si prevede di utilizzare Alt come modificatore di tasti di scelta rapida. Una volta che il menu è visibile, è necessario fare clic fuori dalla finestra (focus libero) per nascondere nuovamente il menu.

Se la tua applicazione ha più di una finestra, non puoi impostare / rimuovere i menu separatamente su ciascuna finestra. L'unico modo per rimuovere un menu è utilizzare l'approccio della finestra senza cornice. Questo sembra essere quello che voglio nella mia attuale applicazione, ma non è una buona soluzione in tutti i casi.


Grazie, questa è l'unica cosa che funziona dalla 7.0! C'è qualche menzione di questo nei documenti / changelogs / ecc?
rvighne

C'è un problema aperto nel collegamento al progetto GitHub . Non so se fosse una deprecazione pianificata o un bug.
P Fuster

9

Il menu può essere nascosto o auto-nascosto (come in Slack o VS Code : puoi premere Alt per mostrare / nascondere il menu).

Metodi rilevanti:

---- win.setMenu (menu) - Imposta il menu come barra dei menu della finestra, impostandolo su null rimuoverà la barra dei menu. ( Questo rimuoverà completamente il menu )

mainWindow.setMenu(null)


---- win.setAutoHideMenuBar (hide) - Imposta se la barra dei menu della finestra deve nascondersi automaticamente. Una volta impostata, la barra dei menu verrà
visualizzata solo
quando gli utenti premono il singolo tasto Alt .

mainWindow.setAutoHideMenuBar(true)

Fonte: https://github.com/Automattic/simplenote-electron/issues/293

C'è anche il metodo per creare una finestra senza cornice come mostrato di seguito:

(nessun pulsante di chiusura, niente. Può essere quello che vogliamo (design migliore))

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()

https://electronjs.org/docs/api/browser-window#winremovemenu-linux-windows

doc: https://electronjs.org/docs/api/frameless-window

Modifica: (nuovo)

win.removeMenu() Linux Windows Rimuovere la barra dei menu della finestra.

https://electronjs.org/docs/api/browser-window#winremovemenu-linux-windows

Aggiunto win.removeMenu () per rimuovere i menu dell'applicazione invece di usare win.setMenu (null)

Questo viene aggiunto dalla v5 come da:

https://github.com/electron/electron/pull/16570

https://github.com/electron/electron/pull/16657

Bug di Electron v7

Per Electron 7.1.1 utilizzare Menu.setApplicationMenuinvece diwin.removeMenu()

come da questa discussione:
https://github.com/electron/electron/issues/16521

E la nota importante è: devi chiamarlo prima di creare la BrowserWindow ! O non funzionerà!

const {app, BrowserWindow, Menu} = require('electron')

Menu.setApplicationMenu(null);

const browserWindow = new BrowserWindow({/*...*/});

UPDATE (Impostazione di autoHideMenuBar nella costruzione BrowserWindow)

Come da @kcpr commento! Possiamo impostare la proprietà e molti sul costruttore

È disponibile sull'ultima versione stabile di electron che è la 8.3!
Ma anche nelle vecchie versioni ho controllato per v1, v2, v3, v4!
È presente in tutte le versioni!

Come da questo link
https://github.com/electron/electron/blob/1-3-x/docs/api/browser-window.md

E per la v8.3
https://github.com/electron/electron/blob/v8.3.0/docs/api/browser-window.md#new-browserwindowoptions

Il collegamento alla documentazione
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

Dal documento per l'opzione:

autoHideMenuBar Boolean (opzionale): nasconde automaticamente la barra dei menu a meno che non venga premuto il tasto Alt. L'impostazione predefinita è false.

Ecco uno snippet per illustrarlo:


let browserWindow = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true // <<< here
})

1
setAutoHideMenuBar è obsoleto
Mister SirCode

La risposta di Edmar di seguito è una versione migliore, ultimo codice per nascondere automaticamente il menu
Mister SirCode

1
In Electron 8.2.5 (ho il sospetto che anche in versioni precedenti) è possibile definire, che la barra dei menu dovrebbe essere nascosta automaticamente nel BrowserWindowcostruttore in questo modo: new BrowserWindow({autoHideMenuBar: true}). E, a proposito, grazie per questa risposta. Mi sembra che sia probabilmente il più completo (supponendo che i metodi esistano ancora e non siano deprecati).
kcpr

@kcpr Grazie per la tua risposta! Ho aggiornato la risposta per riflettere questo!
Mohamed Allal

@ MohamedAllal, fantastico! Grazie, sono contento che consideri utile il mio commento. E grazie anche per la ricerca extra che hai fatto e per i risultati che hai condiviso.
kcpr

6
@"electron": "^7.1.1" : 

mainWindow = new browserWindow({ height: 500, width: 800});
//mainWindow.setAutoHideMenuBar(true);
mainWindow.autoHideMenuBar = true;

Funziona come previsto senza menu nel browser.


(electron) 'setAutoHideMenuBar function' è deprecata e verrà rimossa. Utilizza invece la "proprietà autoHideMenuBar". @ "electron": "^ 7.1.1": mainWindow = nuovo browserWindow ({altezza: 500, larghezza: 800}); mainWindow.autoHideMenuBar = true;
Rachuri

3

Dopo la risposta da questo problema , è necessario chiamare Menu.setApplicationMenu(null) prima che la finestra venga creata


Ehi, benvenuto in Stack Overflow! I collegamenti ad altre risposte sono più adatti come commenti, piuttosto che come risposte. Questo perché non stai effettivamente applicando la risposta nella domanda collegata allo scenario specifico di questo utente.
David Chopin

2

Prima di questa riga su main.js:

mainWindow = new BrowserWindow({width: 800, height: 900})

mainWindow.setMenu(null) //this will r menu bar


0

Queste soluzioni hanno bug. Quando si usano le soluzioni sotto, le finestre hanno un ritardo alla chiusura.

Menu.setApplicationMenu(null),
&&
const updateErrorWindow = new BrowserWindow({autoHideMenuBar: true});

Ho usato la soluzione sotto. Per ora è meglio.

const window= new BrowserWindow({...});
window.setMenuBarVisibility(false);
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.