M3E 设计系统
M3E 设计系统 · androidx.compose.material3
App Bars：Subtitle、Flexible 与 Overflow1.5.0-alpha25
选择 Top/Bottom App Bar 变体，连接 scrollBehavior，并理解 Flexible 与自适应 action 布局。
最后更新 2026-08-01
Top App Bar 的 Expressive 增量
catalog 重点标记了带 subtitle、center aligned subtitle、LargeFlexibleTopAppBar、TwoRowsTopAppBar 和 enter/exit scroll behavior 示例。
源码当前公开：TopAppBar、CenterAlignedTopAppBar、MediumTopAppBar、MediumFlexibleTopAppBar、LargeTopAppBar、LargeFlexibleTopAppBar、TwoRowsTopAppBar。
scrollBehavior 必须接到内容
创建 TopAppBarDefaults.enterAlwaysScrollBehavior() 或 exitUntilCollapsedScrollBehavior() 后，还要把它的 nestedScrollConnection 连接到外层内容；只传给 AppBar 不会收到滚动事件。
Bottom App Bar
Expressive samples 包括 overflow 和多种 action arrangement。空间不足时应使用组件支持的 overflow 思路，不要把重要 action 静默挤出屏幕。
Flexible 不等于随意两行
Flexible 和 TwoRows API 管理展开/折叠高度、标题样式与滚动进度。若只是固定两行文本，普通 TopAppBar 的 subtitle 重载更简单。
复制即用
带 subtitle 的 TopAppBar + 滚动行为：
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.nestedScroll
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun SubtitleTopBar() {
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
TopAppBar(
title = { Text("标题") },
subtitle = { Text("副标题") },
scrollBehavior = scrollBehavior,
)
},
) { innerPadding ->
Column(Modifier.padding(innerPadding)) {
LazyColumn(Modifier.fillMaxSize()) {
items(50) { index -> Text("Item $index") }
}
}
}
}关键：nestedScroll 连接要加在外层，只传给 AppBar 收不到滚动事件。