Scrolling

Scroll modifiers

verticalScroll 및 modifier horizontalScroll 자는 콘텐츠의 경계가 최대 크기 제약보다 클때 사용자가 요소를 스크롤 할 수 있도록 하는 가장 간단한 방법을 제공 verticlaScroll 및 horizontalScroll modifier를 사용하면 콘텐츠를 변환하거나 오프셋 할 필요가 없다.

@Composable
private fun ScrollBoxes() {
    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .verticalScroll(rememberScrollState())
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}

스크롤 위치를 변경 ScrollState 하거나 현재 상태를 가져올 수 있습니다. 기본 매개변수로 만들려면 .을 사용합니다 rememberScrollState().

@Composable
private fun ScrollBoxesSmooth() {
    // Smoothly scroll 100px on first composition
    val state = rememberScrollState()
    LaunchedEffect(Unit) { state.animateScrollTo(100) }

    Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .padding(horizontal = 8.dp)
            .verticalScroll(state)
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }
}

Scroll 가능한 modifier

modifier는 스크롤 제스처를 감지하고 델타를 캡처하지만 콘텐츠를 자동으로 오프셋하지 않는다는 scrollable점에서 스크롤 modifier와 다르다

대신 이 modifier가 올바르게 작동하는데 필용한

Column Scroll

@Composable
fun ScrollableColumn(
    modifier: Modifier = Modifier
) {
    val scrollState = rememberScrollState()
    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(12.dp)
            .verticalScroll(scrollState)
    ) {
        for (i in 0..100) {
            TextCard(index = i)
        }
    }
}

@Composable
fun TextCard(index: Int) {
    Card(
        Modifier
            .padding(20.dp)
            .border(width = 1.dp, color = Color.Black)
            .background(color = Color.Blue)
            .fillMaxWidth()
            .height(200.dp)
    ) {
        Box(contentAlignment = Alignment.Center) {
            Text("Text $index")
        }
    }
}

Row Scroll

@Composable
fun ScrollableColumn(
    modifier: Modifier = Modifier
) {
    val scrollState = rememberScrollState()
    Row(
        modifier = modifier
            .fillMaxSize()
            .padding(12.dp)
            .horizontalScroll(scrollState)
    ) {
        for (i in 0..1000) {
            TextCard(index = i)
        }
    }
}

@Composable
fun TextCard(index: Int) {
    Card(
        Modifier
            .padding(20.dp)
            .border(width = 1.dp, color = Color.Black)
            .background(color = Color.Blue)
            .fillMaxHeight()
            .height(200.dp)
    ) {
        Box(contentAlignment = Alignment.Center) {
            Text("Text $index")
        }
    }
}

Column을 Row로 바꾸고 fillMaxWidth를 fillMaxHeight로 바꾸면 Row로 사용가능