Compose Modifier 가로/세로

Modifier에서 제공되는 가로/세로를 설정

- fillMaxWidth/Height(fraction) : 부모의 크기와 상관없이 전체 영역을 잡음, fraction은 차지할 비율

- Width/Height(dp) : dp를 설정해 직접 크기 설정, 여기서 Intrinsic이라는 값을 줄 수도 있음

 

Intrinsic이란 부모는 자식을 한번만 measure 할 수 있기 때문에 자식의 값으로 가로/세로를 결정하기 위한 값

Intrinsic.MAX는 자식의 가로/세로 중 가장 큰 값으로 설정

Intrinsic.MIN은 자식의 가로/세로 중 가장 작은 값으로 설정

 

부모의 Height 설정없이 자식이 fillMaxHeight를 설정한 경우	부모가 Intrinsic.MIN 설정 후 자식이 fillMaxHeight를 설정한 경우

@Preview(showBackground = true)
@Composable
fun <T : PopularMovie> prodItem(@PreviewParameter(SamplePopularMovie::class,1) item: T) {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier
            .fillMaxWidth()
//            .height(IntrinsicSize.Min) 
            .padding(horizontal = 15.dp, vertical = 5.dp)
    ) {
        Column(
            modifier = Modifier
                .width(IntrinsicSize.Max)
                .align(Alignment.CenterVertically)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1.0f)
            ) {
                Text(
                    text = item.title,
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier
                        .fillMaxWidth()
                        .align(Alignment.Center)
                )
            }

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1.0f)
            ) {
                Text(
                    text = item.releaseDate.toString(),
                    fontSize = 15.sp,
                    color = Color.Gray,
                    modifier = Modifier
                        .fillMaxWidth()
                        .align(Alignment.TopCenter)
                )
            }
        }


        Icon(
            imageVector = Icons.Default.NavigateNext,
            contentDescription = null,
            modifier = Modifier
                .fillMaxHeight()
                .align(Alignment.CenterVertically)
        )

    }
}

 

[WIP]

Row에서 가로로 배치되는 자식들이 동일한 높이를 가지고 있다면, Height에 굳이 Intrinsic.MIN을 적용할 필요가 없지만 적용했을 때 이상한 현상이 발생했다. scroll이 발생하지 않을 때는 괜찮지만, 발생했을 경우 아래 이상한 여백이 생겼고 wrapContentHeight()로 변경하면 여백이 사라졌다. 

scroll이 발생해서 생긴 문제라 scroll 영역이 잡힌 것인가 했는데, wrapContentHeight()에서는 여백이 사라져서 그 원인은 아닌 것 같다.

IntrinsicSize.MIN & Scroll 발생

IntrinsicSize.MIN & Scroll 미발생

wrapContentHeight() & Scroll 발생

 

참고> https://www.rockandnull.com/jetpack-compose-fillmaxheight-fillmaxwidth/