그리드(Grid): '행'과 '열'로 구분된 셀로 구성된 그리드 컨테이너로, '항목'이 위치한 셀을 지정하여 다양한 레이아웃을 만들 수 있습니다.
그리드() 속성:
columnsTemplate : 현재 그리드 레이아웃의 열 수를 설정하는 데 사용됩니다. 설정하지 않으면 기본값은 1열입니다. 예를 들어 '1fr 1fr 2fr'은 3개의 열로 나누어지며 상위 컴포넌트에서 허용하는 너비는 4로 나누어집니다. 첫 번째 열은 1부분을 차지하고, 두 번째 열은 1몫, 세 번째 열은 2몫을 차지합니다.
rowTemplate : 현재 그리드 레이아웃의 행 수를 설정하는 데 사용됩니다. 설정하지 않으면 기본값은 1행입니다. 예를 들어 '1fr 1fr 2fr'은 3개의 행으로 나뉘고 상위 컴포넌트에서 허용하는 높이는 1개의 행으로 나뉩니다. 4개의 동일한 부분 첫 번째 행은 1부분을 차지하고 두 번째 행은 1몫, 세 번째 행은 2몫을 차지합니다.
columnsGap : 열 사이의 간격을 설정하는 데 사용됩니다.
RowGap : 행 사이의 간격을 설정하는 데 사용됩니다.
SDK8에는 다음과 같은 속성이 있습니다:
editMode : 편집 모드 진입 여부, 편집 모드 진입 시 GridItem을 Gird 컴포넌트 내부로 드래그 앤 드롭할 수 있습니다.
layoutDirection : 레이아웃의 주축 방향을 설정하며, 현재 지원되는 주축 레이아웃 방향은 다음과 같습니다
.
LayoutDirection.Column: 세로 방향의 레이아웃입니다. 즉, 한 행을 먼저 채운 후 다음 행을 채웁니다.
maxCount :layoutDirection이 Row인 경우 표시할 수 있는 최대 행 수를 나타내며,layoutDirection이 Column인 경우 표시할 수 있는 최대 열 수를 나타냅니다.
minCount :layoutDirection이 Row인 경우 표시할 수 있는 최소 행 수를 나타내며,layoutDirection이 Column인 경우 표시할 수 있는 최소 열 수를 나타냅니다.
세포 길이:layoutDirection이 Row인 경우 행의 높이를 나타내고,layoutDirection이 Column인 경우 열의 너비를 나타냅니다.
multiSelectable : 마우스 프레임 선택 활성화 여부, false: 프레임 선택 끄기, true: 프레임 선택 활성화.
dragAnimation : GridItem 애니메이션 드래그를 활성화할지 여부입니다.
edgeEffection : 엣지 슬라이딩 효과를 설정하며 현재 지원하는 슬라이딩 효과는 EdgeEffect
Spring : 탄성 물리 애니메이션으로 엣지까지 슬라이딩한 후 초기 속도 또는 터치 이벤트를 통해 일정 거리만큼 계속 슬라이딩한 후 놓으면 다시 리바운드할 수 있습니다. .
없음: 가장자리로 슬라이딩한 후 효과가 없습니다.
효과는 그림과 같습니다.
암호:
@Entry
@Component
struct GridTest {
@State Number: String[] = ['0', '1', '2', '3', '4']
build() {
Column({ space: 5 }) {
Grid() {
ForEach(this.Number, (day: string) => {
ForEach(this.Number, (day: string) => {
GridItem() {
Text(day)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}
}, day => day)
}, day => day)
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('90%')
.editMode(true)
.backgroundColor(0xFAEEE0)
.height(300)
Text('C_scroll').fontColor(0x000000).fontSize(9).width('90%')
Grid() {
ForEach(this.Number, (day) => {
ForEach(this.Number, (day) => {
GridItem() {
Text(day)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width('100%')
.height(80)
.textAlign(TextAlign.Center)
}
}, day => day)
}, day => day)
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.onScrollIndex((first: number) => {
console.info(first.toString())
})
.width('90%')
.backgroundColor(0xFAEEE0)
.height(300)
}
.width('100%')
.height('100%')
}
}