如何在电子的自定义标题栏中显示/隐藏最大化/最小化按钮

Posted

技术标签:

【中文标题】如何在电子的自定义标题栏中显示/隐藏最大化/最小化按钮【英文标题】:how to show/hide maximize/minimize button in custom titlebar in electron 【发布时间】:2020-10-02 06:03:29 【问题描述】:

到目前为止,我在 electron 中制作了一个自定义标题栏(使用 angular 9),分别将这些按钮添加到 html 和单击事件中,以最小化、最大化、恢复或关闭窗口。现在,当用户双击标题栏(因为 css 属性设置为-webkit-app-region: drag)或用户使用窗口捕捉功能最大化窗口时,就会出现问题。对于,双击我想在角度使用 dblclick 事件但仍然失败。那么,我该如何解决这个问题呢?

titlebar.component.html

<div class="titlebar" *ngIf="showTitleBar" (dblclick)="dblFunction()">
   
   <div class="navigation">
      <a class="normal-button material-icons" *ngIf="showBackButton">arrow_back</a>
      <div class="appTitle">title</div>
   </div>
   
   <div class="wincontrol">
      <a class="normal-button material-icons" (click)="minimize()">remove</a>
      <a class="normal-button material-icons" *ngIf="showMaxButton ; else showResButton" (click)="maximize()">crop_square</a>
      <ng-template #showResButton>
         <a class="normal-button material-icons" id="restore" (click)="restore()">flip_to_front</a>
      </ng-template>
      <a class="close-button material-icons" (click)="close()">clear</a>
   </div>
   
</div>

titlebar.component.ts

import  Component, OnInit  from '@angular/core';
import  WindowService  from 'src/app/services/window.service';
import  ElectronhelperService  from 'src/app/services/electronhelper.service';

@Component(
  selector: 'app-titlebar',
  templateUrl: './titlebar.component.html',
  styleUrls: ['./titlebar.component.scss']
)
export class TitlebarComponent implements OnInit 
  title = 'Electron-App' ;
  showMaxButton ;
  showTitleBar = true ;
  showBackButton = false ;

  constructor(private win: WindowService, private helper: ElectronhelperService)
    this.showMaxButton = !this.win.winSettings.wasMaximized ;
  

  ngOnInit(): void 
  

  minimize()
    this.win.sendMinimize() ;
  

  maximize()
    this.showMaxButton = !this.showMaxButton ;
    this.win.sendMaximize() ;
  

  restore()
    this.showMaxButton = !this.showMaxButton ;
    this.win.sendRestore() ;
  

  close()
    this.win.sendClose() ;
  

  dblFunction()
    console.log('dbl clicked')
    this.showMaxButton = !this.showMaxButton ;
  

【问题讨论】:

【参考方案1】:

所以最后在浏览了整个互联网之后,由于区域在 Angular 代码之外运行而导致问题。

titlebar.component.ts

import  Component, OnInit, NgZone  from '@angular/core';
import  WindowService  from 'src/app/services/window.service';
import  ElectronhelperService  from 'src/app/services/electronhelper.service';

@Component(
  selector: 'app-titlebar',
  templateUrl: './titlebar.component.html',
  styleUrls: ['./titlebar.component.scss']
)
export class TitlebarComponent implements OnInit 
  title = 'Electron-App' ;
  showMaxButton ;
  showTitleBar = true ;
  showBackButton = false ;
  constructor(private win: WindowService, private helper: ElectronhelperService, private zone: NgZone)
    this.showMaxButton = !this.win.winSettings.wasMaximized ;

    this.helper.win.on('maximize', this.toggleMaxButton.bind(this)) ;
    this.helper.win.on('unmaximize', this.toggleMaxButton.bind(this)) ;
  

  ngOnInit(): void 
  

  minimize()
    this.helper.win.minimize() ;
  

  maximize()
    this.helper.win.maximize() ;
  

  restore()
    this.helper.win.unmaximize() ;
  

  close()
    this.helper.win.close() ;
  

  toggleMaxButton()
    this.zone.runTask(() => 
      if (this.helper.win.isMaximized())
        this.showMaxButton = false ;
      
      else
        this.showMaxButton = true ;
      
      console.log(this.showMaxButton)
    ) ;
  

因为,win.on 事件是异步的,所以需要 ngZone 来切换 angular 内的布尔值。解决这个问题确实花了一周的时间!

【讨论】:

以上是关于如何在电子的自定义标题栏中显示/隐藏最大化/最小化按钮的主要内容,如果未能解决你的问题,请参考以下文章

WPF 在属性栏中更改相关设置

如何在 guizero/tkinter python 3 中将图标添加回任务栏?

Electron 应用程序窗口在最小化、最大化和关闭事件时仍然有动画

如何在任务栏中显示 QMainWindow

未捕获的 ReferenceError:未定义要求(电子)

具有最小化动画的自定义窗口样式