상품 속성 설정

Grid 구성은 전체 구조를 정의하지만 gridItem 수정자를 사용하여 해당 구조 내 항목의 위치, 범위, 정렬을 제어합니다.

상품 위치 설정

row 및 column 매개변수를 사용하여 항목을 특정 트랙이나 셀에 배치합니다.

row 및 column 매개변수는 항목이 배치되는 행 및 열 트랙 색인을 지정합니다. 트랙 색인은 1부터 시작합니다. row 또는 column만 지정하면 (둘 다 아님) 해당 트랙에서 사용 가능한 다음 공간에 항목이 배치됩니다. 두 값을 모두 지정하면 항목이 해당 셀에 배치됩니다.

양의 정수를 사용하여 시작부터 트랙 색인을 지정합니다. 예를 들어 첫 번째 행과 열에 항목을 배치하려면 gridItem(row = 1, column = 1)를 사용합니다.

음수 정수를 사용하여 끝을 기준으로 트랙을 지정합니다. 예를 들어 마지막에서 두 번째 행과 열에 항목을 배치하려면 gridItem(row = -2, column = -2)를 사용합니다.

다음 예시에서는 카드 #2가 두 번째 행과 두 번째 열에 배치됩니다. 카드 #3은 마지막 행에 할당되며 (색인 -1) 해당 트랙에서 사용 가능한 첫 번째 열을 자동으로 차지합니다 (그림 1).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3(modifier = Modifier.gridItem(row = -1, column = -2))
}
GridItem.kt

카드 2는 두 번째 행과 두 번째 열의 그리드 셀에 배치되고 카드 3은 세 번째 행의 첫 번째 열에 배치됩니다.
그림 1. 카드 #2는 두 번째 행과 두 번째 열의 그리드 셀에 배치되고 카드 #3은 세 번째 행의 첫 번째 열에 배치됩니다.

행과 열 병합

rowSpan 및 columnSpan 매개변수를 사용하여 여러 셀에 걸쳐 항목을 배치합니다. 여러 그리드 셀로 구성된 영역인 그리드 영역에 UI 요소를 배치할 수 있습니다. gridItem 수정자를 사용하면 rowSpan 및 columnSpan 매개변수로 그리드 영역을 지정할 수 있습니다. 다음 예에서 카드 #1은 2개의 행과 2개의 열로 구성된 영역에 배치됩니다(그림 2).

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    }
) {
    Card1(modifier = Modifier.gridItem(rowSpan = 2, columnSpan = 2))
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

카드 4는 3개 열에 걸쳐 있습니다.
그림 2. 카드 #4는 3개 열에 걸쳐 있습니다.

그리드 영역에서 정렬 설정

gridItem 수정자의 alignment 매개변수에 지정하여 그리드 영역에서 UI 요소의 정렬을 설정할 수 있습니다. 다음 예시에서 #1은 2개의 열과 2개의 행으로 구성된 그리드 영역의 중앙에 배치됩니다.

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    },
) {
    Text(
        text = "#1",
        modifier = Modifier
            .gridItem(
                rowSpan = 2,
                columnSpan = 2,
                alignment = Alignment.Center
            ),
    )
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

#1이 포함된 텍스트는 2개의 행과 2개의 열로 구성된 그리드 영역의 중앙에 배치됩니다.
그림 3. #1이 포함된 텍스트는 2개의 행과 2개의 열로 구성된 그리드 영역의 중앙에 배치됩니다.

배치된 항목과 혼합된 자동 배치

위치 사양이 없는 Grid의 UI 요소는 자동 배치됩니다. 이 예시에서는 자동 배치된 요소와 지정된 그리드 셀이 있는 UI 요소를 혼합하는 방법을 보여줍니다. 카드 #2와 카드 #4는 지정된 그리드 셀이고 다른 항목은 자동으로 배치됩니다.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3()
    Card4(modifier = Modifier.gridItem(row = 3, column = 1))
    Card5()
    Card6()
}
GridItem.kt

카드 3은 자동 게재위치이므로 카드 <b>1</b> 옆에 배치됩니다.
그림 4. 카드 #3은 자동 배치이므로 카드 #1 옆에 배치됩니다.
이전
컨테이너 속성 설정
다음
폴더블 알아보기