Compose 부모 영역 안에 꽉 채우기

Item마다 특정형태가 반복되는 리스트를 만들기 위해서 Row영역을 잡고 그 안에 Column영역과 Icon 영역을 잡았다.

Column영역은 두 개의 Text가 있다.

처음에 Text 영역이 짧은 경우, Text 두 개와 Column, Icon 모두 fillMaxWidth()를 해도 무방했으나(기억이 잘못됐나 Column까지 fillMaxWidth()이면 Icon이 사라지는 것으로 보아 Column은 IntrinsicSize.MAX를 적용했던거 같기도..), Text 영역이 길어지니 Icon이 사라지는 문제가 발생했다.

이 경우에는 fillMaxWidth()는 최상단 composable에만 적용하고, Icon은 최소 너비를 갖도록 설정, Text 두 개를 가진 Column 영역은 너비 설정없이 weight를 지정해주어 영역을 꽉 채웠다. 내부의 Text들은 부모인 Column 영역 안에서 최대 너비를 이용할 수 있도록 fillMaxWidth()를 설정해주면 된다.

 

@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
                .align(Alignment.CenterVertically)
                .weight(1.0f)
        ) {

            Text(
                text = item.title,
                fontSize = 20.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .fillMaxWidth(),
                textAlign = TextAlign.Left
            )


            Text(
                text = item.releaseDate.toString(),
                fontSize = 15.sp,
                color = Color.Gray,
                modifier = Modifier
                    .fillMaxWidth(),
                textAlign = TextAlign.Start
            )

        }


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

    }
}