跳到主要内容
版本:v2.8.0

无边框应用

Wails 支持无边框应用程序。 这可以通过使用 应用程序参数选项 中的 无边框 字段来实现。

Wails 为拖动窗口提供了一个简单的解决方案:任何具有 --wails-draggable:drag CSS 样式的 HTML 元素都将充当“拖动句柄”。 此属性适用于所有子元素。 如果您需要指示嵌套元素不应拖动,则在该元素上使用“--wails-draggable:no-drag”属性。

<html>
<head>
<link rel="stylesheet" href="/main.css" />
</head>

<body style="--wails-draggable:drag">
<div id="logo"></div>
<div id="input" style="--wails-draggable:no-drag">
<input id="name" type="text" />
<button onclick="greet()">Greet</button>
</div>
<div id="result"></div>

<script src="/main.js"></script>
</body>
</html>

对于一些项目,由于动态样式,可能无法使用 CSS 变量。 在这种情况下,您可以使用 CSSDragPropertyCSSDragValue 应用程序选项来定义将用于指示可拖动区域的属性和值:

main.go
package main

import (
"embed"

"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)

//go:embed all:frontend/dist
var assets embed.FS

func main() {
// Create an instance of the app structure
app := NewApp()

// Create application with options
err := wails.Run(&options.App{
Title: "alwaysontop",
Width: 1024,
Height: 768,
AssetServer: &assetserver.Options{
Assets: assets,
},
Frameless: true,
CSSDragProperty: "widows",
CSSDragValue: "1",
Bind: []interface{}{
app,
},
})

if err != nil {
println("Error:", err)
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>alwaysontop</title>
</head>
<body style="widows: 1">
<div id="app"></div>
<script src="./src/main.js" type="module"></script>
</body>
</html>
全屏

如果您允许您的应用程序全屏显示,则此拖动功能将被禁用。