VIP20
本课程属于：020-Jetpack Compose界面API接入链路 移动端与Android应用开发 · 共 20 门相关课程，组合学习更完整。
查看所属VIP全部课程 →
← 返回所属目录 咨询 / 购买

Material 3组件库实战：TopAppBar等

共计 30 章节
点击此处阅读海量试读课程：100+行业、1000+细分领域
01
Material 3与TopAppBar基础
M3设计语言核心 · TopAppBar组件定位 · 与其他组件的关系
MaterialTopAppBar
02
开发环境搭建
Vite + Vue/React项目… · 安装@mui/material或相应… · 配置主题Provider
开发环境搭建Vite
03
基础TopAppBar实现
导入组件 · 设置title属性 · 展示默认样式
TopAppBar实现
04
TopAppBar导航图标
添加menu/back图标 · 绑定点击事件 · 处理导航逻辑
TopAppBar导航图标
05
TopAppBar操作按钮
添加actions区域 · 常用图标按钮（搜索 · 更多
TopAppBar操作按钮
06
滚动行为与折叠
设置滚动监听 · 实现滚动时TopAppBar隐藏/显… · 使用useScrollTrigger
滚动行为折叠
07
中型TopAppBar
MediumAppBar实现 · 标题渐变动画 · 背景色变化
TopAppBarMediumAppBar
08
大型TopAppBar
LargeAppBar实现 · 底部内容区与标题对齐 · 弹性滚动效果
TopAppBar大型
09
TopAppBar颜色定制
主色 · 表面色 · 标题颜色通过主题覆盖
TopAppBar颜色定制
10
顶部应用栏与底部导航联动
TopAppBar + Bottom…
顶部应用栏底部导航联动
11
TopAppBar与其他组件组合
搭配Drawer · Tabs · SearchBar的集成方式
TopAppBar其他组件组合
12
响应式适配
不同断点下TopAppBar尺寸变化 · 移动端和桌面端布局切换
响应式适配TopAppBar
13
动画与过渡
标题缩放 · 背景色渐变 · 图标旋转等CSS动画实现
动画过渡
14
无障碍支持
aria属性 · 角色标记 · 键盘导航
无障碍支持aria
15
自定义插槽与扩展
使用slots自定义左侧/右侧内容 · 替换为复杂控件
自定义插槽扩展
16
BottomAppBar基础
底部应用栏组件引入 · 与FAB结合 · 剪切效果配置
BottomAppBar底部应用栏组件引…
17
BottomAppBar动作与对齐
中心FAB · 浮动动作 · 底部图标扩展
BottomAppBar动作
18
NavigationBar组件
底部导航栏实现 · 标签切换 · 徽章显示
NavigationBa…组件
19
NavigationRail组件
侧边导航栏 · 图标+标签布局 · 扩展/收缩模式
NavigationRa…组件
20
SearchBar组件
搜索栏与TopAppBar集成 · 展开收起动画 · 搜索建议
SearchBar组件
21
TabBar组件
顶部选项卡 · 与TopAppBar嵌套使用 · 可滚动模式
TabBar组件
22
Toolbar自定义
替换默认工具栏 · 添加自定义控件 · 调整高度与内边距
Toolbar自定义
23
主题系统深入
深色模式 · 强调色 · 表面色对TopAppBar的影响
主题系统深入深色模式
24
状态管理集成
如Redux/Vuex中管理TopA… · 动态切换类型
状态管理集成Redux/Vuex
25
性能优化
减少重排 · 使用will-change · 懒加载actions
性能优化减少重排
26
常见错误与调试
TypeError · 主题未生效 · 滚动不响应
常见错误调试
27
单元测试
使用Testing Library测… · 事件触发 · 状态变化
单元测试Testing
28
部署与构建
Vite build · 静态资源优化 · CDN部署
部署构建
29
真实项目案例
企业官网顶部导航实现 · 包含搜索 · 用户菜单
真实项目案例企业官网顶部导航…
30
组件库扩展
基于TopAppBar二次封装业务组… · 发布npm包流程
组件库扩展TopAppBar