鸿蒙实现金刚区效果

前言:

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'
  }
]
相关推荐
特立独行的猫a5 小时前
HarmonyOS NEXT 诗词元服务项目开发上架全流程实战(一、项目介绍及实现效果)
华为·harmonyos·元服务·上架
云和数据.ChenGuang8 小时前
鸿蒙版电影app设计开发
华为·harmonyos·鸿蒙·鸿蒙系统
Bruce_Liuxiaowei10 小时前
HarmonyOS Next~鸿蒙系统UI创新实践:原生精致理念下的设计革命
ui·华为·harmonyos
SuperHeroWu715 小时前
【HarmonyOS 5】鸿蒙检测系统完整性
华为·harmonyos·模拟器·系统完整性·越狱设备
京东云开发者15 小时前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
harmonyos
前端付豪16 小时前
2、ArkTS 是什么?鸿蒙最强开发语言语法全讲解(附实操案例)
前端·后端·harmonyos
zhujiaming16 小时前
鸿蒙端应用适配使用开源flutter值得注意的一些问题
前端·flutter·harmonyos
前端付豪16 小时前
8、鸿蒙动画开发实战:做一个会跳舞的按钮!(附动效示意图)
前端·后端·harmonyos
前端付豪16 小时前
3、构建你的第一个鸿蒙组件化 UI 页面:实现可复用的卡片组件(附实战代码)
前端·后端·harmonyos
前端付豪16 小时前
7、打造鸿蒙原生日历组件:自定义 UI + 数据交互(附实操案例与效果图)
前端·后端·harmonyos