M3E 设计系统
M3E 设计系统 · androidx.compose.material3
Expressive Navigation：Short Bar、Wide Rail 与自适应套件1.5.0-alpha25
根据窗口宽度和目的地数量选择短导航栏、宽导航轨或 NavigationSuite，而不是手工切换组件。
最后更新 2026-08-01
ShortNavigationBar
Expressive catalog 使用 ShortNavigationBarSample 和水平 item 示例。它适合紧凑窗口中的少量顶级目的地，和传统 NavigationBar 是不同入口。
WideNavigationRail
宽 Rail 支持 collapsed/expanded、modal/dismissible modal 和不同 arrangement。展开状态能同时显示图标与标签，适合更宽窗口。
NavigationSuiteScaffold
自适应套件位于独立模块：
androidx.compose.material3:material3-adaptive-navigation-suite它根据窗口适配信息选择 NavigationBar、Rail 等容器。不要仅根据设备名称写 if (tablet)；窗口可以分屏、旋转和动态变化。
状态原则
所有导航项应连接同一份当前 destination 状态。组件切换只是呈现方式变化，不能重建一份独立 selectedIndex 导致路由与 UI 不一致。
复制即用
自适应导航套件（NavigationSuiteScaffold）：
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.vector.ImageVector
@Composable
fun AdaptiveNavigation(
current: String,
onSelect: (String) -> Unit,
) {
val destinations = listOf(
"首页" to Icons.Filled.Home,
"收藏" to Icons.Filled.Favorite,
"设置" to Icons.Filled.Settings,
)
NavigationSuiteScaffold(
navigationSuiteItems = {
destinations.forEach { (label, icon) ->
item(
label = { Text(label) },
icon = { Icon(icon, contentDescription = label) },
selected = current == label,
onClick = { onSelect(label) },
)
}
},
) {
// 内容
}
}窗口分屏或旋转时组件自动切换 NavigationBar / Rail；不要用 if (tablet) 手工判断。