除了以上基础布局还有列表布局、网格布局、轮播布局、选项卡布局以及媒体布局

其中需要优先学习列表布局

文档中心

创建网格中需要掌握计算机布局方式

layoutOptions: GridLayoutOptions = {
  regularSize: [1, 1],
  onGetRectByIndex: (index: number) => {
    if (index == key1) { // key1是“0”按键对应的index
      return [5, 0, 1, 2]
    } else if (index == key2) { // key2是“=”按键对应的index
      return [4, 3, 2, 1]
    }
    // ...
    // 这里需要根据具体布局返回其他item的位置
  }
}

Grid(undefined, this.layoutOptions) {
  // ...
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('2fr 1fr 1fr 1fr 1fr 1fr')

日历翻页

Column({ space: 5 }) {
  Grid(this.scroller) {
  }
  .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')

  Row({space: 20}) {
    Button('上一页')
      .onClick(() => {
        this.scroller.scrollPage({
          next: false
        })
      })

    Button('下一页')
      .onClick(() => {
        this.scroller.scrollPage({
          next: true
        })
      })
  }
}

tab页

可参考学习：文档中心