第十一讲Electron无边框窗体和透明窗体设计

置顶 已于 2023-06-30 13:21:45 修改
阅读量3.4k 收藏 3
点赞数
分类专栏： 跨平台桌面开发从入门到精通 文章标签： elementui electron 透明窗体 透明窗体
于 2021-08-22 20:03:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fwj380891124/article/details/119815700
版权
本文介绍了如何使用Electron实现无边框和透明窗体设计，包括无边框窗体的实现、透明窗口的局限性和点击穿透处理，以及拖拽区、文本选择、右键菜单等细节，提供了MacOS和Windows平台上的实现方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第十一讲Electron无边框窗体和透明窗体设计

介绍

在我们平常的开发中，经常会有用户对客户端界面提出一些特殊要求，经常被用户吐槽传统的窗体设计太刻板、没新意。这要是放传统的Winform开发里面，的确是一件非常痛苦的事情，因为你需要找第三方的皮肤组件来完成用户需求，关键这种第三方皮肤组件效果不怎么好，而且万一用户提出对皮肤细节作出调整，这些皮肤组件大部分不是开源的，要满足用户特殊的要求就得自己写皮肤，这其实是一件很痛苦的事情。不管是Electron还是Winform开发，这种需求都绕不开我们今天讲的无边框窗体，因为无边框是我们进行皮肤定制开发的第一步要迈过去的坎！先给大家展示一下我使用Electron美化的Markdown：
在这里插入图片描述
是不是很心动，废话不多说，我们来看看我们怎么设计无边框的窗体！

无边框窗体设计细节

  1. 主进程设计无边框窗口，只需在 BrowserWindow 的 options 中将 frame 设置为 false,效果如下：

                

                
                
        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        


    



                



	

		

			

				
					
Electron：窗口、窗口标题和边框

				
			

			

				

					读心悦
				

				

					11-08
					
					1694
					
				

			

		

		

			
				
当我们设置frame为false的时候，窗口的边框和标题栏消失了，只展示内容区域，我们不能移动窗口、最大化、最小化和关闭窗口。现在需要做的是封装自己的标题栏，这里我把它封装为一个React组件。。import {import {import {主要是设置路由类型，选择的是浏览器路由。

			
		

	



                

            
              



	

		

			

				
					
第十二讲运用前面学习知识美化Markdown编辑器

				
			

			

				

					星火燎猿
				

				

					09-06
					
					351
					
				

			

		

		

			
				
第十二讲运用前面学习知识美化Markdown编辑器前言项目目录结构无边框窗体设计设计首页排版顶部菜单窗体顶部可拖拽顶部右侧功能菜单实现绑定事件左侧菜单页面实现事件绑定
前言

文末有代码仓库地址，可以直接拉代码下来运行。在这一讲里面我们将运用上一讲学到的内容知识，对我们前面讲的Markdown编辑器进行美化操作，之前的界面设计比较粗糙，只要能满足基本的功能要求，但是要作为一款拿的出手的产品，界面大方美观肯定是要的。在这个看脸的时代，功能不管怎么样，界面一定要好看。废话不多说，我们来看看前后的对比照：

老版

			
		

	



              


  
              

                


	

		

			

				
					
【Electron】vue+electron实现无边框窗口

				
			

			

				

					小王的技术库
				

				

					09-15
					
					3079
					
				

			

		

		

			
				
无边框窗口是不带外壳（包括窗口边框、工具栏等），只含有网页内容的窗口。对于一个产品来讲，桌面应用带边框的很少，因为丑（我们的UI觉得–与我无关-.-）。因此我们就来展开说下，在做无边框窗口时候需要注意的事项以及我踩过的坑。

			
		

	





	

		

			

				
					
Electron 中创建透明窗口

				
			

			

				

					qq_42062727的博客
				

				

					12-17
					
					2810
					
				

			

		

		

			
				
在开发 Electron 应用时，可能需要创建完全透明的窗口，比如我们要做一个屏幕内容共享的功能，在特定矩形区域内的内容才会被共享出来，而这个区域是一个透明且可被穿透的区域。首先我们需要再主进程上创建一个矩形窗口共享区域的窗口一定是透明的、可移动的、并且没有边框、可调整大小，但不能最小化和最大化，也不能进入全屏状态，窗口也不能在程序坞中关闭。

			
		

	



		

			
		



	

		

			

				
					
Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小

				
			

			

				

					06-09
				

			

		

		

			
				
对应博客地址：https://blog.youkuaiyun.com/fukaiit/article/details/91351448

包括Electron无边框窗口原型和核心代码

			
		

	





	

		

			

				
					
electron 透明窗口+全透明页面，鼠标点击会穿透窗口

				
			

			

				

					u013896513的博客
				

				

					01-05
					
					1561
					
				

			

		

		

			
				
electron透明窗口鼠标点击穿透，另：虚拟机不支持electron透明窗口效果。

			
		

	





	

		

			

				
					
Electron教程大结局

				
			

			

				

					星火燎猿
				

				

					09-11
					
					601
					
				

			

		

		

			
				
Electron初阶教程大结局前情回顾未来计划感谢
前情回顾
前面我们通过14篇文章的篇幅，以理论知识和案例实践的方式从0开始进行了Electron开发跨平台桌面客户端的讲解和案例展示，通过该系列课程的学习，学员完全可以快速掌握并入门相关的开发工作。快速构建出自己的知识架构体系，让我们来回顾一下我们前面讲解的文章脉络：

第一讲我们介绍了Electron，并给出了为什么要用Eletron开发客户端软件的理由！
第二讲我们重点介绍了Electron创建项目的3种方式.
第三讲讲了Electron中的重要知识点

			
		

	





	

		

			

				
					
Qt开发经验总结

				
			

			

				

					草上爬的博客
				

				

					12-02
					
					1万+
					
				

			

		

		

			
				
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。

			
		

	





	

		

			

				
					
delphi控件使用

				
			

			

				

					achs24540的博客
				

				

					10-27
					
					2647
					
				

			

		

		

			
				
Standard页
1- Tlistbox控件
重要属性items.*
举例，界面设计如下左，执行结果如下右：
 
代码为
procedure TForm1.Button1Click(Sender: TObject);
begin
edit1.Text := listbox1.Items.CommaText;
edit2.Text := listbo...

			
		

	





	

		

			

				
					
electron-transparency-demo:在Electron中具有单击功能的透明窗口的演示

				
			

			

				

					05-25
				

			

		

		

			
				
电子透明演示
在将电子透明鼠标修复程序升级到v2之前的沙盒和演示/测试环境
npm install --save-dev
npm start
检查清单
版本2的状态
视窗
苹果系统
Linux
 重新加载时的透明度
好的
好的
？
 点击后元素
好的
好的
？
 单击被可点击区域包围的通Kong
不适用
不适用
不适用
CSS，无需自定义JS
 好的
好的
好的
将文本从OS拖到输入字段上
？
 ？
 ？
 将文件从JS拖放到JS
 ？
 ？
 ？
 将文件从OS拖到JS
 好的
在制品
？
 将文件从OS（由窗口悬停）拖到JS
 好的
在制品
？
 将文件从JS拖到OS（由窗口悬停）
 ？
 去做
？
 禁用的输入无效
？
 ？
 ？
 启用的输入有效
？
 ？
 ？
 启用项目的悬停效果
？
 ？
 ？
 禁用项目没有悬停效果
？
 ？
 ？
在制品
MacOS卡塔利娜
无法将内容拖到

			
		

	





	

		

			

				
					
Electron无边框窗口（最小化、最大化、关闭、拖动）

				
			

			

				

					weixin_46852620的博客
				

				

					01-30
					
					2031
					
				

			

		

		

			
				
一、无边框窗口
要创建无边框窗口，只需在BrowserWindow的options中将frame设置为 false，通过将 transparent 选项设置为 true, 还可以使无框窗口透明
mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  frame:false,
  transparent：true
})

二、可拖拽区
.titlebar {
  -webkit-app-region: drag;
  -webkit-us

			
		

	





	

		

			

				
					
electron设置窗口背景透明

					
热门推荐

				
			

			

				

					youyudexiaowangzi的专栏
				

				

					09-17
					
					1万+
					
				

			

		

		

			
				
1.创建BrowserWindow时指定transparent: true和frame: false和devTools: false

注意devTools可能会影响到transparent


  mainWindow = new BrowserWindow({
    height: 960,
    width: 1820,
    transparent: true,
    resizable: false,
    frame: false,
    webPreferences: {
    

			
		

	





	

		

			

				
					
electron窗口背景透明无边框（可用于启动页面）

				
			

			

				

					代码哈士奇的博客
				

				

					06-21
					
					2947
					
				

			

		

		

			
				
electron窗口背景透明无边框

			
		

	





	

		

			

				
					
Electron无边框自定义窗口拖动

					
最新发布

				
			

			

				

					u014708123的博客
				

				

					04-01
					
					1713
					
				

			

		

		

			
				
最近使用了electron框架，发现如果自定义拖动是比较实用的;特别是定制化比较高的项目，如果单纯的使用-webkit-app-region: drag;会让鼠标事件无法触发;

			
		

	





	

		

			

				
					
electron无边框模式完美解决同时实现拖动和双击最大化

				
			

			

				

					li19931130的博客
				

				

					06-06
					
					1万+
					
				

			

		

		

			
				
无边框模式下，需要在background.ts启动启用：frame:false，transparent:true；配置后, 自定义导航栏这时候窗口是不可以拖动的。但是您想拖动的话，这时候您要元素中声明一个：-webkit-app-region: drag;(元素可拖动模式),但是设置以后出现了新问题drag模式下元素无法监听到鼠标双击或者单击事件。解决此问题之前看了很多文章的方法1.父元素下嵌套等宽等高的div设置-webkit-app-region: no-drag;见Electron设置-webkit-

			
		

	





	

		

			

				
					
electron+vue3全家桶+vite项目搭建【21】自定义无边框窗口拖拽移动

				
			

			

				

					个人网站：https://www.longzipeng.online 
				

				

					07-08
					
					2618
					
				

			

		

		

			
				
electron自定义窗口拖拽移动

			
		

	





	

		

			

				
					
electron 无边框 放大 缩小 全屏 复原 100%可行

				
			

			

				

					ranshakalove的博客
				

				

					03-23
					
					2312
					
				

			

		

		

			
				
electron 无边框 放大 缩小 全屏 复原 100%可行

			
		

	





	

		

			

				
					
实现无边框窗口和动态调整窗口大小的 Electron 应用

				
			

			

				

					XwyMysql的博客
				

				

					10-06
					
					713
					
				

			

		

		

			
				
无边框窗口和动态调整窗口大小是一些现代应用程序常见的 UI 设计需求。以下是一份详细的教程，展示如何创建一个 Electron 应用，其中包含无边框窗口和允许动态调整窗口大小的功能。事件，我们可以动态检测鼠标的位置，如果鼠标靠近窗口的右下角（距离窗口边缘小于 10px），则将窗口设置为可调整大小，否则禁止调整大小。另外，我们还禁止了窗口的最大化和最小化功能。这就是实现无边框窗口和动态调整窗口大小的 Electron 应用的详细过程。当鼠标靠近窗口的右下角时，窗口将变为可调整大小的状态。

			
		

	





	

		

			

				
					
无边框窗体的制作教程与代码示例

				
			

			

				

					
				

			

		

		

			
				
无边框窗体是图形用户界面（GUI）设计中的一个高级主题，它允许开发者创建没有常规窗口边框和控制按钮的窗口，使得窗口看起来更加“无痕”或是集成到其背景中。这样的设计可以用于多种应用，比如创建模拟全屏应用、...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
星火燎猿

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值