Compose导航初步总结

最新推荐文章于 2025-02-16 13:14:30 发布

daweibalang717

最新推荐文章于 2025-02-16 13:14:30 发布

阅读量360

点赞数 5

分类专栏： Kotlin 学习记录文章标签： android

本文链接：https://blog.youkuaiyun.com/daweibalang717/article/details/144397955

版权

Kotlin 学习记录专栏收录该内容

4 篇文章

订阅专栏

脚手架（Scaffold）相关组件
- Scaffold：
  - 特点：这是最常用的脚手架组件，提供了构建页面布局的基本框架。它包含用于设置顶部应用栏（TopAppBar）的topBar参数、放置底部栏（BottomAppBar）的bottomBar参数、定义抽屉式导航（NavigationDrawer）内容的drawerContent参数，以及填充页面主体内容的content参数。可以方便地构建出具有标准布局结构的屏幕，适用于大多数常规应用页面。
  - 应用场景：例如在新闻阅读应用中，可在顶部放置带有标题和搜索功能的 TopAppBar，底部放用于切换新闻分类的 BottomAppBar，主体部分展示新闻列表，还能添加抽屉式导航用于用户设置和其他功能模块。
- NavigationSuiteScaffold：
  - 特点：是 Jetpack Compose Navigation 库中的组件，紧密结合 Navigation 组件，用于在导航过程中维护连贯的页面布局。它能很好地管理多个导航目的地之间的关系，将目的地对应的页面内容嵌入到布局结构中，并且统一设置顶部栏、底部栏等公共页面元素。
  - 应用场景：适合构建具有多个相互关联的页面，且需要频繁通过导航切换页面的应用，如电商应用中商城、消息、个人中心等多个模块之间的导航。
顶部导航相关组件
- TopAppBar：
  - 特点：位于屏幕顶部，主要用于展示应用标题、导航图标（如返回上一级页面、打开抽屉式导航）和操作图标（如搜索、分享）。为用户提供页面相关的关键信息和少量操作入口。
  - 应用场景：广泛应用于各种应用场景，如在内容浏览应用中展示当前内容所属类别标题，通过左边返回图标让用户返回上一层级，右边的搜索图标方便用户查找特定内容。
底部导航相关组件
- BottomNavigation：
  - 特点：通常位于屏幕底部，用于在几个主要的、平级的页面或功能模块之间进行切换。它包含多个导航选项，每个选项有对应的图标和文字标签，并且会显示当前选中的选项状态。
  - 应用场景：适合在手机等竖屏设备上使用，当应用有 3 - 5 个主要功能模块需要频繁切换时很合适，例如生活服务应用中 “首页、订单、消息、我的” 等模块之间的切换。
- BottomAppBar：
  - 特点：位于屏幕底部，侧重于放置与当前页面内容相关的操作按钮，也可以有一定的导航功能。常与 FloatingActionButton 结合使用，FloatingActionButton 悬浮在 BottomAppBar 之上，提供一个突出的主要操作。
  - 应用场景：在音乐播放应用中，可放置播放 / 暂停、上一首 / 下一首、音量调节等操作按钮，辅助用户对当前播放的音乐进行操作。
侧边栏导航相关组件
- NavigationRail：
  - 特点：固定在屏幕侧边（通常是左侧），垂直排列导航选项，每个选项有图标和文字标签。与页面主体内容并列展示，用户可以随时点击进行功能模块切换，特别适合宽屏设备。
  - 应用场景：在平板应用或桌面应用中很实用，如在绘图应用平板版中包含 “画笔工具、形状工具、颜色选择、图层管理、滤镜效果” 等工具模块的导航选项，方便用户在操作过程中切换工具。
- ModalNavigationDrawer：
  - 特点：隐藏在屏幕边缘（通常是左侧或右侧），通过滑动或点击菜单图标触发显示。打开时会覆盖部分或全部屏幕内容，形成模态效果，焦点集中在抽屉内的导航选项上。
  - 应用场景：适合放置较多导航选项或包含用户设置等内容的菜单，在屏幕空间有限的设备上，不需要导航时不占用空间，例如在移动办公应用中放置 “文档管理、日程安排、团队协作、设置” 等功能选项。
- NavigationDrawer：
  - 特点：与 ModalNavigationDrawer 类似的抽屉式导航，但模态效果相对较弱，在某些情况下允许用户同时操作抽屉内和抽屉后的内容。
  - 应用场景：当应用需要相对不那么强制模态效果的侧边栏导航时使用，如在多媒体应用中放置 “本地媒体、在线媒体、播放列表” 等导航选项，用户在播放媒体时也能打开抽屉进行导航。