【Wails】高大上的半透明“冰霜” 效果

Wails使用半透明“冰霜”效果

首先初始化一个模板项目

wails init -n transparent -t vue

然后把项目跑起来

修改应用配置

main.go
将背景色改为黑色，透明度0，也就是没有背景。
BackgroundColour: &options.RGBA{R: 0, G: 0, B: 0, A: 0},

package mainimport ("embed""github.com/wailsapp/wails/v2""github.com/wailsapp/wails/v2/pkg/options"
)//go:embed frontend/dist
var assets embed.FSfunc main() {// Create an instance of the app structureapp := NewApp()// Create application with optionserr := wails.Run(&options.App{Title:            "transparent",Width:            1024,Height:           768,Assets:           assets,BackgroundColour: &options.RGBA{R: 0, G: 0, B: 0, A: 0},OnStartup:        app.startup,Bind: []interface{}{app,},})if err != nil {println("Error:", err.Error())}
}

修改网页部分

frontend/src/style.css 删除所有的background样式

html {text-align: center;
}body {margin: 0;color: white;font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto","Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;
}@font-face {font-family: "Nunito";font-style: normal;font-weight: 400;src: local(""),url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
}#app {height: 100vh;text-align: center;
}

然后就能看见界面变成了

继续修改main.go
引入包，修改window下的配置

"github.com/wailsapp/wails/v2/pkg/options/windows"

添加参数

Windows: &windows.Options{WebviewIsTransparent:              true,// 网页透明WindowIsTranslucent:               true,// 窗口透明DisableWindowIcon:                 false,DisableFramelessWindowDecorations: false,WebviewUserDataPath:               "",Theme:                             windows.SystemDefault,CustomTheme: &windows.ThemeSettings{DarkModeTitleBar:   windows.RGB(20, 20, 20),DarkModeTitleText:  windows.RGB(200, 200, 200),DarkModeBorder:     windows.RGB(20, 0, 20),LightModeTitleBar:  windows.RGB(200, 200, 200),LightModeTitleText: windows.RGB(20, 20, 20),LightModeBorder:    windows.RGB(200, 200, 200),},},

完整main.go

package mainimport ("embed""github.com/wailsapp/wails/v2/pkg/options/windows""github.com/wailsapp/wails/v2""github.com/wailsapp/wails/v2/pkg/options"
)//go:embed frontend/dist
var assets embed.FSfunc main() {// Create an instance of the app structureapp := NewApp()// Create application with optionserr := wails.Run(&options.App{Title:            "transparent",Width:            1024,Height:           768,Assets:           assets,BackgroundColour: &options.RGBA{R: 0, G: 0, B: 0, A: 0},OnStartup:        app.startup,Bind: []interface{}{app,},Windows: &windows.Options{WebviewIsTransparent:              true,WindowIsTranslucent:               true,DisableWindowIcon:                 false,DisableFramelessWindowDecorations: false,WebviewUserDataPath:               "",Theme:                             windows.SystemDefault,CustomTheme: &windows.ThemeSettings{DarkModeTitleBar:   windows.RGB(20, 20, 20),DarkModeTitleText:  windows.RGB(200, 200, 200),DarkModeBorder:     windows.RGB(20, 0, 20),LightModeTitleBar:  windows.RGB(200, 200, 200),LightModeTitleText: windows.RGB(20, 20, 20),LightModeBorder:    windows.RGB(200, 200, 200),},},})if err != nil {println("Error:", err.Error())}
}

运行效果

此时窗口是透明了，冰霜效果也有了，但是窗口名称还是有点违和感，继续修改。
添加无边框

Frameless: true,

这样看起来就舒服多了，但是这样就不能拖动窗口和关闭了，就需要用到wail自带的一些方法和参数配置。

退出程序

window.runtime.Quit();

界面可以拖动，添加data-wails-drag
界面不可以拖动部分，添加data-wails-no-drag

完整代码

<script setup>
import HelloWorld from './components/HelloWorld.vue'
const handleQuit = () => {window.runtime.Quit();
}
</script><template><div data-wails-drag>拖动</div><div data-wails-no-drag>拖不动</div><button @click="handleQuit">关闭</button><img id="logo" alt="Wails logo" src="./assets/images/logo-universal.png"/><HelloWorld/>
</template><style>
#logo {display: block;width: 50%;height: 50%;margin: auto;padding: 10% 0 0;background-position: center;background-repeat: no-repeat;background-size: 100% 100%;background-origin: content-box;
}
</style>

运行效果

此时拖动部分可以拖动窗口移动位置，关闭可以关闭窗口，退出程序。

【Wails】高大上的半透明“冰霜” 效果相关推荐

为图片添加半透明遮罩效果
平时为图片添加半透明遮罩效果,我的做法如下: 利用标签i实现背景半透明遮罩.当鼠标hover时, 提高i的背景色透明度值background-color: rgba(0, 0, 0, .6) < ...
jquery 半透明遮罩效果小结
最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...
QT 轻松实现半透明遮罩效果
一.背景有时候我们需要实现下面的半透明遮罩效果,以便突出子窗口. 二.实现原理 1.总共分为三层:主窗口(Form).遮罩.显示窗口. 2.主窗口的子窗口是遮罩,遮罩的子窗口是显示窗口. 3.遮罩设 ...
[Android实例] 天天动听半透明Menu效果
这个咱再分享个天天动听的半透明Menu效果,个人感觉挺漂亮. 看下效果. 感觉如何啊? 分解一下: 1. 利用Shaper设置一个半透明圆角背景 2. 定义Menu布局,主要就GridView, ...
用 SMIL 2.0 实现台标半透明叠印效果
定义播放区域大小为标准 352 x 288,而台标画面区域位于左上角,大小为 73 x 66,并且半透明效果.另外还包括了视频画面具有自动适应播放区域大小的功能.台标采用一个普通 jpg 或者 gif ...
iOS磨砂（半透明）效果实现
291F12A6-B038-4D48-9A26-E650F2BE2D1A.png 上图是我做的一个小demo里面的截图,如图所示,弹出框的背景是现在app大量使用的半透明磨砂效果,那么如果去实现这种效 ...
C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...
mac vscode 背景半透明_给 vscode 添加半透明毛玻璃效果
Electron 可以调用 MacOS 的毛玻璃效果,下面让我来带你给 VScode 添加毛玻璃效果. 2. 创建一个 CSS 文件(CSS 是我自己写的,你可以按需修改) html { backgr ...
半透明遮罩效果 DIV
1.用JS判断你的显示器分辨率: var iWidth = window.screen.availWidth; var iHeight = window.screen.availHeight; ,获取 ...