Y.A.M の雑記帳: Material 3 で TopAppBar の shadow がなくなったけど、コンテンツとの境界はどう表現する？

2022年11月15日火曜日

Material 3 で TopAppBar の shadow がなくなったけど、コンテンツとの境界はどう表現する？

Material 2 では TopAppBar に shadow がついていて、スクロールアウトするコンテンツとの境界として機能していました。

Material 3 では shadow はつきません。そのため、Material 2 のコードをそのまま Material 3 に移行すると、コンテンツの境界表現がなくなってしまいます。

Material 3 では shadow の代わりに色のオーバーレイでコンテンツと分離します。
そのために TopAppBarScrollBehavior を使います。


val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
Scaffold(
    topBar = {
        TopAppBar(
            title = {
                ...
            },
            scrollBehavior = scrollBehavior
        )
    },
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
) {
    LazyColumn(
        contentPadding = it
    ) {
        ...
    }
}