arkUI自定义组件、状态组件管理、任务进度Demo

arkUI自定义组件

公共头部文件

@Component
export struct Header{private title: ResourceStrbuild(){Row() {Image($r('app.media.ic_public_back')).width(30).height(30)Text(this.title).fontSize(30).fontWeight(FontWeight.Bold)Blank()Image($r('app.media.ic_public_email')).width(30)}.width('100%').height('30')// .margin({ bottom: 20 }).justifyContent(FlexAlign.Start).backgroundColor('#d9d6c3')}
}

自定义组件主体

class Item {private img: Resource;private name: string;private price: number;private discount: numberconstructor(img: Resource, name: string, price: number,discount:number = 0) {this.img = imgthis.name = namethis.price = pricethis.discount = discount}
}// @Component
// struct Header{
//   private title: ResourceStr
//   build(){
//     Row() {
//       Image($r('app.media.ic_public_back'))
//         .width(30)
//         .height(30)
//       Text(this.title)
//         .fontSize(30)
//         .fontWeight(FontWeight.Bold)
//       Blank()
//       Image($r('app.media.ic_public_email'))
//         .width(30)
//     }
//     .width('100%')
//     .height('30')
//    // .margin({ bottom: 20 })
//     .justifyContent(FlexAlign.Start)
//     .backgroundColor('#d9d6c3')
//   }
// }
import {Header} from '../common/CommonCompents'// 全局构建自定义函数组件  全局
// @Builder function ItemCard(item) {
//   Row({ space: 20 }) {
//     Image(item.img)
//       .width(100)
//       .padding({ right: 20 })
//     Column({ space: 10 }) {
//       if (item.discount != 0) {
//         Text(item.name)
//           .fontColor('red')
//           .fontSize(20)
//         Text('原价：￥ ' + item.price)
//           .fontSize(10)
//           .decoration({type: TextDecorationType.LineThrough})
//         Text('现价：￥ ' + (item.price - item.discount))
//           .fontSize(20)
//         Text('折扣：￥ ' + item.discount)
//           .fontSize(15)
//       }else {
//         Text(item.name)
//           .fontColor('red')
//           .fontSize(20)
//         Text('￥ ' + item.price)
//           .fontSize(20)
//       }
//     }
//     .height('100%')
//     .alignItems(HorizontalAlign.Start)
//   }
//   .width('100%')
//   .backgroundColor('#FFF')
//   .borderRadius(20)
//   .height(120)
//   .padding(10)
// }// 全局公共样式
@Styles function fillScreen() {.width('100%').height('100%').backgroundColor('#d9d6c3').padding(20)
}
// 公共文本样式
@Extend(Text) function priceText(){.fontColor('red').fontSize(20)
}
@Entry
@Component
struct shopping {private items: Array<Item> = [new Item($r('app.media.icon'), 'very good1', 661,500),new Item($r('app.media.icon'), 'very good2', 662),new Item($r('app.media.icon'), 'very good3', 663),new Item($r('app.media.icon'), 'very good1', 661,500),new Item($r('app.media.icon'), 'very good2', 662),new Item($r('app.media.icon'), 'very good3', 663),new Item($r('app.media.icon'), 'very good1', 661,500),new Item($r('app.media.icon'), 'very good2', 662),new Item($r('app.media.icon'), 'very good3', 663)]build() {Column() {Header({title:'商品列表'}).margin({bottom:10})List(){ForEach(this.items,item =>{ListItem(){// Row({ space: 20 }) {//   Image(item.img)//     .width(100)//     .padding({ right: 20 })//   Column({ space: 10 }) {//     if (item.discount != 0) {//       Text(item.name)//         .fontColor('red')//         .fontSize(20)//       Text('原价：￥ ' + item.price)//         .fontSize(18)//         .decoration({type: TextDecorationType.LineThrough})//       Text('现价：￥ ' + (item.price - item.discount))//         .fontSize(20)//       Text('折扣：￥ ' + item.discount)//         .fontSize(20)//     }else {//       Text(item.name)//         .fontColor('red')//         .fontSize(20)//       Text('￥ ' + item.price)//         .fontSize(20)//     }//   }//   .height('100%')//   .alignItems(HorizontalAlign.Start)// }// .width('100%')// .backgroundColor('#FFF')// .borderRadius(20)// .height(120)// .padding(10)// ItemCard(item) 全局this.ItemCard(item) //局部}})}.width('100%').layoutWeight(1)// ForEach(//   this.items,//   item =>{//     Row({ space: 20 }) {//       Image(item.img)//         .width(100)//         .padding({ right: 20 })//       Column({ space: 10 }) {//         if (item.discount != 0) {//           Text('原价：￥ ' + item.price)//             .fontSize(18)//             .decoration({type: TextDecorationType.LineThrough})//           Text('现价：￥ ' + (item.price - item.discount))//             .fontSize(20)//           Text('折扣：￥ ' + item.discount)//             .fontSize(20)//         }else {//           Text(item.name)//             .fontColor('red')//             .fontSize(20)//           Text('￥ ' + item.price)//             .fontSize(20)//         }//       }//       .height('100%')//       .alignItems(HorizontalAlign.Start)//     }//     .width('100%')//     .backgroundColor('#FFF')//     .borderRadius(20)//     .height(120)//     .padding(10)//   }// )}.fillScreen()}//局部构建自定义函数组件@Builder ItemCard(item) {Row({ space: 20 }) {Image(item.img).width(100).padding({ right: 20 })Column({ space: 10 }) {if (item.discount != 0) {Text(item.name).priceText()Text('原价：￥ ' + item.price).fontSize(15).decoration({type: TextDecorationType.LineThrough})Text('现价：￥ ' + (item.price - item.discount)).fontSize(20)Text('折扣：￥ ' + item.discount).fontSize(15)}else {Text(item.name).priceText()Text('￥ ' + item.price).priceText()}}.height('100%').alignItems(HorizontalAlign.Start)}.width('100%').backgroundColor('#FFF').borderRadius(20).height(120).padding(10)}
}

状态组件

状态：state 驱动试图更新数据 被装饰器标记的变量
视图：view 基于ui描述渲染的到的用户界面

@State 声明必须初始化，支持Object、class、string、number、enum、boolean以及这些类型的数组

//对象类型
class Student{name: stringage: numberboy: Studentconstructor(name:string,age:number,boy ?: Student) {this.name = namethis.age = agethis.boy = boy}
}@Component
struct StateView2{@State s:Student = new Student("ty",15)build(){Column(){Text(`${this.s.name}:${this.s.age}`).fontSize(50).fontWeight(FontWeight.Bold).onClick(() =>{this.s.age++})// Text(`${this.s.boy.name}:${this.s.boy.age}`)//   .fontSize(50)//   .fontWeight(FontWeight.Bold)//   .onClick(() =>{//     this.s.boy.age++//   })}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}
@Entry
@Component
struct StateView{@State msg:string = 'hello'@State age:number = 1@State name:string = 'ty'@State su:Student[] =[new Student("xx",12),new Student("yy",10)]@State idx:number = 1build(){Column(){Text(this.msg).fontSize(50).fontWeight(FontWeight.Bold).onClick(() =>{this.msg = 'hello ArkUI'})Text(`${this.name}:${this.age}`).fontSize(50).fontWeight(FontWeight.Bold).onClick(() =>{this.age++})Text("=======Student List=======")Button('添加').onClick(() =>{this.su.push(new Student('oo'+this.idx+1,this.age+1) )})ForEach(this.su,(s,index) =>{Row(){Text(`${s.name}: ${s.age}`).onClick(() =>{this.su[index] = new Student(s.name,s.age+1)})Button('删除').onClick(() =>{this.su.splice(index,1)})}})}.width('100%').height('100%').padding(10)}
}

任务管理demo

class Task{static id:number = 1name:string = `任务：${Task.id++}`state:boolean = false}
//统一卡片样式
@Styles function card(){.width('95%').padding(20).borderRadius(15).backgroundColor(Color.White).shadow({radius:5,color:'yellow',offsetX:2,offsetY:4})
}
//任务完成样式
@Extend(Text) function finishCard(){.decoration({type:TextDecorationType.LineThrough}).backgroundColor('#B1B2B1')
}@Entry
@Component
struct task{//总任务数@State totalTask:number = 0;//完成数@State finishTask: number = 0;//任务个数@State Tasks:Task[] =[]//创建一个更新函数handleTaskChange(){this.totalTask = this.Tasks.lengththis.finishTask = this.Tasks.filter(item => item.state).length}build(){Column({space:10}) {//1.任务进度Row() {Text("任务进度：").fontSize(40).fontWeight(FontWeight.Bold)Stack() {Progress({value: this.finishTask,total: this.totalTask,type: ProgressType.Ring}).width('100')Row() {Text(this.finishTask.toString()).fontSize(24).fontColor('blue')Text(' / ' + this.totalTask.toString()).fontSize(24)}}}.card().margin({ top: 10, bottom: 10 }).justifyContent(FlexAlign.SpaceEvenly)//2.新增任务按钮Button('新增任务').onClick(() => {this.Tasks.push(new Task())//this.totalTask = this.Tasks.lengththis.handleTaskChange()}).fontSize(20)//3.任务列表List(){ForEach(this.Tasks,(item:Task, index) =>{ListItem(){Row(){Text(item.name).fontSize(25)Checkbox().select(item.state).onChange(val =>{item.state = val//完成的数量 = 任务列表中filter状态的长度//this.finishTask = this.Tasks.filter(item => item.state).lengththis.handleTaskChange()})}.card().margin({top:15}).justifyContent(FlexAlign.SpaceBetween)}.swipeAction({end: this.DeleteCard(index)})})}.width('100%').layoutWeight(1).alignListItem(ListItemAlign.Center)}.width('100%').height('100%').backgroundColor('#F1F2F3')}@Builder DeleteCard(index:number){Button(){Image($r('app.media.ic_public_delete_filled')).fillColor(Color.White).width(20)}.width(40).height(40).type(ButtonType.Circle).backgroundColor(Color.Red).margin(5).onClick(()=>{this.Tasks.splice(index,1)this.handleTaskChange()})}
}

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

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

相关文章

[ C++ ] STL---仿函数与priority_queue

[ C++ ] STL---仿函数与priority_queue

目录 仿函数 示例一&#xff1a; 示例二 : 常见的仿函数 priority_queue简介 priority_queue的常用接口 priority_queue的模拟实现 基础接口 push() 堆的向上调整算法 堆的插入 pop() 堆的向下调整算法 堆的删除 priority_queue最终实现 仿函数 仿函数&#xff…
阅读更多...
MusicHiFi: Fast High-Fidelity Stereo Vocoding

MusicHiFi: Fast High-Fidelity Stereo Vocoding

MusicHiFi: Fast High-Fidelity Stereo Vocoding 相关链接&#xff1a;arxiv github 关键字&#xff1a;音乐生成、高保真立体声、立体声编解码器、生成对抗网络、频带扩展 摘要 MusicHiFi是一种高效的高保真立体声编解码器&#xff0c;它通过将低分辨率的mel频谱图转换为音频…
阅读更多...
《桥接模式（极简c++）》

《桥接模式（极简c++）》

本文章属于专栏《设计模式&#xff08;极简c版&#xff09;》 继续上一篇《原型模式&#xff08;极简c&#xff09;》。本章简要说明桥接模式。本文分为模式说明、本质思想、实践建议、代码示例四个部分。 模式说明 方案&#xff1a; 将抽象部分与它的实现部分分离&#xff0c…
阅读更多...
【Vue】Vue集成Element-UI框架

【Vue】Vue集成Element-UI框架

&#x1f64b;‍ 一日之际在于晨 ⭐本期内容&#xff1a;Vue集成Element-UI框架 &#x1f3c6;系列专栏&#xff1a;从0开始的Vue之旅 文章目录 Element-UI简介安装Element-UInpm安装CDN安装 引入Element-UI测试是否引入成功总结 Element-UI简介 Element-UI官网&#xff1a;点…
阅读更多...
极大提高工作效率的 Linux 命令

极大提高工作效率的 Linux 命令

作为一名软件开发人员&#xff0c;掌握 Linux 命令是必不可少的技能。即使你使用 Windows 或 macOS&#xff0c;你总会遇到需要使用 Linux 命令的场合。例如&#xff0c;大多数 Docker 镜像都基于 Linux 系统。要进行 DevOps 工作&#xff0c;你需要熟悉Linux&#xff0c;至少要…
阅读更多...
C语言例3-32：使用位移位运算符的例子

C语言例3-32：使用位移位运算符的例子

设 unsigned short a 0101 ;short b -6 ; a 为无符号八进制整数&#xff0c;对应的二进制数为0000 0000 0100 0001b 为有符号十进制整数&#xff0c;对应的二进制数为1111 1111 1111 1010 &#xff01;&#xff01;&#xff01; 计算机系统中整型数一律采用补码表示&#…
阅读更多...
vue-quill-editor和vue-ueditor-wrap富文本编辑器应用

vue-quill-editor和vue-ueditor-wrap富文本编辑器应用

目录 一、vue-quill-editor 1.1、界面展示 1.2、代码介绍 1.2.1、安装 1.2.2、配置 1.2.3、代码应用 1.2.4、提取内容 二、vue-ueditor-wrap 2.1、界面展示 2.2、代码介绍 2.2.1、安装 2.2.2、配置 2.2.3、代码应用 一、vue-quill-editor 1.1、界面展示 文本输出…
阅读更多...
Vue响应式原理全解析

Vue响应式原理全解析

前言 大家好&#xff0c;我是程序员蒿里行。浅浅记录一下面试中的高频问题&#xff0c;请你谈一下Vue响应式原理。 必备前置知识&#xff0c;​​Vue2​​官方文档中​​深入响应式原理​​​及​​Vue3​​官方文档中​​深入响应式系统​​。 什么是响应式 响应式本质是当…
阅读更多...
liunx CentOS7 搭建lnmp环境 php nginx mysql

liunx CentOS7 搭建lnmp环境 php nginx mysql

安装一些刚需软件&#xff1a;不懂请自行查询 安装一些需要的软件命令 yum install wget vim net-tools bash* lrzsz tree nmapnc lsof telnet -y 刷新命令 source /usr/share/bash-completion/bash_completion echo source /usr/share/bash-completion/bash_completion &…
阅读更多...
UE5 C++ 3D血条 响应人物受伤 案例

UE5 C++ 3D血条 响应人物受伤 案例

一.3Dwidget 1.创建C Userwidget的 MyHealthWidget&#xff0c;声明当前血量和最大血量 UCLASS() class PRACTICEC_API UMyHealthWidget : public UUserWidget {GENERATED_BODY() public:UPROPERTY(EditAnywhere,BlueprintReadWrite,Category "MyWidget")float C…
阅读更多...
利用API打造卓越的用户体验

利用API打造卓越的用户体验

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 正文 1. 数据驱动的设计 2. 功能扩展与整合 3. 实时性与响应性 4. 个性化推荐与定制化服务 结语 我的其他博客 正文 随着数字化时代的…
阅读更多...
python 操作excel(openpyxl.load_workbook)、excel操作封装

python 操作excel(openpyxl.load_workbook)、excel操作封装

操作excel 其他的库&#xff1a; xlrd xlwt &#xff1a; 过时了&#xff0c;只能操作xls后缀的文件。pandas&#xff1a;大数据测试 数据分析项目会用。 openpyxl&#xff1a;第三方库 支持的格式有&#xff1a;.xlsx、.xlsm、.xltx、.xltm&#xff0c;l不支持.xls文件格式…
阅读更多...
npm i安装依赖报错，但是cnpm i 却安装成功

npm i安装依赖报错，但是cnpm i 却安装成功

问题描述&#xff1a;在a项目中npm i 安装依赖时发生以上报错&#xff0c;但是cnpm i 却成功&#xff0c;而且在其他项目中npm i 安装其他项目依赖也能成功.... 解决办法&#xff1a;删除项目中package-lock.json文件后再npm i 即可
阅读更多...
搭建Linux内核开发环境——保姆教程（持续更新中）

搭建Linux内核开发环境——保姆教程（持续更新中）

搭建Linux内核开发环境——保姆教程&#xff08;持续更新中&#xff09; git版本管理汇编器链接器调试器编辑器构建系统模拟器文档工具图形设计工具 在此文中&#xff0c;持续完善&#xff0c;搭建内核开发环境的细节&#xff0c;有需要的小伙伴儿可以持续关注下 git版本管理 …
阅读更多...
Ruby选择结构实战

Ruby选择结构实战

文章目录 一、Ruby选择结构实战概述二、Ruby选择结构实战案例&#xff08;一&#xff09;闰年判断1、编写程序&#xff0c;实现功能2、程序的解释说明3、运行程序&#xff0c;查看结果 &#xff08;二&#xff09;求解一元二次方程1、编写程序&#xff0c;实现功能2、程序的解释…
阅读更多...
rust - 基于AES-CBC-128的双重加密实现

rust - 基于AES-CBC-128的双重加密实现

通常加密密钥不要出现在源码中&#xff0c;比如配置文件中的数据库密码等。解决方案通常采用将密钥存放在环境变量中&#xff0c;进程启动时从环境变量获取密钥加载到内存中。 还有一种方案&#xff0c;对密钥进行加密&#xff0c;源码中只包含对密钥加密的根密钥和对密钥加密…
阅读更多...
android gdb 调试

android gdb 调试

gdbgdbserver远程调试技术&#xff08;一&#xff09;——调试环境搭建_gdbserver 远程调试-CSDN博客 GDB/gdbserver 7.4.1 for Android with NEON support (gnutoolchains.com) sudo apt-get install texinfo$ tar zxvf gdb-7.12.tar.gz $ cd gdb-7.12/$ mkdir build$ cd bu…
阅读更多...
jax不识别gpu gpu: RuntimeError: Unknown backend: ‘gpu‘ requested

jax不识别gpu gpu: RuntimeError: Unknown backend: ‘gpu‘ requested

这里写自定义目录标题 jax 不识别gpu错误信息最终解决方案 倒腾过程jaxlib version jax 不识别gpu 以下内容在 x86 linux cudagpu 测试通过 错误信息 jax-0.4.25 jaxlib-0.4.25 不识别gpu: RuntimeError: Unknown backend: ‘gpu’ requested, but no platforms that are in…
阅读更多...
Linux--Flappy_bird实现

Linux--Flappy_bird实现

目录 void handler(int sig): mian: void init_curses() int set_timer(int ms_t); 小鸟的操作&#xff1a; void show_pipe()&#xff1a; void create_list() void clear_pipe() void move_pipe(); test_bird.c完整代码&#xff1a; 代码实现&#xff1a; #includ…
阅读更多...
STM32 CubeMX使用介绍（含FreeRTOS生成）

STM32 CubeMX使用介绍（含FreeRTOS生成）

文章目录 前言1. 简介1.1 什么是STM32CubeMX1.2 为什么会有STM32CubeMX的出现1.3 STM32CubeMX常用功能有哪些&#xff1f;1.4 官方资料下载地址 2. 下载和安装STM32CubeMX2.1 下载软件2.2 软件安装 3. 使用方式3.1 说明3.2 不同选择器介绍3.3 构建新的项目3.1 选择单片机的型号…
阅读更多...
最新文章

Copyright @ 2022~2023