electron 设置界面右下角打开

功能需求场景

写一个可以下载各种平台的小工具,需要右下角打开方便做其它事情

实现基础

要在屏幕的右下角设置窗口,可以调整mainWindow的创建参数,特别是通过使用xy坐标来定位窗口 ; 需要获取屏幕的尺寸,并据此计算出窗口的位置

代码示例

javascript 复制代码
const { screen } = require('electron');

function createWindow() {
  const { width, height } = screen.getPrimaryDisplay().workAreaSize
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 350,
    height: 68,
    show: false,
    x: width - 350, // 屏幕宽度减去窗口宽度,确保窗口靠右
    y: height - 68, // 屏幕高度减去窗口高度,确保窗口靠下
    ...
  })
}

需要注意

javascript 复制代码
const { width, height } = screen.getPrimaryDisplay().workAreaSize

这行代码只能写在electron初始化完成之后 , 如代码示例 , 写在开头导入资源中 必报错

相关推荐
m0_736034851 小时前
1.28笔记
前端·chrome·笔记
IT陈图图1 小时前
构建 Flutter × OpenHarmony 跨端带文本输入对话框示例
开发语言·javascript·flutter
奔跑的web.6 小时前
TypeScript 装饰器入门核心用法
前端·javascript·vue.js·typescript
阿蒙Amon6 小时前
TypeScript学习-第1章:入门
javascript·学习·typescript
winfredzhang6 小时前
实战复盘:如何用 HTML+JS+AI 打造一款“影迹”智能影视管理系统
javascript·html·json·加载·搜索·保存·电影接口
集成显卡7 小时前
Lucide Icons:一套现代、轻量且可定制的 SVG 图标库
前端·ui·图标库·lucide
pas1367 小时前
37-mini-vue 解析插值
前端·javascript·vue.js
十里-8 小时前
vue.js 2前端开发的项目通过electron打包成exe
前端·vue.js·electron
雨季6669 小时前
构建 OpenHarmony 简易文字行数统计器:用字符串分割实现纯文本结构感知
开发语言·前端·javascript·flutter·ui·dart
雨季6669 小时前
Flutter 三端应用实战:OpenHarmony 简易倒序文本查看器开发指南
开发语言·javascript·flutter·ui