LazyRow/LazyColumn의 Tips 메모

레이지 로우, 레이지 컬럼에서 자주 사용하는데 기억이 안 나니까 살짝 기억해 두세요.

첫 번째 코드

지금부터 모두 ↓의 코드를 기초로 한다.
변경된 곳은 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
                )
            }
        }
    }
}

레이지컬럼 주변에 공백을 주고 싶어요.

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))

후


내용 주위만 채우고 스크롤해도 부자연스러운 공백을 표시할 수 없습니다.

항목 사이에 공백을 두려고 합니다.

여기서부터 쓰는 상태.
콘텐츠 사이에 패딩을 넣으려다 문득 패딩을 넣는 방법이 생각났어요.

@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 같은 다른 매개 변수를 쓸 거예요. 계속 보충할 거예요.