openharmony 컨테이너 구성 요소 GridContainer

GridContainer: 그리드 레이아웃 컨테이너를 수직으로 정렬합니다.
그리드 레이아웃 시나리오에서는 GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length}) 열만
사용 합니다 . 현재 레이아웃의 총 열 수입니다.
sizeType : 장치 너비 유형 선택(SizeType, 기본값 Auto)
    SizeType 열거 클래스:
        XS: 최소 너비 유형 장치
        SM: 작은 너비 유형 장치
        MD: 중간 너비 유형 장치
        LG: 큰 너비 유형 장치
        Auto: 장치 유형에 따라 선택
거터 : 그리드 레이아웃 열 간격
여백 : 그리드 레이아웃 양쪽 간격

효과는 그림과 같습니다.

 

암호:

@Entry
@Component
struct GridContainerT {
  @State sizeType: SizeType = SizeType.XS

  build() {
    Column({ space: 5 }) {
      GridContainer({ columns: 7, sizeType: this.sizeType, gutter: 1 }) {
        Row() {
          Text('1')
            .useSizeType({
              xs: { span: 1, offset: 0 },
              sm: { span: 3, offset: 0 },
              md: { span: 5, offset: 0 },
              lg: { span: 7, offset: 0 }
            })
            .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
        }
      }.width('90%')

      Text('Click Simulate to change the device width')
        .fontSize(9)
        .width('90%')
        .fontColor(0xCCCCCC)
        .textAlign(TextAlign.Center)
      Row() {
        Button('XS')
          .onClick(() => {
            this.sizeType = SizeType.XS
          }).backgroundColor(0x317aff)
        Button('SM')
          .onClick(() => {
            this.sizeType = SizeType.SM
          }).backgroundColor(0x317aff)
        Button('MD')
          .onClick(() => {
            this.sizeType = SizeType.MD
          }).backgroundColor(0x317aff)
        Button('LG')
          .onClick(() => {
            this.sizeType = SizeType.LG
          }).backgroundColor(0x317aff)
      }
    }.width('100%').margin({ top: 5 })
  }
}