21 lines
1017 B
Markdown
21 lines
1017 B
Markdown
|
# Skill：底部导航栏（Tab 栏）
|
|||
|
|
|
|||
|
|
与具体业务无关的底部 Tab 栏设计：显示条件、实现方式与选中态。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 显示条件
|
|||
|
|
|
|||
|
|
- 仅在部分主 Tab 页显示：如会话列表、回忆录、我的（以 `Screen.ConversationList`、`Screen.MyMemoir`、`Screen.Profile` 等当前路由判断）。
|
|||
|
|
- 子页（如设置、关于、FAQ）不显示底部栏。
|
|||
|
|
|
|||
|
|
## 实现
|
|||
|
|
|
|||
|
|
- 在 `Scaffold.bottomBar` 中按 `currentRoute` 条件渲染底部栏；使用 `Surface` + `windowInsetsPadding(WindowInsets.navigationBars)` 避免与系统导航栏重叠。
|
|||
|
|
- 底部项使用 **AppDestinations** 枚举（如 CHAT、MEMOIR、PROFILE），每项含 label、icon；点击时 `navController.navigate(对应 Screen.route)` 并配合 `popUpTo` 控制返回栈。
|
|||
|
|
|
|||
|
|
## 选中态
|
|||
|
|
|
|||
|
|
- 通过 `currentDestination` 与当前路由同步（`LaunchedEffect(currentRoute)`），保证高亮与实际页面一致。
|
|||
|
|
- 可选：选中缩放/按下缩放等动画（如 `BottomNavItem` 中的 `animateFloatAsState`）。
|