[Android] LazyColumn안에 LazyVerticalGrid 넣기(nested scroll)

th.k·2023년 6월 9일
1

전제 조건

  1. LazyColumn안에 LazyVerticalGrid가 들어감
  2. LazyVerticalGrid의 정확한 height는 몰라도 예상하는 최대 height 값이 있어야 함

최대 height값을 어떻게든 지정할 수 없다면 이 방법은 사용할 수 없습니다..

본인은 화면 중간에 LazyVerticalGrid가 들어가고, 표시해야 하는 데이터의 최대 개수가 정해져 있었기 때문에 해당 방법이 가능했다.

방법

거창한건 아니고...
LazyColumn 안에 height가 지정되지 않은 LazyVerticalGrid를 집어넣게 되면 height를 제대로 측정하지 못해서 넣을 수가 없는 것이기 때문에
최대 height라도 지정을 해주면 정상적으로 동작한다.

LazyColumn(
    modifier = Modifier.fillMaxSize()
) {
    item {
        // 어떤 View...
    }

    item {
        LazyVerticalGrid(
            modifier = Modifier
                .fillMaxWidth()
                .heightIn(max = 700.dp)		// 최대 height 제한
                .wrapContentHeight(),		// wrapContent 설정
            userScrollEnabled = false		// 스크롤 막기
        ) {
            items(35) {
                Box(
                    modifier = Modifier
                        .aspectRatio(1f)
                        .background(color = Color.White)
                ) {
                    Text(text = it.toString())
                }
            }
        }
    }

    item {
        // 또다른 View...
    }
}

중요한건 3가지

  • heightIn으로 높이 제한
  • wrapContentHeight로 높이 감싸기
  • userScrollEnabled를 false 주기

스크롤을 막는 이유는 막지 않으면 LazyVerticalGrid가 사용자 스크롤에 반응을 해서 오버 스크롤 효과가 LazyVerticalGrid의 상단과 하단에 나타난다. 그리고 동작도 이상해지는듯..

profile
고생끝에롹이온다

0개의 댓글