Tauri Plugin Edge-to-Edge

为 Tauri iOS/Android 应用提供 Edge-to-Edge 全屏沉浸式体验。

功能

• iOS: 让 WKWebView 忽略安全区域，内容延伸到状态栏和底部
• Android: 启用 Edge-to-Edge 模式，透明系统栏
• CSS 变量注入: 自动注入 --safe-area-inset-* 等 CSS 变量
• 键盘支持: 监听键盘显示/隐藏，动态更新键盘高度变量

安装

1. Rust 依赖 (src-tauri/Cargo.toml)

[dependencies]
tauri-plugin-edge-to-edge = { path = "../tauri-plugin-edge-to-edge" }

2. 初始化插件 (src-tauri/src/lib.rs)

pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_edge_to_edge::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

使用

CSS 变量

插件自动注入以下 CSS 变量：

CSS 示例

.app-container {
  padding-top: var(--safe-area-top, 0px);
  padding-bottom: var(--safe-area-bottom-computed, 0px);
}

.bottom-input {
  position: fixed;
  bottom: 0;
  padding-bottom: var(--safe-area-bottom, 0px);
}

事件监听

window.addEventListener('safeAreaChanged', (event) => {
  const { top, bottom, keyboardHeight, keyboardVisible } = event.detail;
  console.log('Safe area changed:', event.detail);
});

平台支持