鸿蒙实现金刚区效果

前言:

DevEco Studio版本:4.0.0.600

所谓"金刚区"是位于APP功能入口的导航区域,通常以"图标+文字"的宫格导航的形式出现。之所以叫"金刚区",是因为该区域会随着业务目标的改变,展示不同的功能图标,就像"变形金刚"一样可以百变。

效果:

实现原理:

通过效果可以知道整体是Grid+底部的指示器构建完成

Grid参考:OpenHarmony Grid组件介绍

底部指示器参考之前文章:鸿蒙中Swiper指示器位置设置_deveco studio里面的indicator属性-CSDN博客

代码实现:

复制代码
import promptAction from '@ohos.promptAction';
import { KingKongBean } from '../bean/KingKongBean';

@Entry
@Component
struct Index {
   // 创建swiper组件控制器
   private swiperController: SwiperController = new SwiperController();
   // swiper显示数据
   private kingKongData: KingKongBean[] = [
      new KingKongBean("https://www.wanandroid.com/blogimgs/42da12d8-de56-4439-b40c-eab66c227a4b.png", "数据一"),
      new KingKongBean("https://www.wanandroid.com/blogimgs/62c1bd68-b5f3-4a3c-a649-7ca8c7dfabe6.png", "数据二"),
      new KingKongBean("https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png", "数据三"),

      new KingKongBean("https://www.wanandroid.com/blogimgs/42da12d8-de56-4439-b40c-eab66c227a4b.png", "数据四"),
      new KingKongBean("https://www.wanandroid.com/blogimgs/62c1bd68-b5f3-4a3c-a649-7ca8c7dfabe6.png", "数据五"),
      new KingKongBean("https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png", "数据六"),

      new KingKongBean("https://www.wanandroid.com/blogimgs/42da12d8-de56-4439-b40c-eab66c227a4b.png", "数据七"),
      new KingKongBean("https://www.wanandroid.com/blogimgs/62c1bd68-b5f3-4a3c-a649-7ca8c7dfabe6.png", "数据八"),
      new KingKongBean("https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png", "数据九"),
   ];
   @State swiperData: Array<KingKongBean>[] = []
   private maxNumber: number = 6//每个金刚区的数量

   aboutToAppear() {
      let countLength = this.kingKongData.length / this.maxNumber
      console.info("1111111111111:   " + countLength)

      for (let i = 0; i < countLength; i++) {
         this.swiperData.push(this.kingKongData.slice(i * this.maxNumber, (i + 1) * this.maxNumber))
         console.info("1111111111111 22222:   " + i)
      }
   }

   build() {
      Column() {
         Swiper(this.swiperController) {
            ForEach(this.swiperData, (item: Array<KingKongBean>) => {
               Column() {
                  Grid() {
                     ForEach(item, (imageBean: KingKongBean) => {
                        GridItem() {
                           Column() {
                              //内容区
                              Image(imageBean.imageUrl)
                                 .width(120)
                                 .height(120)
                                 .borderRadius(60)
                              Text(imageBean.title)
                                 .margin({ top: 10 })
                                 .fontSize(22)
                                 .fontColor(Color.Black)
                           }.onClick(() => {
                              promptAction.showToast({ message: "点击了: " +  imageBean.title})
                           })
                        }
                     })
                  }
                  .columnsTemplate('1fr 1fr 1fr')
                  .columnsGap(10) //列之间间距
                  .rowsGap(10) //行之间间距
                  .height(360)

                  //空白区
                  Column().width('100%').height(50)
               }
            })
         }
         .width('100%')
         .loop(false)
         .autoPlay(false)
         //通过indicator属性,控制导航点在空白区域
         .indicator(new DotIndicator().color(Color.White).bottom(15))
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#F1F3F5')
   }
}

KingKongBean类

复制代码
export class KingKongBean {
   imageUrl: string //图片地址
   title: string //金刚区title

   constructor(imageUrl: string, title: string) {
      this.imageUrl = imageUrl
      this.title = title
   }
}

权限添加

因为图片链接是网络图片需要添加网络访问权限,在module.json5中添加

复制代码
"requestPermissions": [
  {
    "name": 'ohos.permission.INTERNET'
  }
]
相关推荐
前端菜鸟日常7 小时前
鸿蒙Arkts开发飞机大战小游戏,包含无敌模式,自动射弹,暂停和继续
华为·harmonyos
HMS Core8 小时前
【FAQ】HarmonyOS SDK 闭源开放能力 —Account Kit(3)
华为·harmonyos
前端菜鸟日常1 天前
鸿蒙版(ArkTs) 贪吃蛇,包含无敌模式 最高分 暂停和继续功能
华为·harmonyos
鸿蒙布道师1 天前
鸿蒙NEXT开发数值工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
塞尔维亚大汉1 天前
鸿蒙南向开发 ——轻量系统芯片移植指南(二)
物联网·嵌入式·harmonyos
别说我什么都不会2 天前
OpenHarmony内核系统调用hats测试用例编写指南
物联网·嵌入式·harmonyos
90后的晨仔2 天前
鸿蒙ArkTS是如何实现并发的?
harmonyos
鸿蒙布道师2 天前
鸿蒙NEXT开发日期工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
HMSCore2 天前
在应用内购票、寄件时,如何一键填充所需信息?
harmonyos
HarmonyOS_SDK2 天前
在应用内购票、寄件时,如何一键填充所需信息?
harmonyos