2022年11月15日火曜日

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

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


Material 3 では shadow はつきません。そのため、Material 2 のコードをそのまま Material 3 に移行すると、コンテンツの境界表現がなくなってしまいます。
Material 3 では shadow の代わりに色のオーバーレイでコンテンツと分離します。
そのために TopAppBarScrollBehavior を使います。
  1. val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()  
  2. Scaffold(  
  3.     topBar = {  
  4.         TopAppBar(  
  5.             title = {  
  6.                 ...  
  7.             },  
  8.             scrollBehavior = scrollBehavior  
  9.         )  
  10.     },  
  11.     modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)  
  12. ) {  
  13.     LazyColumn(  
  14.         contentPadding = it  
  15.     ) {  
  16.         ...  
  17.     }  
  18. }  
TopAppBarScrollBehavior として
  • PinnedScrollBehavior
  • EnterAlwaysScrollBehavior
  • ExitUntilCollapsedScrollBehavior
が用意されています。

TopAppBarDefaults.pinnedScrollBehavior()

TopAppBarDefaults.enterAlwaysScrollBehavior()

ExitUntilCollapsedScrollBehavior




0 件のコメント:

コメントを投稿