Compose Flow Layout

Flow Layout?

• Flow Row, Flow Column ..
• Row 및 Column와 유사한 컴포저블이지만 컨테이너의 공간이 부족하면 항목이 다음 줄로 이동함
• 반응형 레이아웃

예시

기본 사용

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}

첫 번째 행에 더 이상 공간이 없으면 항목이 다음 행으로 자동으로 이동

maxItemsInEach~ 속성

maxItemsInEachRow 또는 maxItemsInEachColumn를 설정하여 선의 항목 수를 제어 가능

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(
			maxItemsInEachRow = 3,
			modifier = Modifier.padding(8.dp)
			) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
	      ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}