鸿蒙实现金刚区效果
前言:
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'}
]
相关文章:
鸿蒙实现金刚区效果
前言: DevEco Studio版本:4.0.0.600 所谓“金刚区"是位于APP功能入口的导航区域,通常以“图标文字”的宫格导航的形式出现。之所以叫“金刚区”,是因为该区域会随着业务目标的改变,展示不同的功能图标ÿ…...
Ubuntu 查看设备温度
要在Ubuntu中查看设备的温度,可以使用一些命令行工具来获取系统硬件的温度信息。下面列出了几种常用的方法: 方法 1: 使用 sensors 命令 sensors 命令用于读取和显示系统中的传感器数据,包括CPU温度和其他硬件传感器的信息。首先需要安装 l…...
大型网站优化指南:打造流畅的在线体验
大型网站 大型网站是指具有高并发、大流量、高可用性、海量数据处理能力,并能提供7*24小时不间断服务的网站。 这些网站通常面临用户分布广泛、网络情况复杂、安全环境恶劣等挑战。 同时需要快速适应市场变化和用户需求,通过渐进式的发展策略运营成大型…...
Redis变慢了?
Redis变慢了? 什么是Redis?测定Redis变慢?最大响应延迟平均响应延迟设置Redis慢日志 分析Redis变慢bigkeysbigkey的危害bigkey优化 写在最后 什么是Redis? 作为一个技术人员来说,大家用的最多的可能就是Redis了&#…...
11.6.k8s实战-节点扩缩容
目录 一,需求描述 二、集群缩容-节点下线 1,节点下线案例说明 2,查看现有节点 3,查看所有名称空间下的pod 编辑4,驱逐下线节点的pod 5,驱逐后再次查看pod 6,驱逐pod后再次查看节点信息…...
相亲交友APP系统|婚恋交友社交软件|语音聊天平台定制开发
在现代社会,婚恋交友已经成为了人们日常生活中的一项重要任务。为了方便用户进行相亲交友活动,各种相亲交友APP系统和婚恋交友社交软件应运而生。本文将介绍相亲交友APP系统、婚恋交友社交软件的开发以及语音聊天平台的定制开发的相关知识和指导。 一、…...
2005-2022年款福特福克斯维修手册和电路图线路图接线图资料更新
经过整理,2005-2022年款福特福克斯全系列已经更新至汽修帮手资料库内,覆盖市面上99%车型,包括维修手册、电路图、新车特征、车身钣金维修数据、全车拆装、扭力、发动机大修、发动机正时、保养、电路图、针脚定义、模块传感器、保险丝盒图解对…...
nodejs爬取小红书图片
昨天的文章已经描述了可以抓取评论区内容, 抓取图片内容和抓取评论区的内容基本一致 我们可以看到接口信息中含有图片链接,我们要做的就是爬取图片链接然后下载 这边要用到的模块为const downloadrequire(download) 将爬到的图片链接存放到images数组…...
MySQL从5.7升级到8.0步骤及其问题
MySQL从5.7升级到8.0步骤及其问题 前言 本文源自微博客,且以获得授权,请尊重版权。 一、需求背景 Docker环境下,MySQL5.7升级到8.0,数据迁移时使用的是mysqldump方式迁移。 二、迁移步骤 数据备份: docker exec -i 1…...
中年帕金森:守护健康,从容面对生活挑战
在快节奏的现代生活中,中年人群面临着越来越多的健康挑战。其中,帕金森病作为一种常见的神经系统疾病,逐渐引起了人们的关注。帕金森病不仅影响患者的身体健康,还对其日常生活造成极大的困扰。那么,我们该如何应对中年…...
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-近邻算法:也叫KNN 分类 算法,其中的N是 邻近邻居NearestNeighbor的首字母。 (1)其中K是特征值,就是选择离某个预测的值(例如预测的是苹果,就找个苹果)最近的几个值&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
前言: 前文我们从源码层面梳理了 SqlSessionFactory 的创建过程,本篇我们继续分析一下 SqlSession 的获取过程。 初识 MyBatis 【MyBatis 核心概念】 案例代码: public class MyBatisTest {Testpublic void test() throws IOException {/…...
Upload-Labs:Pass - 1(JS前端白名单)
Pass_1 1. 上传测试2. 代码审计**获取文件输入的值**:**检查是否选择了文件**:**定义允许的文件类型**:**提取文件的扩展名**:**检查文件类型是否允许上传**:**构建错误消息并提醒用户**: 3.绕过思路3.1 将…...
vue大作业-实现学校官网
vue大作业-实现学校官网 基于vue2实现的学校官网 项目展示 学校官网介绍 欢迎访问我们学校的官方网站,这里为您提供了全面的信息和资源,帮助您更好地了解我们的教育理念、教学资源和学术活动。 首页 首页是您了解我们学校的起点。这里展示了学校的最…...
24面试记录002
文章目录 12、brpc的优化2.1 brpc网络有啥降级? 3、移动语义4、python协程 二、1. mq怎么保障数据的顺序?3.brpc中上下游通信,怎么测评新增字段大小,对耗时的影响? 1 1、brpc和grpc区别,为啥选择brpc? gr…...
cocos 按钮
1、创建按钮 2、创建脚本 3、将脚本挂载到其他节点上 4、将节点和按钮绑定 即可实现点击按钮触发脚本。 在触发的脚本函数里面设置按钮节点的位置,将其移除屏幕,可以实现点击消失按钮的效果。...
文件扫描工具都有哪些?职场大佬都在用的文本提取工具大盘点~
回想起刚毕业初入职场那阵子,领导让帮忙把纸质文件扫描提取为文本时,还只会傻乎乎地一点点操作,属实是费劲得很! 好在后面受朋友安利,找到了4个能够快速实现文件扫描文字提取的方法,这才让我的办公效率蹭蹭…...
【学习】程序员资源网站
1 书栈网 简介:书栈网是程序员互联网IT开源编程书籍、资源免费阅读的网站,在书栈网你可以找到很多书籍、笔记资源。在这里,你可以根据热门收藏和阅读查看大家都在看什么,也可以根据技术栈分类找到对应模块的编程资源,…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)
上一章用到了V2 的概念,其实 Fiori当中还有 V4,咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务),代理中间件(ui5-middleware-simpleproxy)-CSDN博客…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
短视频矩阵系统文案创作功能开发实践,定制化开发
在短视频行业迅猛发展的当下,企业和个人创作者为了扩大影响力、提升传播效果,纷纷采用短视频矩阵运营策略,同时管理多个平台、多个账号的内容发布。然而,频繁的文案创作需求让运营者疲于应对,如何高效产出高质量文案成…...
