LazyRow / LazyColumnのTipsメモ

LazyRow、LazyColumnでちょくちょく使うけど覚えられないのでちょっとしたことをメモってます。

最初のコード

これから先、全て↓のコードを基礎にしていきます。
変更箇所はExample()内です。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTipsTheme {
                MainContent()
            }
        }
    }
}

@Composable
private fun MainContent() {
    Scaffold(
        topBar = { TopAppBar(title = { Text(text = "Compose Tips") }) },
    ) {
        Example()
    }
}

@Composable
private fun Example() {
    LazyColumn {
        items(10) {
            Box(
                modifier = Modifier
                    .background(Color(0xff0000ff - 0x000010 * it))
                    .height(150.dp)
                    .fillMaxWidth(),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = it.toString(),
                    color = Color.White,
                    fontSize = 24.sp
                )
            }
        }
    }
}

LazyColumnのまわりに余白を入れたい

Modifier.paddingで余白を入れると、

@Composable
private fun Example() {
    LazyColumn(modifier = Modifier.padding(24.dp)) {
        items(10) {
            Box(
                modifier = Modifier
                    .background(Color.Blue)
                    .height(150.dp)
                    .fillMaxWidth(),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = it.toString(),
                    color = Color.White,
                    fontSize = 24.sp
                )
            }
        }
    }
}

こんな感じでスクロールした時にイマイチになります。

そんな時に

LazyColumn(contentPadding = PaddingValues(24.dp))

を使うと


コンテンツのまわりにだけpaddingされて、スクロールしても不自然な余白ができません。

アイテムの間に空白を入れたい

ここからはcontentPaddingを入れた状態で書いていきます

コンテンツの間にpaddingを入れたい時、パッと思いつくのは中身にpaddingを持たせる方法

@Composable
private fun Example() {
    LazyColumn(contentPadding = PaddingValues(24.dp)) {
        items(10) {
            Box(
                modifier = Modifier
                    .background(Color(0xff0000ff - 0x000010 * it))
                    .height(150.dp)
                    .fillMaxWidth()
                    .padding(bottom = 16.dp),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = it.toString(),
                    color = Color.White,
                    fontSize = 24.sp
                )
            }
        }
    }
}

うまくいかない(これはこれでそうなるんだって思った)

ちゃんとうまくいく方法は

LazyColumn(verticalArrangement = Arrangement.spacedBy(16.dp))

とする

そしたら

WIP

とりあえず公開して、これからもLazyColumnとかの他の引数についても書くので追記していく(つもりでいる)