「Composeの基本レイアウト」のメモ#9 ~ホーム画面 - スクロールの実装~

10. ホーム画面 - スクロール

最小構成　

@Composable
fun HomeScreen(modifier: Modifier = Modifier) {
    // Implement composable here
    Column() {
        SearchBar()
        HomeSection(title = R.string.align_your_body) {
            AlignYourBodyRow()
        }
        HomeSection(title = R.string.favorite_collections) {
            FavoriteCollectionsGrid()
        }
    }
}

SearchBarの微調整

• 上と水平方向にそれぞれ16.dpのpaddingをつける
  • Spacer(modifier　= modifier.height(16.dp))
    • 上部のパディングがSpacerの役割であることがわかりにくなるので、Spacerを使用する
  • SearchBar(modifier = Modifier.padding(horizontal = 16.dp))
    • 水平方向のpadding

• 隙間ができる

Columnの微調整

• LazyColumnでない場合にスクロール動作を追加するときは　、modifier.verticalScrollを使用する