tauri-plugin-edge-to-edge

Crates.iotauri-plugin-edge-to-edge
lib.rstauri-plugin-edge-to-edge
version0.3.3
created_at2025-11-26 06:05:46.000104+00
updated_at2025-11-26 08:46:57.02625+00
descriptionTauri plugin for iOS/Android Edge-to-Edge fullscreen support with safe area injection
homepagehttps://github.com/1600822305/tauri-plugin-edge-to-edge
repositoryhttps://github.com/1600822305/tauri-plugin-edge-to-edge
max_upload_size
id1951007
size166,902
(1600822305)

documentation

https://github.com/1600822305/tauri-plugin-edge-to-edge/blob/main/README.md

README

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 变量：

变量名 描述
--safe-area-inset-top 顶部安全区域 (状态栏)
--safe-area-inset-bottom 底部安全区域 (Home Indicator)
--safe-area-top 同上（别名）
--safe-area-bottom 同上（别名）
--safe-area-bottom-computed 计算后的底部区域
--keyboard-height 键盘高度
--keyboard-visible 键盘是否可见 (1/0)

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);
});

平台支持

平台 支持
iOS
Android
macOS/Windows/Linux (返回默认值)
Commit count: 0

cargo fmt