桌面应用 on Liangweidong's blog

Tauri 2.x 跨平台桌面应用：Rust + WebView2 实战

Fri, 15 May 2020 00:00:00 +0800

什么是 Tauri 2.x

Tauri 是 2020 年起 Rust 生态的跨平台桌面应用框架，2.0 版本（2024-10 GA）带来更完善的插件体系和移动端支持。

核心架构

前端：任意 Web 框架（React / Vue / Svelte / Solid）
后端：Rust 二进制，编译成原生代码
WebView：复用系统 WebView（Windows WebView2 / macOS WKWebView / Linux WebKitGTK）
进程间通信：Rust 命令 + JS 桥

优势

包大小 2~10MB（vs Electron 80MB+）
内存低：复用系统 WebView，不开新 Chromium
Rust 内存安全：无 GC 抖动
细粒度权限：声明式 ACL
移动端支持（2.0+）：iOS / Android

前置环境

通用

Rust 工具链：curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
Node.js 18+（推荐 22 LTS）
包管理：pnpm

Windows

Microsoft C++ Build Tools（安装时勾选"使用 C++ 的桌面开发"）
WebView2 Runtime（Win10 1803+ 预装）
- 旧版：下载 https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/

macOS

1

xcode-select --install

Linux (Debian/Ubuntu)

1
2
3
4
5
6
7
8


sudo apt install -y \
 libwebkit2gtk-4.1-dev \
 libgtk-3-dev \
 libayatana-appindicator3-dev \
 librsvg2-dev \
 libssl-dev \
 libjavascriptcoregtk-4.1-dev \
 libsoup-3.0-dev

创建项目

1. 创建工作区

1
2
3
4


mkdir -p tauri-app && cd tauri-app

# pnpm-workspace.yaml
nvim pnpm-workspace.yaml

1
2
3


packages:
 - 'frontend'
 - 'src-tauri'

2. 创建 Vite + React 前端

1

pnpm create vite frontend --template react-ts

3. 添加 Tauri CLI

1

pnpm add -D @tauri-apps/cli@latest -w

package.json 会加：

1

"@tauri-apps/cli": "^2.11.1"

4. 初始化 Tauri

1

pnpm tauri init

按提示填写：

1
2
3
4
5
6


✔ What is your app name? · tauri-app
✔ What should the window title be? · tauri-app
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../frontend/dist
✔ What is the url of your dev server? http://localhost:1420
✔ What is your frontend dev command? · pnpm -F frontend dev
✔ What is your frontend build command? · pnpm -F frontend build

5. 安装依赖

1
2


pnpm install
mkdir -p frontend/dist # dist 必须存在

6. 修改 tauri.conf.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


{
 "productName": "tauri-app",
 "version": "0.1.0",
 "identifier": "com.example.tauri-app",
 "build": {
 "frontendDist": "../frontend/dist",
 "devUrl": "http://localhost:1420",
 "beforeDevCommand": "pnpm -F frontend dev",
 "beforeBuildCommand": "pnpm -F frontend build"
 },
 "app": {
 "windows": [
 {
 "title": "tauri-app",
 "width": 1200,
 "height": 800
 }
 ],
 "security": {
 "csp": null
 }
 }
}

开发与打包

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# 开发（自动打开 DevTools 调试）
pnpm tauri dev

# 打包
pnpm tauri build

# 结果
# Windows: src-tauri/target/release/tauri-app.exe
# macOS: src-tauri/target/release/bundle/macos/tauri-app.app
# Linux: src-tauri/target/release/bundle/deb/*.deb

Cargo 工作区改造

Tauri 2.x 推荐用 Cargo 工作区管理（多包）：

1
2
3
4


# Cargo.toml (根目录)
[workspace]
members = ["src-tauri"]
resolver = "2"

迁移步骤：

删 src-tauri/target（构建会在根目录的 target 重新生成）
迁移 src-tauri/.gitignore 到根目录并修改
删 frontend/.gitignore（如果根目录有覆盖）

根目录 .gitignore：

1
2
3
4
5


**/target/
/src-tauri/gen/schemas

**/node_modules
**/dist

Vite 配置

frontend/vite.config.ts：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const host = process.env.TAURI_DEV_HOST;

export default defineConfig({
 plugins: [react()],
 // 防止 Vite 清除 Rust 显示的错误
 clearScreen: false,
 server: {
 port: 5173,
 strictPort: true, // Tauri 需要固定端口
 host: host || false,
 hmr: host
 ? {
 protocol: "ws",
 host,
 port: 5174,
 }
 : undefined,
 watch: {
 // 告诉 Vite 忽略 src-tauri 目录
 ignored: ["**/src-tauri/**"],
 },
 },
 envPrefix: ["VITE_", "TAURI_ENV_*"],
 build: {
 // Windows 用 chromium，其他用 safari13
 target:
 process.env.TAURI_ENV_PLATFORM == "windows" ? "chrome105" : "safari13",
 minify: !process.env.TAURI_ENV_DEBUG ? "esbuild" : false,
 sourcemap: !!process.env.TAURI_ENV_DEBUG,
 },
});

Rust 后端命令

Tauri 2.x 用 #[tauri::command] 宏定义命令：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


// src-tauri/src/main.rs (或 src/lib.rs)
use tauri::Manager;

#[tauri::command]
fn greet(name: &str) -> String {
 format!("Hello, {}! 你好, Tauri!", name)
}

#[tauri::command]
async fn fetch_data(url: String) -> Result<String, String> {
 reqwest::get(&url)
 .await
 .map_err(|e| e.to_string())?
 .text()
 .await
 .map_err(|e| e.to_string())
}

fn main() {
 tauri::Builder::default()
 .invoke_handler(tauri::generate_handler![greet, fetch_data])
 .setup(|app| {
 #[cfg(debug_assertions)]
 {
 let window = app.get_webview_window("main").unwrap();
 window.open_devtools();
 }
 Ok(())
 })
 .run(tauri::generate_context!())
 .expect("error while running tauri application");
}

前端调用 Rust 命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// frontend/src/App.tsx
import { invoke } from "@tauri-apps/api/core";
import { useState } from "react";

function App() {
 const [greeting, setGreeting] = useState("");

 async function handleClick() {
 const msg = await invoke<string>("greet", { name: "World" });
 setGreeting(msg);
 }

 return (
 <div>
 <button onClick={handleClick}>调用 Rust</button>
 <p>{greeting}</p>
 </div>
 );
}

export default App;

常用插件

1
2
3
4
5
6
7
8


pnpm tauri add fs
pnpm tauri add dialog
pnpm tauri add notification
pnpm tauri add shell
pnpm tauri add http
pnpm tauri add store
pnpm tauri add window
pnpm tauri add updater

权限配置

src-tauri/capabilities/default.json：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{
 "$schema": "../gen/schemas/desktop-schema.json",
 "identifier": "default",
 "description": "默认权限",
 "windows": ["main"],
 "permissions": [
 "core:default",
 "fs:allow-read-text-file",
 "fs:allow-write-text-file",
 "dialog:default",
 "notification:default"
 ]
}

文件系统

1
2
3
4
5
6
7
8


// Rust
use tauri_plugin_fs::FsExt;

#[tauri::command]
fn read_config(app: tauri::AppHandle) -> Result<String, String> {
 let path = app.path().app_config_dir().unwrap().join("config.json");
 std::fs::read_to_string(path).map_err(|e| e.to_string())
}

1
2
3
4


// 前端
import { readTextFile } from '@tauri-apps/plugin-fs';

const content = await readTextFile('/path/to/file.txt');

状态管理

Tauri 用 tauri::State 在命令间共享状态：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


use std::sync::Mutex;

struct AppState {
 counter: Mutex<i32>,
}

#[tauri::command]
fn increment(state: tauri::State<AppState>) -> i32 {
 let mut count = state.counter.lock().unwrap();
 *count += 1;
 *count
}

fn main() {
 tauri::Builder::default()
 .manage(AppState { counter: Mutex::new(0) })
 .invoke_handler(tauri::generate_handler![increment])
 .run(tauri::generate_context!())
 .expect("failed to run app");
}

事件系统

1
2
3
4
5
6
7


// Rust 发送事件
use tauri::Emitter;

#[tauri::command]
fn start_task(app: tauri::AppHandle) {
 app.emit("task-progress", "started").unwrap();
}

1
2
3
4
5
6
7
8
9


// 前端监听
import { listen } from '@tauri-apps/api/event';

const unlisten = await listen<string>('task-progress', (event) => {
 console.log('收到:', event.payload);
});

// 取消监听
unlisten();

跨平台打包

1
2
3
4
5
6
7
8


# 当前平台
pnpm tauri build

# 指定平台（需要对应工具链）
pnpm tauri build --target x86_64-pc-windows-msvc
pnpm tauri build --target x86_64-apple-darwin
pnpm tauri build --target aarch64-apple-darwin
pnpm tauri build --target x86_64-unknown-linux-gnu

性能对比

指标	Tauri 2.x	Electron
包大小（Hello World）	3~5MB	80MB
内存空闲	30~80MB	100~200MB
启动时间	0.3~1s	1.5~3s
CPU 占用	低	中等

下一步

Electron 入门，看 2018-12-15《Electron 跨平台桌面应用》
桌面开发技术栈对比，看 2014-08-15《桌面开发技术栈对比》

参考资料

Tauri 官方：https://tauri.app/
Tauri 2.x 文档：https://v2.tauri.app/
Awesome Tauri：https://github.com/tauri-apps/awesome-tauri
tauri-plugin-* 插件列表：https://v2.tauri.app/plugin/

Electron 跨平台桌面应用：从零搭建到打包分发

Sat, 15 Dec 2018 00:00:00 +0800

什么是 Electron

Electron 是 GitHub 2013 年推出的开源框架，让开发者用 HTML + CSS + JavaScript 构建跨平台桌面应用。核心 = Chromium + Node.js。

优势

Web 技术栈：React / Vue / Angular 任意
跨平台：一套代码，Windows / macOS / Linux
完整 Node.js API：文件系统、子进程、网络
生态丰富：VSCode、Slack、Discord、Notion 都是 Electron

快速开始

环境要求

Node.js 18+
npm / yarn / pnpm
平台原生工具：Windows 需 Visual Studio Build Tools，macOS 需 Xcode CLT，Linux 需 libnss3 等

创建项目

1
2


mkdir my-electron-app && cd my-electron-app
npm init -y

修改 package.json：

1
2
3
4
5
6
7
8


{
 "name": "my-electron-app",
 "version": "1.0.0",
 "main": "main.js",
 "scripts": {
 "start": "electron ."
 }
}

安装：

1

npm install --save-dev electron

package.json 会加：

1
2
3


"devDependencies": {
 "electron": "^33.2.0"
}

main.js（主进程）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


const { app, BrowserWindow } = require('electron');
const path = require('path');

const createWindow = () => {
 const win = new BrowserWindow({
 width: 1200,
 height: 800,
 webPreferences: {
 preload: path.join(__dirname, 'preload.js'),
 contextIsolation: true, // 默认 true（安全）
 nodeIntegration: false, // 默认 false（安全）
 },
 });

 win.loadFile('index.html');
 // win.webContents.openDevTools();
};

app.whenReady().then(() => {
 createWindow();

 app.on('activate', () => {
 if (BrowserWindow.getAllWindows().length === 0) {
 createWindow();
 }
 });
});

app.on('window-all-closed', () => {
 if (process.platform !== 'darwin') {
 app.quit();
 }
});

preload.js（预加载）

1
2
3
4
5
6
7


const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
 sendMessage: (msg) => ipcRenderer.send('message', msg),
 onReply: (callback) => ipcRenderer.on('reply', callback),
 invokeMethod: (method, args) => ipcRenderer.invoke(method, args),
});

index.html（渲染进程）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>My App</title>
</head>
<body>
 <h1>Hello, Electron!</h1>
 <button id="btn">点击</button>
 <p id="output"></p>

 <script>
 document.getElementById('btn').addEventListener('click', () => {
 window.api.invokeMethod('greet', 'World').then((result) => {
 document.getElementById('output').textContent = result;
 });
 });
 </script>
</body>
</html>

启动

1

npm start

打开开发者工具（DevTools）：Ctrl + Shift + I

进程架构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


┌──────────────────────┐ ┌──────────────────────┐
│ Main Process │ │ Renderer Process │
│ (Node.js) │ IPC │ (Chromium) │
│ │ ←─────→ │ │
│ - 应用生命周期 │ │ - 渲染 UI │
│ - 创建 / 关闭窗口 │ │ - Web 前端 │
│ - 菜单 / 托盘 │ │ - 不能直接用 Node │
│ - 调用系统 API │ │ │
└──────────────────────┘ └──────────────────────┘
 ↑ ↑
 │ │
 │ ┌────────────────┐ │
 └────────→│ Preload │←──────┘
 │ (桥接) │
 │ - contextBridge│
 │ - 暴露受限 API │
 └────────────────┘

IPC 通信

方式 1：invoke / handle（推荐）

渲染进程：

1
2
3


// renderer.js
const result = await window.api.invokeMethod('greet', 'World');
console.log(result);

preload.js：

1
2
3


contextBridge.exposeInMainWorld('api', {
 invokeMethod: (method, args) => ipcRenderer.invoke(method, args),
});

主进程：

1
2
3
4
5


const { ipcMain } = require('electron');

ipcMain.handle('greet', async (event, name) => {
 return `Hello, ${name}!`;
});

方式 2：send / on（单向）

渲染进程：

1
2
3
4


window.api.sendMessage('用户点击了');
window.api.onReply((event, data) => {
 console.log('收到主进程回复:', data);
});

preload.js：

1
2
3
4


contextBridge.exposeInMainWorld('api', {
 sendMessage: (msg) => ipcRenderer.send('message', msg),
 onReply: (callback) => ipcRenderer.on('reply', callback),
});

主进程：

1
2
3
4


ipcMain.on('message', (event, msg) => {
 console.log('收到:', msg);
 event.sender.send('reply', '已收到');
});

主进程 API

菜单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


const { Menu, app } = require('electron');

const template = [
 {
 label: '文件',
 submenu: [
 { label: '新建', accelerator: 'CmdOrCtrl+N', click: () => { /* ... */ } },
 { type: 'separator' },
 { role: 'quit' },
 ],
 },
 {
 label: '编辑',
 submenu: [
 { role: 'undo' },
 { role: 'redo' },
 { type: 'separator' },
 { role: 'cut' },
 { role: 'copy' },
 { role: 'paste' },
 ],
 },
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

对话框

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


const { dialog } = require('electron');

// 打开文件
const result = await dialog.showOpenDialog({
 title: '选择文件',
 filters: [{ name: 'Text', extensions: ['txt', 'md'] }],
});
console.log(result.filePaths);

// 保存文件
const result = await dialog.showSaveDialog({
 title: '保存',
 defaultPath: 'untitled.txt',
});

// 消息框
await dialog.showMessageBox({
 type: 'info',
 title: '提示',
 message: '操作成功',
 detail: '已保存到磁盘',
});

系统托盘

1
2
3
4
5
6
7
8


const { Tray, Menu, nativeImage } = require('electron');

const tray = new Tray(nativeImage.createEmpty());
tray.setToolTip('My App');
tray.setContextMenu(Menu.buildFromTemplate([
 { label: '显示', click: () => { /* show window */ } },
 { label: '退出', click: () => { app.quit(); } },
]));

通知

1
2
3
4


new Notification({
 title: '新消息',
 body: 'Hello from main process',
}).show();

文件系统

主进程用 fs，渲染进程通过 IPC：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// 主进程
ipcMain.handle('read-file', async (event, path) => {
 const fs = require('fs/promises');
 return await fs.readFile(path, 'utf8');
});

ipcMain.handle('write-file', async (event, path, content) => {
 const fs = require('fs/promises');
 await fs.writeFile(path, content);
});

渲染进程访问

完整框架（React / Vue）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


# React + Vite
npm create vite@latest my-electron-app -- --template react-ts
cd my-electron-app
npm install
npm install --save-dev electron electron-builder

# 配置 vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
 base: './',
 plugins: [react()],
 build: {
 outDir: 'dist',
 },
});

1
2
3
4
5
6
7


// package.json
"main": "main.js",
"scripts": {
 "dev": "concurrently \"vite\" \"electron .\"",
 "build": "vite build",
 "package": "electron-builder"
}

文件结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


my-electron-app/
├── electron/
│ ├── main.js
│ └── preload.js
├── src/
│ ├── App.tsx
│ └── main.tsx
├── index.html
├── vite.config.ts
└── package.json

打包分发

electron-builder

1

npm install --save-dev electron-builder

package.json：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


{
 "build": {
 "appId": "com.example.myapp",
 "productName": "MyApp",
 "directories": {
 "output": "dist"
 },
 "files": [
 "electron/**/*",
 "dist/**/*",
 "package.json"
 ],
 "win": {
 "target": ["nsis", "portable"],
 "icon": "build/icon.ico"
 },
 "mac": {
 "target": ["dmg", "zip"],
 "icon": "build/icon.icns",
 "category": "public.app-category.developer-tools"
 },
 "linux": {
 "target": ["AppImage", "deb"],
 "icon": "build/icon.png",
 "category": "Development"
 }
 }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# 用 forge 一键导入
npx electron-forge import

# 打包
npm run make

# 结果
# Windows: out/MyApp Setup 1.0.0.exe
# macOS: out/MyApp-1.0.0.dmg
# Linux: out/MyApp-1.0.0.AppImage

electron-forge（替代方案）

1
2
3


npm install --save-dev @electron-forge/cli
npx electron-forge import
npm run make

安全最佳实践

必须开启

1
2
3
4
5
6
7
8


new BrowserWindow({
 webPreferences: {
 contextIsolation: true, // 沙箱
 nodeIntegration: false, // 渲染进程禁用 Node
 sandbox: true, // Chromium 沙箱
 preload: path.join(__dirname, 'preload.js'),
 },
});

关闭新窗口

1
2
3
4
5
6


app.on('web-contents-created', (event, contents) => {
 contents.setWindowOpenHandler(({ url }) => {
 require('electron').shell.openExternal(url);
 return { action: 'deny' };
 });
});

CSP

1
2


<meta http-equiv="Content-Security-Policy"
 content="default-src 'self'; script-src 'self'">

自动更新

1

npm install --save-dev electron-updater

1
2
3
4


// main.js
const { autoUpdater } = require('electron-updater');

autoUpdater.checkForUpdatesAndNotify();

package.json：

1
2
3
4
5
6
7


"build": {
 "publish": {
 "provider": "github",
 "owner": "yourname",
 "repo": "myapp"
 }
}

性能优化

开启 V8 缓存：--js-flags="--max-old-space-size=4096"
启用 lazy load：路由懒加载
Web Worker 处理密集计算
offscreen 渲染：截图 / 录屏

常见问题

启动白屏

通常是预加载脚本报错。检查 preload.js 路径和 contextBridge 用法。

require is not defined

渲染进程不能直接用 require，必须通过 preload.js 暴露。

跨域请求

主进程可以任意跨域；渲染进程需要用 IPC 转发到主进程发起请求。

macOS 签名

1
2
3


# 开发者证书
codesign --deep --force --verify --verbose --sign "Developer ID Application: Name" MyApp.app
xcrun notarytool submit MyApp.zip --keychain-profile "AC_PASSWORD"

下一步

Tauri 2.x 实战，看 2020-05-15《Tauri 2.x 跨平台桌面应用》
桌面开发技术栈对比，看 2014-08-15《桌面开发技术栈对比》

参考资料

Electron 官方：https://www.electronjs.org/
Electron 文档：https://www.electronjs.org/docs/latest/
electron-builder：https://www.electron.build/
electron-forge：https://www.electronforge.io/
Awesome Electron：https://github.com/sindresorhus/awesome-electron

Go-Fyne 入门：Go 跨平台 GUI 实战

Sat, 15 Oct 2016 00:00:00 +0800

什么是 Fyne

Fyne（发音 “feign”）是 2018 年起的 Go 跨平台 GUI 框架，目标：用 Go 写原生体验的桌面应用。

特点：

跨平台：Windows / macOS / Linux（也支持 FreeBSD、嵌入式）
单二进制：编译后无外部依赖
原生控件：用系统原生 GUI 库（Win32 GDI、Cocoa、GTK）
Material Design 风格：类 Flutter 的现代化外观
声明式 API：v2 起更接近 React / Flutter

安装

1
2
3
4
5
6
7
8


# Go 1.20+
go version

# 安装 fyne CLI
go install fyne.io/fyne/v2/cmd/fyne@latest

# 验证
fyne version

系统依赖

Linux (Debian / Ubuntu)

1
2
3
4
5
6
7
8
9


sudo apt install -y \
 libgl1-mesa-dev \
 xorg-dev \
 pkg-config \
 libxrandr-dev \
 libxinerama-dev \
 libxcursor-dev \
 libxi-dev \
 libxxf86vm-dev

macOS

Xcode Command Line Tools：

1

xcode-select --install

Windows

MinGW-w64 + GCC。Scoop 一键装：

1

scoop install gcc

第一个程序

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


package main

import (
 "fyne.io/fyne/v2/app"
 "fyne.io/fyne/v2/widget"
)

func main() {
 a := app.New()
 w := a.NewWindow("Hello Fyne")
 w.SetContent(widget.NewLabel("Hello, 世界!"))
 w.ShowAndRun()
}

1

go run main.go

布局

Fyne 提供 6 种布局：

布局	用途
`container.NewVBox`	垂直排列
`container.NewHBox`	水平排列
`container.NewBorder`	四边 + 中心
`container.NewGrid`	等宽网格
`container.NewGridWrap`	自适应网格
`container.NewCenter`	居中
`container.NewPadded`	加内边距
`container.NewMax`	重叠

1
2
3
4
5
6
7
8
9


vbox := container.NewVBox(
 widget.NewLabel("顶部"),
 widget.NewButton("按钮", func() {
 fmt.Println("点击")
 }),
 widget.NewEntry(),
 widget.NewLabel("底部"),
)
w.SetContent(vbox)

常用控件

基础控件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


// 文本
widget.NewLabel("静态文本")
widget.NewEntry() // 单行输入
widget.NewMultiLineEntry() // 多行输入
widget.NewPasswordEntry() // 密码
widget.NewRichText() // 富文本

// 按钮
widget.NewButton("普通按钮", callback)
widget.NewButtonWithIcon("图标按钮", theme.DocumentIcon(), callback)
widget.NewHyperlink("链接", url)

// 选择
widget.NewCheck("复选框", onChange)
widget.NewRadio([]string{"男", "女"}, onChange)
widget.NewSelect([]string{"Java", "Go", "Rust"}, onChange)
widget.NewSlider(0, 100) // 滑块
widget.NewProgressBar() // 进度条

// 容器
widget.NewCard("标题", "副标题", content)
widget.NewAccordion() // 手风琴
widget.NewTabContainer() // 标签页
widget.NewSplit() // 分割

表单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


form := &widget.Form{
 Items: []*widget.FormItem{
 {Text: "用户名", Widget: widget.NewEntry()},
 {Text: "密码", Widget: widget.NewPasswordEntry()},
 },
 OnSubmit: func() {
 fmt.Println("提交")
 },
 OnCancel: func() {
 fmt.Println("取消")
 },
}

列表

1
2
3
4
5
6
7


list := widget.NewList(
 func() int { return len(items) },
 func() fyne.CanvasObject { return widget.NewLabel("") },
 func(i int, o fyne.CanvasObject) {
 o.(*widget.Label).SetText(items[i])
 },
)

表格

1
2
3
4
5
6
7
8
9


table := widget.NewTable(
 func() (int, int) { return len(rows), 2 },
 func() fyne.CanvasObject {
 return widget.NewLabel("wide content")
 },
 func(i int, j int, o fyne.CanvasObject) {
 o.(*widget.Label).SetText(fmt.Sprintf("%d-%d", i, j))
 },
)

Canvas 绘图

Fyne Canvas 2D API 适合自定义图形：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


import (
 "fyne.io/fyne/v2/canvas"
 "image/color"
)

// 矩形
rect := canvas.NewRectangle(color.RGBA{255, 0, 0, 255})
rect.Resize(fyne.NewSize(100, 100))

// 圆形
circle := canvas.NewCircle(color.RGBA{0, 255, 0, 255})

// 文本
text := canvas.NewText("Canvas Text", color.Black)
text.TextSize = 24

// 线条
line := canvas.NewLine(color.Black)
line.StrokeWidth = 2

// 图片
img := canvas.NewImageFromResource(resource.ExamplePng())
img.FillMode = canvas.ImageFillOriginal

// 组合
canvasContainer := container.NewWithoutLayout(rect, circle, text, line)

菜单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


menu := fyne.NewMainMenu(
 fyne.NewMenu("文件",
 fyne.NewMenuItem("新建", func() { /* ... */ }),
 fyne.NewMenuItem("打开", func() { /* ... */ }),
 fyne.NewMenuItemSeparator(),
 fyne.NewMenuItem("退出", func() { a.Quit() }),
 ),
 fyne.NewMenu("帮助",
 fyne.NewMenuItem("关于", func() { /* ... */ }),
 ),
)
w.SetMainMenu(menu)

主题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import "fyne.io/fyne/v2/theme"

// 亮色 / 暗色
a.Settings().SetTheme(theme.LightTheme())
a.Settings().SetTheme(theme.DarkTheme())

// 自定义
type MyTheme struct{}
func (m MyTheme) Color(name fyne.ThemeColorName, variant fyne.ThemeVariant) color.Color {
 return color.RGBA{0, 100, 200, 255}
}
a.Settings().SetTheme(MyTheme{})

数据绑定

Fyne v2.1+ 支持响应式数据绑定：

1
2
3
4
5
6
7
8
9


str := binding.NewString()
str.Set("Hello")

entry := widget.NewEntryWithData(str)

// 监听变化
str.AddListener(binding.NewDataListener(func() {
 fmt.Println("值变了:", str.Get())
}))

绑定类型：

binding.NewString() / NewInt() / NewFloat() / NewBool()
binding.NewList() / NewMap()

跨平台编译

1
2
3
4
5
6
7
8


# 在 macOS 上编译 Linux 版本
GOOS=linux GOARCH=amd64 go build -o myapp-linux main.go

# 编译 Windows
GOOS=windows GOARCH=amd64 go build -o myapp.exe main.go

# 编译 macOS（arm64 M1）
GOOS=darwin GOARCH=arm64 go build -o myapp-mac main.go

打包分发

Fyne 自带 fyne CLI 打包：

1
2
3
4
5
6
7


# 打包当前平台
fyne package -name MyApp -icon icon.png

# 跨平台打包（需要对应工具链）
fyne package -os darwin -name MyApp
fyne package -os linux -name MyApp
fyne package -os windows -name MyApp

打包结果：

Linux：MyApp.tar.xz（含 .desktop 文件）
macOS：MyApp.app
Windows：MyApp.exe（可加 installer）

实战：计算器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


package main

import (
 "fmt"
 "fyne.io/fyne/v2/app"
 "fyne.io/fyne/v2/container"
 "fyne.io/fyne/v2/widget"
)

func main() {
 a := app.New()
 w := a.NewWindow("计算器")
 w.Resize(fyne.NewSize(300, 400))

 output := widget.NewLabel("0")
 output.TextStyle = fyne.TextStyle{Bold: true}
 output.Alignment = fyne.TextAlignTrailing

 btn := func(label string, fn func()) *widget.Button {
 return widget.NewButton(label, fn)
 }

 digits := container.NewGridWithColumns(3,
 btn("7", func() { output.SetText(output.Text + "7") }),
 btn("8", func() { output.SetText(output.Text + "8") }),
 btn("9", func() { output.SetText(output.Text + "9") }),
 // ...
 )

 w.SetContent(container.NewVBox(output, digits))
 w.ShowAndRun()
}

实战：Todo List

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


type Todo struct {
 Title string
 Done bool
}

var todos []Todo

func main() {
 a := app.New()
 w := a.NewWindow("Todo")
 w.Resize(fyne.NewSize(400, 600))

 input := widget.NewEntry()
 input.SetPlaceHolder("输入新任务")

 list := widget.NewList(
 func() int { return len(todos) },
 func() fyne.CanvasObject {
 return container.NewHBox(
 widget.NewCheck("", nil),
 widget.NewLabel(""),
 )
 },
 func(i int, o fyne.CanvasObject) {
 c := o.(*fyne.Container)
 c.Objects[0].(*widget.Check).SetChecked(todos[i].Done)
 c.Objects[1].(*widget.Label).SetText(todos[i].Title)
 },
 )

 addBtn := widget.NewButton("添加", func() {
 if input.Text != "" {
 todos = append(todos, Todo{Title: input.Text})
 input.SetText("")
 list.Refresh()
 }
 })

 w.SetContent(container.NewVBox(
 container.NewBorder(nil, nil, nil, addBtn, input),
 list,
 ))
 w.ShowAndRun()
}

下一步

跨平台桌面技术栈对比，看 2014-08-15《桌面开发技术栈对比》
Tauri 2.x 实战，看 2020-05-15《Tauri 2.x 跨平台桌面应用》
Electron 入门，看 2018-12-15《Electron 跨平台桌面应用》

参考资料

Fyne 官方：https://fyne.io/
Fyne Tour：https://tour.fyne.io/
Fyne GitHub：https://github.com/fyne-io/fyne
Fyne 示例：https://github.com/fyne-io/fyne/tree/master/v2/cmd/fyne_demo