【HarmonyOS】鸿蒙开发之渲染控制——第2.3章

if/eles条件渲染

if的使用方法与javascript,java中使用的if/eles条件渲染使用基本一致。

案例:

@Entry
@Component
struct IfElseDemo{@State isShow:boolean = false;build(){Column() {TitleBar({titleBarAttribute: {title: "ifElse使用案例",backShow: true,backCallback: () => {router.back()}},}) {}Column(){if(this.isShow){Text("迪加奥特曼")}else{Text("泰罗奥特曼")}Divider().margin({bottom:10,top:10})Button("修改标题").onClick(()=>{this.isShow = !this.isShow;})}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height("100%")}}
}

注意事项:必须在组件内使用

ForEach渲染渲染

ForEach的使用方法与javascript中的for循环的使用基本一致。

案例:

@Entry
@Component
struct ForeachDemo{private items: any[] = [{"imageName":"图片名称","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称2","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称3","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称4","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称5","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称6","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称7","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称8","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称9","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称10","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称11","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称12","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称13","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称14","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},];build(){Column() {TitleBar({titleBarAttribute: {title: "foreach使用案例",backShow: true,backCallback: () => {router.back()}},}) {}Column(){List() {ForEach(this.items, (item, index) => {ListItem() {Row() {Image(item.imageUrl).height(80).width(80)Column() {Text(item.imageName) // 图片名称.fontSize(20)Text("索引值:"+index) // 图片名称.fontSize(20)}.margin({ left: 5 }).alignItems(HorizontalAlign.Start).layoutWeight(1)}.width('100%').margin({bottom:10})}})}.width('100%')}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height("100%").padding({bottom:60})}}
}

LazyForEach循环渲染

LazyForEach 组件(数据懒加载)从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件

案例:

// 图片类
class ImgClass {public imageName: string;public imageUrl: string;constructor(imageName: string, imageUrl: string) {this.imageName = imageName;this.imageUrl = imageUrl;}
}// 定义DataSource
abstract class BaseDataSource<T> implements IDataSource {private mDataSource: T[] = new Array();constructor(dataList: T[]) {this.mDataSource = dataList;}totalCount(): number {return this.mDataSource == null ? 0 : this.mDataSource.length}getData(index: number): T|null {return index >= 0 && index < this.totalCount() ? this.mDataSource[index] : null;}registerDataChangeListener(listener: DataChangeListener) {}unregisterDataChangeListener(listener: DataChangeListener) {}}//
class ImgDataSource extends BaseDataSource<ImgClass> {constructor(imgs: ImgClass[]) {super(imgs)}
}@Entry
@Component
struct LazyForeachDemo{private items: any[] = [{"imageName":"图片名称","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称2","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称3","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称4","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称5","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称6","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称7","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称8","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称9","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称10","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称11","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称12","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称13","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},{"imageName":"图片名称14","imageUrl": "https://seopic.699pic.com/photo/50110/8335.jpg_wh1200.jpg"},];// 创建dataSourceprivate dataSource: ImgDataSource = new ImgDataSource(this.items);build(){Column() {TitleBar({titleBarAttribute: {title: "lazyForeach使用案例",backShow: true,backCallback: () => {router.back()}},}) {}Column(){List() {LazyForEach(this.dataSource, (item, index) => {ListItem() {Row() {Image(item.imageUrl).height(80).width(80)Column() {Text(this.handleImageName(item.imageName,index)) // 图片名称.fontSize(20)Text("索引值:"+index) // 图片名称.fontSize(20)}.margin({ left: 5 }).alignItems(HorizontalAlign.Start).layoutWeight(1)}.width('100%').margin({bottom:10})}})}.width('100%')}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height("100%").padding({bottom:60})}}handleImageName(name:string,index:number):string{console.log("当前索引: " + index); // 打印item下标日志return "图片名称"+name}
}

滚动到哪里,索引就显示哪个索引值。
在这里插入图片描述

踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/685625.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【图论经典题目讲解】CF786B - Legacy 一道线段树优化建图的经典题目

C F 786 B − L e g a c y \mathrm{CF786B - Legacy} CF786B−Legacy D e s c r i p t i o n \mathrm{Description} Description 给定 1 1 1 张 n n n 个点的有向图&#xff0c;初始没有边&#xff0c;接下来有 q q q 次操作&#xff0c;形式如下&#xff1a; 1 u v w 表示…

【Langchain Agent研究】SalesGPT项目介绍(五)

【Langchain Agent研究】SalesGPT项目介绍&#xff08;四&#xff09;-CSDN博客 上节课&#xff0c;我们分析了一下salesGPT项目里源代码的一些问题&#xff0c;重新写了一个运行方法&#xff0c;换了一个模型并修改了一些源代码开始把项目跑起来了&#xff0c;我们已经…

【leetcode热题】二叉树的层序遍历

难度&#xff1a; 中等通过率&#xff1a; 46.1%题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述 给定一个二叉树&#xff0c;返回其按层次遍历的节点值。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&…

STM32F1 - 中断系统

Interrupt 1> 硬件框图2> NVIC 中断管理3> EXTI 中断管理3.1> EXTI与NVIC3.2> EXTI内部框图 4> 外部中断实验4.1> 实验概述4.2> 程序设计 5> 总结 1> 硬件框图 NVIC&#xff1a;Nested Vectored Interrupt Controller【嵌套向量中断控制器】 管理…

拿捏c语言指针(上)

目录 前言 ​编辑 指针 内存与地址 计算机常见单位 理解编址 取地址&#xff0c;指针变量&#xff0c;解引用 取地址 指针变量 解引用 指针变量大小 指针类型的作用 char*解引用后 指针-整数 应用 void*指针 const修饰指针变量 const修饰普通变量 const修饰指…

自动化测试-RIDE编写自动化脚本

自动化脚本软件测试的必修内容&#xff0c;是自动化测试的核心&#xff0c;脚本的逻辑严谨性、可维护性非常重要&#xff0c;优秀的自动化脚本需要能兼顾用例的正确有效性和自动化测试的效率&#xff0c;本篇文章将介绍如何用RIDE写自动化脚本。我们将深入探讨RIDE的具体用法&a…

相机图像质量研究(22)常见问题总结:CMOS期间对成像的影响--光学串扰

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…

C++:迭代器的封装思想

C&#xff1a;迭代器的封装思想 list迭代器实现反向迭代器实现 本博客将通过实现list的迭代器&#xff0c;以及它的反向迭代器&#xff0c;来帮助大家理解迭代器的底层逻辑&#xff0c;以及封装思想。 list迭代器实现 迭代器是一个遍历容器的工具&#xff0c;其可以通过自增自…

Linux POSIX信号量 线程池

Linux POSIX信号量 线程池 一. 什么是POSIX信号量&#xff1f;二. POSIX信号量实现原理三. POSIX信号量接口函数四. 基于环形队列的生产消费模型五. 线程池 一. 什么是POSIX信号量&#xff1f; POSIX信号量是一种用于同步和互斥操作的机制&#xff0c;属于POSIX&#xff08;Po…

项目管理工具软件Maven趣闻

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Maven这个单词来自于意第绪语&#xff08;Yiddish&#xff09;&#xff0c;这是一种与德语和希伯来语有密切关系的犹太民族语言。在这个语境中&#xff0c;Maven意为“知识的…

ChatGPT高效提问—prompt实践(智能辅导-心理咨询-职业规划)

ChatGPT高效提问—prompt实践&#xff08;智能辅导-心理咨询-职业规划&#xff09; ​ 智能辅导是指利用人工智能技术&#xff0c;为学习者提供个性化、高效的学习辅助服务。它基于大数据分析和机器学习算法&#xff0c;可以针对学习者的学习行为、状态和能力进行评估和预测&a…

Shell - 学习笔记 - 2.15 - Shell关联数组(下标是字符串的数组)

现在最新的 Bash Shell 已经支持关联数组了。关联数组使用字符串作为下标&#xff0c;而不是整数&#xff0c;这样可以做到见名知意。 关联数组也称为“键值对&#xff08;key-value&#xff09;”数组&#xff0c;键&#xff08;key&#xff09;也即字符串形式的数组下标&…

AutoSAR(基础入门篇)10.1-Autosar_Ecum模式管理概述

目录 一、什么是模式管理 二、再谈BswM 1、BswM概述 2、BswM执行流程 三、再谈EcuM 模式管理应该算是我们实践篇中较难的内容了,还有就是诊断那章也比较难。因为模式管理里面可能回涉及到很多的名词,很多的特性,所以博主准 备分个8次左右来讲解这些内容。但是在实际的应…

如何在 Angular 中使用环境变量

简介 如果你正在构建一个使用 API 的应用程序&#xff0c;你会想在开发过程中使用测试环境的 API 密钥&#xff0c;而在生产环境中使用生产环境的 API 密钥。在 Angular 中&#xff0c;你可以通过 environment.ts 文件创建环境变量。 在本教程中&#xff0c;你将学习如何在 A…

【Java万花筒】数据流的舵手:大数据处理和调度库对比指南

智慧的导航仪&#xff1a;为您的数据流选择正确的大数据处理和调度库 前言 在如今的信息时代&#xff0c;大数据处理和调度已经成为许多企业和组织中关键的任务。为了有效地处理和管理大规模数据流&#xff0c;选择适合的调度库是至关重要的。本文将介绍几种常用的大数据处理…

【前端工程化面试题】使用 webpack 来优化前端性能/ webpack的功能

这个题目实际上就是来回答 webpack 是干啥的&#xff0c;你对webpack的理解&#xff0c;都是一个问题。 &#xff08;1&#xff09;对 webpack 的理解 webpack 为啥提出 webpack 是啥 webpack 的主要功能 前端开发通常是基于模块化的&#xff0c;为了提高开发效率&#xff0…

MATLAB知识点:datasample函数(★★☆☆☆)随机抽样的函数,能对矩阵数据进行随机抽样

讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 节选自第3章&#xff1a;课后习题讲解中拓展的函数 在讲解第三…

数据类型与变量

目录 作业回顾 有关JDK, JRE, JVM三者&#xff1a; 判断题 新课学习 字面常量 数据类型 变量 整型变量 长整型变量 短整型变量 字节型变量 浮点型变量 字符型变量 布尔型变量 类型转换 自动类型转换&#xff08;隐式&#xff09; 强制类型转换&#xff08;显式…

Navicat安装使用连接MySQL

目录 安装登录MySQL登录MySQL用Navicat连接MySQL 安装 选择“我同意”&#xff0c;点击下一步。 选择安装的目标文件夹&#xff0c;点击下一步。 点击下一步。 点击下一步。 点击安装。 软件安装需要一些时间&#xff0c;请耐心等待 点击“完成”。 注册 输入 密钥&#x…

Crypto-RSA3

题目&#xff1a;&#xff08;BUUCTF在线评测 (buuoj.cn)&#xff09; 共模攻击 ​ 前提&#xff1a;有两组及以上的RSA加密过程&#xff0c;而且其中两次的m和n都是相同的&#xff0c;那么就可以在不计算出d而直接计算出m的值。 ​ 设模数为n&#xff0c;两个用户的公钥分别为…