[Compose] LazyRow와 LazyColumn에서 fillMaxWidth가 제대로 동작하지 않을 때

fillMaxWidth doesn't work in LazyRow and LazyColumn
LazyRow fillmaxwidth()동작 안됨

위 사진 LazyRow에서 아이템 하나가 화면 전체 width 영역을 사용하도록 하고 싶어서 FillMaxWidth()를 적용했는데, 제대로 되지 않는다.

aspectRatio(1f) 옵션을 적용할 경우 width()의 길이가 전체 길이가 되긴 하지만 height()도 똑같이 커져 버려서 결국 전체 영역이 커져 버린다.

현재 구조는 LazyColumn() 안에 LazyRow()로 되어있다.

LazyColumn() {
	LazyRow() {
    	...
    }
}

---

해결

fillParentMaxWidth() 를 적용하여 문제를 해결하였다.

그러나 item의 Composable을 컴포넌트로 빼버렸기 때문에 fillParentMaxWidth()를 사용할 수 없어서

LazyRow의 Items() 영역에서 fillParentMaxWidth() 옵션을 적용한 Modifier를 매개변수로 전달해서 사용하였다.

전체 Composable

...

      LazyRow(
      modifier = Modifier.fillMaxSize(),
      horizontalArrangement = Arrangement.spacedBy(28.dp)
      ) {
          items(recordingData.walkRecord.size) {
              RecordScreenLazyItems(
                  modifier = Modifier.fillParentMaxWidth()
              ) {
                  // @Composable function()
              }
          }
      }

...

LazyRow() Item 컴포넌트

@Composable
private fun RecordScreenLazyItems(
    modifier: Modifier, composableContent: @Composable () -> Unit
) {
    val context = LocalContext.current

    Column(
        modifier = modifier.fillMaxSize().wrapContentHeight()
    ) {
        GrayBorderRoundedCard(
            modifier = Modifier.border(
                width = 2.dp, color = BrightGray, shape = RoundedCornerShape(
                    roundedCornerPadding
                )
            ),
            color = arrayListOf(Color.Transparent, Color.Transparent),
        ) {
            Column(
                modifier = Modifier.fillMaxWidth().padding(
                    start = 34.dp, end = 34.dp, top = 14.dp, bottom = 14.dp
                ),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    text = "보라매공원 산책로",
                    fontWeight = FontWeight.Bold,
                    fontSize = 16.sp,
                    fontFamily = notoSansKoreanFontFamily
                )
                Spacer(modifier = Modifier.height(10.dp))
                WalkRecordingBox(context)
            }
        }
        composableContent() // 내부 컴포저블 함수
    }
} // End of RecordScreenLazyItems()

해결 완료

색깔과 특정 텍스트 및 함수는 본인이 원하는 것으로 사용하시면 됩니다.

궁금하게 여기시는 사항은 댓글로 질문 남겨 주시면 언제든지 답변해 드립니다!