Google uses AI technology to translate content into your preferred language. AI translations can contain errors.
布局和导航模式
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
如果您的应用包含多个供用户浏览的目标位置,我们建议您采用其他应用常用的布局和导航配对。
由于许多用户已经掌握了这些配对的心理模型,因此您的应用对他们来说会更加直观。
布局和导航配对
导航栏和模态抽屉式导航栏用作父布局视图和主要导航目标位置的主要导航模式。

导航栏可以在同一层次结构级别中容纳三到五个导航目标位置。对于大屏幕,此组件会转换为侧边导航栏。
虽然抽屉式导航栏可以容纳五个以上的导航目标位置,但这种模式不如导航栏理想。
这是因为,在紧凑型设备上,用户必须触及顶部栏。

Material 3 标签页和底部应用栏是辅助导航
模式,可用于补充主要导航或显示在子
视图中。
在这里,标签页充当辅助导航层,用于对同级内容进行分组。
布局操作
提供控件,让用户能够完成操作。常见模式包括顶部栏操作、悬浮操作按钮 (FAB) 和菜单。
对于最重要的操作,FAB 会为用户提供一个醒目的大按钮
。在此级别,一次仅提供一项操作。FAB 可以显示为多种尺寸和展开形式,其中包含标签。使用 Scaffold 固定 FAB,以确保即使在
滚动时它也始终可见。

一个悬浮操作按钮 (FAB),可让用户向植物图库中添加植物
您可以将辅助操作放置在顶部栏中,或者如果它与相关内容分组在一起,则放置在页面中。
顶部栏中的提醒操作
(左)和列表项内嵌的溢出图标(右)
对于任何不需要立即或频繁执行的其他操作,请将这些操作添加到溢出菜单中。
自适应导航
为窗口大小类使用正确的布局。避免在不同尺寸中使用相同的底部导航栏。
check_circle
正确做法
调整导航,以便在大屏幕上使用侧边导航栏。由于用户在较大设备上的手部放置位置以及导航项之间的间距较大,侧边导航栏更符合人体工程学,并且在视觉上更加平衡。
cancel
错误做法
在大屏幕尺寸上使用底部导航栏。
中等尺寸可以使用侧边导航栏或横向导航项。
虽然紧凑,但在封面屏幕上,侧边导航栏可能更符合人体工程学。
较大的封面可以利用任一导航方向。考虑用户可能会如何与内容互动。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2026-06-18。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2026-06-18。"],[],[]]