상품 속성 설정

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).

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 는 세 개의 열에 걸쳐 범위 지정됩니다.

그리드 영역에서 정렬 설정

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

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 이 있는 텍스트는 두 개의 행과 두 개의 열로 구성된 그리드 영역 중앙에 배치됩니다.

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

위치 사양이 없는 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 옆에 배치됩니다.
이전
컨테이너 속성 설정
다음
폴더블 알아보기