HarmonyOS 鸿蒙Next ArkUI api9 金刚区的UI有类似组件或者思路不？

HarmonyOS 鸿蒙Next ArkUI api9 金刚区的UI有类似组件或者思路不？

/**
 * 金刚区组件
 */
@Component
export struct NavigationKong {
  public configData: ComponentAttribute;
  private swiperController: SwiperController = new SwiperController()
  private pageData:any = []

  aboutToAppear(){
    let pageSize: number = 10
    let result = this.chunk(this.configData.data.config.list,pageSize)
    this.pageData = result
    console.log("result====>",result.length)
    console.log("result====>this.pageData",this.pageData.length)
  }

  chunk(array, size) {
    //获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
    const length = array.length;
    //判断不是数组，或者size没有设置，size小于1，就返回空数组
    if (!length || !size || size < 1) {
      return [];
    }
    let index = 0; //用来表示切割元素的范围start
    let resIndex = 0; //用来递增表示输出数组的下标
    //根据length和size算出输出数组的长度，并且创建它。
    let result = new Array(Math.ceil(length / size));
    //进行循环
    while (index < length) {
      //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
      result[resIndex++] = array.slice(index, (index += size));
    }
    return result;
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        ForEach(this.pageData, (item: any) => {
          Grid() {
            ForEach(item, (dataItem: any) => {
              GridItem(){
                Column(){
                  Image(dataItem.imgUrl)
                    .width(42)
                    .height(42)
                    .onClick(() => {

                    })
                  Text(dataItem.navName)
                    .fontSize(16)
                    .textAlign(TextAlign.Center)
                }
              }
            }, dataItem => dataItem.navName)
          }
          .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
          .maxCount(5)
          .columnsGap(10)
          .rowsGap(10)
          .width('100%')
          .backgroundColor(0xFAEEE0)

        }, item => item)
      }
      .index(0)
      .autoPlay(true)
      .indicator(true)
      .loop(true)
      .itemSpace(0)
      .curve(Curve.Linear)
      .onChange((index: number) => {
        console.info(index.toString())
      })
    }.width('100%')
  }
}

class ComponentAttribute {
  public data: any
}

目前我写的不太行啊，本来是有2页的，我输出的长度都是对的。但就是有问题，不知道这种UI有组件么？