[Android Compose] Modifier.weight 사용 시, import 오류

안녕하세요.

 

compose로 개발을 진행할 때, Modifier.weight를 사용할 때 이상한 import가 잡히면서 사용이 안되는 경우가 발생하여 이 글을 작성하게 됐습니다.

import androidx.compose.foundation.layout.FlowColumnScopeInstance.weight

 

아래 예제코드에서 에러가 발생하는 부분과 정상적으로 동작하는 부분이 있습니다.

Column(
    modifier = Modifier
        .fillMaxSize()
        .weight(1f) // 에러 발생
) {
    DeviceImagePager(
        pagerState = imagePagerState,
    )
    Column(
        modifier = Modifier
            .weight(1f) // 정상 동작
            .verticalScroll(rememberScrollState())
    ) {
        PhotoSection("section 1") // 실제로 weight를 사용했을때 에러 발생 시점
        PhotoSection("section 2")
    }
    Button(text = "Photo upload", onClick = {})
}

 

이런 에러가 왜 발생했는지를 생각해보다가 weight의 정의를 따라가봤고,아래와 같은 내용이 나옵니다.

정의: (interface ColumnScope) Size the element's height proportional to its weight relative to other weighted sibling elements in the Column. The parent will divide the vertical space remaining after measuring unweighted child elements and distribute it according to this weight.

 

정의된 내용을 해석해보면 "부모" 라는 내용이 언급됩니다.

해석: Column 안에서, 다른 weight가 설정된 형제 요소들과의 비율(weight)에 따라 요소의 높이를 비례적으로 설정합니다. 부모는 weight가 없는 자식 요소들의 높이를 먼저 측정한 후 남은 수직 공간을 weight에 따라 분배합니다.

 

위에 있는 예제코드를 살펴보면 최상위 부모 역할을 하는 Column은 weight의 비율을 분배해서 적용할 부모가 없기때문에 툴에서 내가 사용하려는 weight가 뭔질 모르고 임의로 import를 끌어다가 쓰니 에러가 발생한 상황입니다.

 

 

실제로 이 에러를 처음 접하게 된 부분은 PhotoSection이라는 컴포넌트에 weight를 적용하려고 했을 때 발생했었습니다.

"분명 PhotoSection 컴포넌트는 Column 내부에서 잘 동작하는데 왜 weight를 적용하면 안돼지?" 라는 생각을 했습니다.

결국 PhotoSection 코드 안에서 부모 Column은 더 위의 부모가 없기 때문에 발생한 상황이였습니다. 

@Composable
fun PhotoSection(title: String) {
	Column(modifier = Modifier.weight(1f)) { // 에러 발생
        Text(text = title)
        ....
    }
}

 

결론
처음 예제에서 볼 수 있듯이 부모(최상위 Column) 안에서 실제 자식 컴포넌트(Pager, Column, Button 중 Column)의 Modifier.weight를 이용 한다면 문제없이 사용할 수 있습니다.

 

 

 

해당 내용은 안드로이드 스튜디오에서 Modifier.weight의 정의(Column.kt)를 따라가서 확인한 뒤 제가 개인적으로 실행시켜 봤을때 동작한 내용입니다. 혹시 틀린부분이 있거나 알려주실 내용이 있다면 언제든 댓글로 알려주시면 감사하겠습니다.

 

감사합니다.