This is an overview of the most common usage of 그리드 (GridLayout). For more information about the available properties, methods, or events, head over to the complete API documentation for 그리드 (GridLayout).
GridLayout은 자식 요소들을 행과 열의 테이블 구조로 배치합니다. 하나의 셀(cell)은 여러 자식 요소를 가질 수 있고, 여러 행/열로 확장(span)되거나 겹쳐질(overlap) 수 있습니다. GridLayout은 기본값으로 하나의 행과 하나의 열을 가지고 있습니다. 행/열을 추가하려면, 열의 정의를(쉼표로 분리) columns
프로퍼티에, 행의 정의를(쉼표로 분리) rows
프로퍼티에 명시해야 합니다. 열의 너비와 행의 높이는 픽셀의 절대량, 사용 가능한 공간의 퍼센티지, 혹은 자동으로 지정할 수 있습니다.:
3/7
은 30/70
과 같음.<GridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
<Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
<Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="#1c6b48"/>
<Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="#289062"/>
<Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
<Label text="1,2" row="1" col="2" backgroundColor="#289062"/>
<Label text="2,1" row="2" col="1" backgroundColor="#1c6b48"/>
<Label text="2,2" row="2" col="2" backgroundColor="#43b883"/>
</GridLayout>
<GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
<Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
<Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
<Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
<Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>
<GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
<Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
<Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
<Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
<Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>
이름 | 타입 | 설명 |
---|---|---|
columns | String | 열의 너비를 나타내는 쉼표로 나누어진 문자열 값. 열의 너비는 절대값이나 auto , * 가 가능. 숫자는 고정된 절대값 너비를 의미하고, auto 는 가장 넓은 자식의 너비, * 는 컬럼이 가능한 모든 가로공간을 차지하도록 만듬. |
rows | String | 행의 높이를 나타내는 쉼표로 나누어진 문자열 값. 행의 높이는 절대값이나 auto , * 가 가능. 숫자는 고정된 절대값 높이를 의미하고, auto 는 가장 높은 자식의 높이, * 는 행이 가능한 모든 세로 공간을 차지하도록 만듬. |
요소가 GridLayout의 직접적인 자식일때 다음 prop들이 가능합니다:
이름 | 타입 | 설명 |
---|---|---|
row | Number | 요소의 행 |
column | Number | 요소의 열 |
rowSpan | Number | 요소가 확장되는 행의 수 |
columnSpan | Number | 요소가 확장되는 열의 수 |