当前位置: 首页 > 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;…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...