24 lines
948 B
Markdown
24 lines
948 B
Markdown
|
# Skill：顶部导航栏（App Bar）
|
|||
|
|
|
|||
|
|
与具体业务无关的顶部导航栏设计：透明化、状态栏占位与使用约定。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 透明化
|
|||
|
|
|
|||
|
|
- 使用 **TransparentTopAppBar**（Material3 TopAppBar 封装），支持三种模式：
|
|||
|
|
- `FULLY_TRANSPARENT`：背景完全透明。
|
|||
|
|
- `SEMI_TRANSPARENT`：半透明，可设 `alpha`。
|
|||
|
|
- `GRADIENT`：自上而下渐变透明（常用）。
|
|||
|
|
- 已处理状态栏占位：`windowInsetsPadding(WindowInsets.statusBars)`。
|
|||
|
|
- 标题/返回/图标颜色需根据背景选：浅底用 `onSurface`，深色底用浅色，以保证可读性。
|
|||
|
|
|
|||
|
|
## 使用约定
|
|||
|
|
|
|||
|
|
- 普通页：在 `Scaffold.topBar` 中放 `TransparentTopAppBar`，按需选 `transparencyType`、`gradientColors`/`alpha`。
|
|||
|
|
- 聊天页等：可用 **ChatHeader**，通过 `isTransparent`、`transparencyType`、`alpha` 控制透明效果。
|
|||
|
|
|
|||
|
|
## 文档
|
|||
|
|
|
|||
|
|
- 详细用法见：`app-android/doc/透明化导航栏使用指南.md`。
|