Tauri应用开发实践指南（6）— Tauri 主题&多语言设置开发

前言

在现代应用开发中,用户界面的主题和多语言支持是提升用户体验的关键因素。本文将介绍如何在Tauri应用中实现窗口主题设置和多语言设置的开发,并提供更多实用的技巧和最佳实践。

我们在上一节中实现了集成本地数据库的操作，现在通过这个能力再实现主题&多语言的变更，可以充分的理解和实践Tauri。

主题设置的两种方式

在 Tauri 应用中,窗口主题可以通过两种方式进行设置:静态设置和动态设置。这里的静态和动态指的是原生窗口的动态和静态，不是 DOM 层面主题颜色的动态和静态。

静态设置

静态设置是指在应用初始化时就定义好的主题,不会在运行时发生变化。这种方式适用于那些不需要频繁更改主题的应用。

实现方法是在Tauri的配置文件 tauri.conf.json 中设置主题相关参数：

{
   
   
  "tauri": {
   
   
    "windows": [
      {
   
   
        "theme": "Light"
      }
    ]
  }
}

具体可参考：https://tauri.app/v1/api/config/#theme

动态设置

动态设置允许用户在应用运行时更改主题。这种方式提供了更高的灵活性,适用于需要根据用户偏好或系统设置自动调整主题的应用。

当然，为了更好的体验，我们一般都是动态设置主题的方案，不过在 <font style="color:rgb(38, 38, 38);">Tauri</font> 中暂时没有提供相应的 API，然后作者通过查询资料，发现了一个开源插件可以实现，下面就详细讲解一下如何动态实现主题的变更。

主题变更的具体实现

整体思路如下所示：

这个流程是循环往复的，闭合整个主题变更的流程，下面就是细节实现了：

倒入插件tauri-plugin-theme

具有参考：https://github.com/wyhaya/tauri-plugin-theme

需要注意的是：tauri1 和 tauri2 在使用的时候有所区别，引入的版本也会不一样，作者的版本是 V1，因为 V2 现在还是 beta 版本。

依赖添加：

tauri-plugin-theme = "0.2.0"

主进程代码修改：

引入 tauri_plugin_theme，然后在 plugin 里面添加并注册上下文。

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use tauri_plugin_theme::ThemePlugin; 

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(name: &str) -> String {
   
   
    format!("Hello, {}! You've been greeted from Rust!", name)
}

fn main() {
   
   
    let mut ctx = tauri::generate_context!();
    tauri::Builder::default()
        .plugin(tauri_plugin_sql::Builder::default().build())
        .plugin(ThemePlugin::init(ctx.config_mut()))
        .invoke_handler(tauri::generate_handler![greet])
        .run(ctx)
        .expect("error while running tauri application");
}

主题修改核心逻辑

App.tsx 中需要和框架联动注册全局 DOM 主题色。

import {
   
    HashRouter } from "react-router-dom";
import {
   
    ConfigProvider, theme } from "antd";
import {
   
    ConfigProvider as