当前位置: 首页 > news >正文

鸿蒙实现金刚区效果

前言:

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.maxNumberconsole.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 //金刚区titleconstructor(imageUrl: string, title: string) {this.imageUrl = imageUrlthis.title = title}
}

权限添加

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

"requestPermissions": [{"name": 'ohos.permission.INTERNET'}
]

相关文章:

鸿蒙实现金刚区效果

前言&#xff1a; DevEco Studio版本&#xff1a;4.0.0.600 所谓“金刚区"是位于APP功能入口的导航区域&#xff0c;通常以“图标文字”的宫格导航的形式出现。之所以叫“金刚区”&#xff0c;是因为该区域会随着业务目标的改变&#xff0c;展示不同的功能图标&#xff…...

Ubuntu 查看设备温度

要在Ubuntu中查看设备的温度&#xff0c;可以使用一些命令行工具来获取系统硬件的温度信息。下面列出了几种常用的方法&#xff1a; 方法 1: 使用 sensors 命令 sensors 命令用于读取和显示系统中的传感器数据&#xff0c;包括CPU温度和其他硬件传感器的信息。首先需要安装 l…...

大型网站优化指南:打造流畅的在线体验

大型网站 大型网站是指具有高并发、大流量、高可用性、海量数据处理能力&#xff0c;并能提供7*24小时不间断服务的网站。 这些网站通常面临用户分布广泛、网络情况复杂、安全环境恶劣等挑战。 同时需要快速适应市场变化和用户需求&#xff0c;通过渐进式的发展策略运营成大型…...

Redis变慢了?

Redis变慢了&#xff1f; 什么是Redis&#xff1f;测定Redis变慢&#xff1f;最大响应延迟平均响应延迟设置Redis慢日志 分析Redis变慢bigkeysbigkey的危害bigkey优化 写在最后 什么是Redis&#xff1f; 作为一个技术人员来说&#xff0c;大家用的最多的可能就是Redis了&#…...

11.6.k8s实战-节点扩缩容

目录 一&#xff0c;需求描述 二、集群缩容-节点下线 1&#xff0c;节点下线案例说明 2&#xff0c;查看现有节点 3&#xff0c;查看所有名称空间下的pod ​编辑4&#xff0c;驱逐下线节点的pod 5&#xff0c;驱逐后再次查看pod 6&#xff0c;驱逐pod后再次查看节点信息…...

相亲交友APP系统|婚恋交友社交软件|语音聊天平台定制开发

在现代社会&#xff0c;婚恋交友已经成为了人们日常生活中的一项重要任务。为了方便用户进行相亲交友活动&#xff0c;各种相亲交友APP系统和婚恋交友社交软件应运而生。本文将介绍相亲交友APP系统、婚恋交友社交软件的开发以及语音聊天平台的定制开发的相关知识和指导。 一、…...

2005-2022年款福特福克斯维修手册和电路图线路图接线图资料更新

经过整理&#xff0c;2005-2022年款福特福克斯全系列已经更新至汽修帮手资料库内&#xff0c;覆盖市面上99%车型&#xff0c;包括维修手册、电路图、新车特征、车身钣金维修数据、全车拆装、扭力、发动机大修、发动机正时、保养、电路图、针脚定义、模块传感器、保险丝盒图解对…...

nodejs爬取小红书图片

昨天的文章已经描述了可以抓取评论区内容&#xff0c; 抓取图片内容和抓取评论区的内容基本一致 我们可以看到接口信息中含有图片链接&#xff0c;我们要做的就是爬取图片链接然后下载 这边要用到的模块为const downloadrequire(download) 将爬到的图片链接存放到images数组…...

MySQL从5.7升级到8.0步骤及其问题

MySQL从5.7升级到8.0步骤及其问题 前言 本文源自微博客&#xff0c;且以获得授权&#xff0c;请尊重版权。 一、需求背景 Docker环境下&#xff0c;MySQL5.7升级到8.0&#xff0c;数据迁移时使用的是mysqldump方式迁移。 二、迁移步骤 数据备份&#xff1a; docker exec -i 1…...

中年帕金森:守护健康,从容面对生活挑战

在快节奏的现代生活中&#xff0c;中年人群面临着越来越多的健康挑战。其中&#xff0c;帕金森病作为一种常见的神经系统疾病&#xff0c;逐渐引起了人们的关注。帕金森病不仅影响患者的身体健康&#xff0c;还对其日常生活造成极大的困扰。那么&#xff0c;我们该如何应对中年…...

oracle块跟踪

1.查询块跟踪 select status,filename,bytes from v$block_change_tracking;2.打开块跟踪 ALTER DATABASE ENABLE BLOCK CHANGE TRACKING USING FILE /home/oracle/block_change_tracking.log;3.关闭块跟踪 ALTER DATABASE DISABLE BLOCK CHANGE TRACKING;4.解释 Oracle数据…...

【机器学习】第3章 K-近邻算法

一、概念 1.K-近邻算法&#xff1a;也叫KNN 分类 算法&#xff0c;其中的N是 邻近邻居NearestNeighbor的首字母。 &#xff08;1&#xff09;其中K是特征值&#xff0c;就是选择离某个预测的值&#xff08;例如预测的是苹果&#xff0c;就找个苹果&#xff09;最近的几个值&am…...

求和 最大值 最小值 reduce Math.min Math.max

let arr [ 8,4,3,9,2]let sum arr.reduce((a,b) > ab)console.log(sum) // 求和 26let max arr.reduce((a,b) > a>b?a:b)console.log(max) // 最大值 9console.log(Math.max(...arr))let min arr.reduce((a,b) > a<b?a:b)console.log(min) // 最小值 2co…...

MyBatis 源码分析--获取SqlSession

前言&#xff1a; 前文我们从源码层面梳理了 SqlSessionFactory 的创建过程&#xff0c;本篇我们继续分析一下 SqlSession 的获取过程。 初识 MyBatis 【MyBatis 核心概念】 案例代码&#xff1a; public class MyBatisTest {Testpublic void test() throws IOException {/…...

Upload-Labs:Pass - 1(JS前端白名单)

Pass_1 1. 上传测试2. 代码审计**获取文件输入的值**&#xff1a;**检查是否选择了文件**&#xff1a;**定义允许的文件类型**&#xff1a;**提取文件的扩展名**&#xff1a;**检查文件类型是否允许上传**&#xff1a;**构建错误消息并提醒用户**&#xff1a; 3.绕过思路3.1 将…...

vue大作业-实现学校官网

vue大作业-实现学校官网 基于vue2实现的学校官网 项目展示 学校官网介绍 欢迎访问我们学校的官方网站&#xff0c;这里为您提供了全面的信息和资源&#xff0c;帮助您更好地了解我们的教育理念、教学资源和学术活动。 首页 首页是您了解我们学校的起点。这里展示了学校的最…...

24面试记录002

文章目录 12、brpc的优化2.1 brpc网络有啥降级&#xff1f; 3、移动语义4、python协程 二、1. mq怎么保障数据的顺序&#xff1f;3.brpc中上下游通信&#xff0c;怎么测评新增字段大小&#xff0c;对耗时的影响&#xff1f; 1 1、brpc和grpc区别&#xff0c;为啥选择brpc? gr…...

cocos 按钮

1、创建按钮 2、创建脚本 3、将脚本挂载到其他节点上 4、将节点和按钮绑定 即可实现点击按钮触发脚本。 在触发的脚本函数里面设置按钮节点的位置&#xff0c;将其移除屏幕&#xff0c;可以实现点击消失按钮的效果。...

文件扫描工具都有哪些?职场大佬都在用的文本提取工具大盘点~

回想起刚毕业初入职场那阵子&#xff0c;领导让帮忙把纸质文件扫描提取为文本时&#xff0c;还只会傻乎乎地一点点操作&#xff0c;属实是费劲得很&#xff01; 好在后面受朋友安利&#xff0c;找到了4个能够快速实现文件扫描文字提取的方法&#xff0c;这才让我的办公效率蹭蹭…...

【学习】程序员资源网站

1 书栈网 简介&#xff1a;书栈网是程序员互联网IT开源编程书籍、资源免费阅读的网站&#xff0c;在书栈网你可以找到很多书籍、笔记资源。在这里&#xff0c;你可以根据热门收藏和阅读查看大家都在看什么&#xff0c;也可以根据技术栈分类找到对应模块的编程资源&#xff0c;…...

突破联想笔记本BIOS限制:LEGION BIOS高级设置工具全解析

突破联想笔记本BIOS限制&#xff1a;LEGION BIOS高级设置工具全解析 【免费下载链接】LEGION_Y7000Series_Insyde_Advanced_Settings_Tools 支持一键修改 Insyde BIOS 隐藏选项的小工具&#xff0c;例如关闭CFG LOCK、修改DVMT等等 项目地址: https://gitcode.com/gh_mirrors…...

3分钟快速上手!Balena Etcher终极镜像烧录工具完全指南

3分钟快速上手&#xff01;Balena Etcher终极镜像烧录工具完全指南 【免费下载链接】etcher Flash OS images to SD cards & USB drives, safely and easily. 项目地址: https://gitcode.com/GitHub_Trending/et/etcher Balena Etcher是一款革命性的跨平台镜像烧录工…...

3个步骤掌握FCEUX:开源NES模拟器的全方位应用指南

3个步骤掌握FCEUX&#xff1a;开源NES模拟器的全方位应用指南 【免费下载链接】fceux FCEUX, a NES Emulator 项目地址: https://gitcode.com/gh_mirrors/fc/fceux FCEUX是一款功能强大的开源NES模拟器&#xff08;任天堂娱乐系统游戏模拟工具&#xff09;&#xff0c;以…...

UniApp实战:如何安全高效地在安卓10+设备上实现本地数据存储(附权限配置避坑指南)

UniApp安卓10本地数据存储实战&#xff1a;权限配置与高性能方案设计 当你的UniApp在安卓10设备上突然无法保存用户配置时&#xff0c;控制台那行冰冷的"Permission denied"可能让整个开发团队陷入深夜加班。这不是简单的API调用问题&#xff0c;而是安卓存储机制变革…...

CasRel开源镜像部署教程:适配低显存(12GB)GPU的轻量级方案

CasRel开源镜像部署教程&#xff1a;适配低显存&#xff08;12GB&#xff09;GPU的轻量级方案 1. 前言&#xff1a;为什么选择这个方案 如果你正在处理文本数据&#xff0c;想要自动提取人物、地点、事件之间的关系&#xff0c;那么关系抽取技术就是你需要的工具。CasRel作为…...

基于springboot的旅游景点门票信息系统设计与实现-vue

目录 技术栈选择系统模块划分数据库设计接口设计规范前端实现要点安全措施部署方案开发流程测试计划扩展功能预留 项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作 技术栈选择 后端采用Spring Boot框架&#xff0c;提供RESTful…...

Xinference-v1.17.1智能家居控制系统开发

Xinference-v1.17.1智能家居控制系统开发 1. 智能家居控制新体验 想象一下&#xff0c;早上醒来窗帘自动拉开&#xff0c;阳光洒进房间&#xff0c;咖啡机开始工作&#xff0c;音响播放你喜欢的音乐。这不是科幻电影&#xff0c;而是用Xinference-v1.17.1构建的智能家居控制系…...

2026年多模态AI前瞻:Qwen3-VL-2B开源生态发展潜力分析

2026年多模态AI前瞻&#xff1a;Qwen3-VL-2B开源生态发展潜力分析 1. 项目概述与核心价值 Qwen3-VL-2B-Instruct作为新一代开源视觉语言模型&#xff0c;代表了多模态AI技术的重要发展方向。这个模型不仅能够理解文本&#xff0c;更重要的是具备了"看"的能力——它…...

公司内部业务系统,其实无需专门开发,用免费低代码平台就够了

这段时间陆续试了几款主流低代码工具&#xff0c;整体体验下来&#xff0c;有些平台在免费阶段就已经很好用了。整理了一份我觉得比较值得尝试的清单&#xff0c;分享给同样有需求的人。斑斑AI首先是斑斑AI。它给我最大的感受就是“没有限制”。完全无限制免费这一点非常少见&a…...

cutlass代码架构分析

CUTLASS 代码架构分析 本文档基于 cutlass代码进行梳理,快速理解 CUTLASS 4.x 的模块边界与调用链路。 1. 总体架构 CUTLASS 本质上是一个 header-only 的 CUDA C++ 模板库,外围配套了可选构建目标: include/:核心库(cutlass + cute) tools/:库实例化、性能测试与通用…...