harmonyos arkts 开发商品页面

1.结果展示

2. 实现分层组件

1.1 实现搜索栏

1.2 代码

这段代码是一个构建搜索框组件的方法,具体功能包括:

- 创建一个Search组件,设置初始值为this.keyword,placeholder为'请输入书名...'
- 添加一个搜索按钮,并设置按钮文本为'搜索'
- 设置Search组件的宽度为100%,高度为50
- 设定背景颜色为'#F5F5F5'
- 设置placeholder的颜色为灰色
- 设置placeholder的字体样式为大小14、粗细400
- 设置输入文字的字体样式为大小20、粗细400
- 绑定onSubmit事件处理函数,当用户点击搜索按钮时调用this.searchBooks(value),其中value为用户输入的搜索关键词
- 绑定onChange事件处理函数,当用户改变搜索框内容时将this.keyword更新为最新的输入值

这个方法实现了一个简单的搜索框功能,用户可以在输入框中输入关键词进行搜索,并且支持点击搜索按钮或者直接回车键执行搜索操作。同时也会实时更新this.keyword的数值,以便在搜索时传递正确的关键词参数。

 @Builder buildSearch() {Search({ value: this.keyword, placeholder: '请输入书名...' }).searchButton('搜索').width('100%').height(50).backgroundColor('#F5F5F5').placeholderColor(Color.Grey).placeholderFont({ size: 14, weight: 400 }).textFont({ size: 20, weight: 400 }).onSubmit((value: string) => {this.searchBooks(value)}).onChange((value: string) => {this.keyword = value})}

2.1 实现商品卡片

2.2 卡片代码

这段代码定义了一个名为ItemCard的组件结构,主要用于展示书籍信息。下面是该组件的功能逻辑描述:

- ItemCard组件包含一个私有属性book,用于存储书籍信息。

- build方法用于构建整个书籍信息展示的结构,包括左侧容器和右侧容器。

- 左侧容器部分使用Row布局,包含一个文本框,展示书名this.book.bookname,设置字体样式为斜体,字体大小为15,背景颜色为透明紫红色,字体颜色为白色,宽度占30%,高度为60,边框圆角为10,文本居中显示,左外边距为5。

- 右侧容器部分使用Column布局,包含价格信息和作者、出版社信息。价格信息展示为'价格为:¥' + this.book.price.toFixed(3),字体颜色为蓝色,字体大小为20。作者和出版社信息分别显示为"作者:" + this.book.author 和 "出版社:" + this.book.publisher,字体颜色为黑色,字体大小为12。这两个信息在同一行显示,宽度占右侧容器的68%,并且内容左右对齐。

- 整个ItemCard组件的样式设置为宽度占97%,高度为80,内容左右对齐,背景颜色为淡粉色,边框圆角为20。

总体来说,ItemCard组件通过左右两个容器分别展示书名、价格以及作者、出版社等信息

@Component
struct ItemCard{private bookbuild(){Row() {// 左侧容器Text(this.book.bookname).fontStyle(FontStyle.Italic).fontSize(15).backgroundColor("#ff404aa9").fontColor('white').width("30%").height('60').borderRadius(10).textAlign(TextAlign.Center).margin({ left: '5' })// 右侧容器Column() {Text('价格为:¥' + this.book.price.toFixed(3)).fontColor('blue').fontSize(20)Row(){Text("作者:" + this.book.author).fontColor('black').fontSize(12)Text("出版社:" + this.book.publisher).fontColor('black').fontSize(12)}.width('68%').justifyContent(FlexAlign.SpaceBetween)}.width("70%").borderRadius(10)}.width("97%").height("80").justifyContent(FlexAlign.SpaceBetween).backgroundColor("#fff3f3fc").borderRadius(20)}
}

2.3 实现收藏效果

2.4 收藏效果代码

  @Builder SaveBtn(bookno:string){Button("收藏").width("60").height('40').backgroundColor('#fff3f6f5').fontColor("#ff181a19").onClick(()=> {this.saveBook(bookno)})}

3. 全部代码(书籍数据来源于接口,可以自己适当的自定义一串json数据作为接口数据)

  pageSize: number = 10@State page:number =0 //总页面httpUtil: http.HttpRequest// todo 传递用户id@State userID:string=""searchBooks(keyword:string) {this.httpUtil.request(`192.168.**.***/books/${this.cur}/${this.pageSize}`,{method: http.RequestMethod.GET,extraData: { 'k': "bookname", 'v': this.keyword }}).then(res => {let jsonResult = res.result.toString()let responseObject = JSON.parse(jsonResult)this.try= responseObject.data// 当前页面this.cur=responseObject.cur// 总共页面this.page=responseObject.pages}).catch(err => {console.log('数据传输http错误')})}async saveBook(bookno:string){// todo 收藏逻辑// todo 1.找到用户与书籍信息,直接saveconst res = await this.httpUtil.request(`localhost/save/insert?rno=${this.userID}&bno=${bookno}`,{method: http.RequestMethod.POST,})console.log(res.result.toString())// todo 2.收藏成功 prompt传递弹窗Prompt.showToast({message:"收藏成功"})}aboutToAppear() {let httpRequest = http.createHttp()this.httpUtil = httpRequest// todo 传递用户编号this.userID = AppStorage.Get("info")// todo 查询全部图书this.searchBooks("")}

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

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

相关文章

【雷达相机外参标定】direct_visual_lidar_calibration安装

direct_visual_lidar_calibration安装 主页安装ubuntupclOpenCVceres其他依赖fmtdirect_visual_lidar_calibration 标定雷达和相机时使用direct_visual_lidar_calibration。 主页 https://github.com/koide3/direct_visual_lidar_calibration?tabreadme-ov-filehttps://koid…

MYX Finance 确认出席 Hack.Summit() 2024 区块链开发者大会

🎉MYX Finance 确认出席 Hack.Summit() 2024 区块链开发者大会🚀 🌟 激动人心的消息!我们非常荣幸地宣布,MYX Finance 将出席由Hack VC主办,AltLayer和Berachain协办,携手Solana、The Graph、Bl…

Linux/Ubuntu/Debian基本命令:光标移动命令

Linux系统真的超级好用,免费,有很多开源且功能强大的软件。尤其是Ubuntu,真的可以拯救十年前的老电脑。从今天开始我将做一个Linux的推广者,推广普及Linux基础。 光标移动命令对于在终端(Terminal)内有效导…

【经管数据-更新】华证ESG评级得分数据(2009-2023年)

一、数据说明 参考《经济研究》中方先明(2023)的做法,将华证ESG评级进行赋值,指标包含C、CC、CCC、B、BB、BBB、A、AA、AAA共9个等级,将上市公司ESG 等级从低到高分别赋值为1至9 二、数据来源:世界银行&am…

SPI读取TLE5012B编码器角度数据_ACM32G103

买到一个带编码器的电机,卖家留出来读取编码器数据的接口有SPI 具体的原理图如下: P2标注的是SPI的接口,其中MISO和MOSI是硬件连接到一起的 使用ACM32G103的硬件SPI2去读取其角度数据 原理大概如下: 1、先发送读取数据的指令&…

.NET高级面试指南专题十六【 装饰器模式介绍,包装对象来包裹原始对象】

装饰器模式(Decorator Pattern)是一种结构型设计模式,用于动态地给对象添加额外的职责,而不改变其原始类的结构。它允许向对象添加行为,而无需生成子类。 实现原理: 装饰器模式通过创建一个包装对象来包裹原…

Mysql命令行客户端

命令行客户端 操作数据库操作数据表 操作数据库 mysql> create database mike charsetutf8; Query OK, 1 row affected (0.01 sec) mysql> show databases; -------------------- | Database | -------------------- | information_schema | | mike …

ARM基础----STM32处理器操作模式

STM32处理器操作模式 Cortex-M处理器操作模式、特权等级和栈指针操作模式栈指针CONTROL寄存器异常压栈时的SP指针 Cortex-A 处理器运行模型寄存器组 Cortex-M处理器操作模式、特权等级和栈指针 操作模式 处理模式:执行中断服务程序等异常处理,处理器具有…

STM32FreeRTOS信号量(STM32cube高效开发)

一、信号量 (一)信号量概括 信号量是操作系统中重要的一部分,信号量是一种解决同步问题的机制,可以实现对共享资源的有序访问。 FreeRTOS 提供了多种信号量,按信号量的功能可分为二值信号量、计数型信号量、互斥信…

WPF Interaction

使用 Interaction 里面的方法来将事件映射到ViewModel层 引用命名空间:System.Windows.Interactivity.dll 在xaml界面引用这两种任意一个就行,这两个做的事情是相同的。 xmlns:i"clr-namespace:System.Windows.Interactivity;assemblySystem.Win…

宽度优先搜索算法(BFS)

宽度优先搜索算法(BFS)是什么? 宽度优先搜索算法(BFS)(也称为广度优先搜索)主要运用于树、图和矩阵(这三种可以都归类在图中),用于在图中从起始顶点开始逐层…

uVeiw color 颜色值

此功能为uView内部通过js提供的一些颜色值,可以用于通过js修改元素字体,背景颜色等一些场景,常用于uView的各个组件中。 这些颜色值,挂载在$u对象下的color数组中,关于这些颜色值的具体描述,详见Color 色彩…

指针--2

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言1.指针运算1.1.指针-整数1.2.指针-指针1.3.指针的关系运算 2.野指针2.1 野指针成因2.2 如何规避野指针 3.assert 断言4.指针的使用和传址调用4.1 strlen的模拟实…

模型训练中数据标注是什么意思?

问题: 模型训练中数据标注是什么意思? 解答 在机器学习和深度学习领域中,数据标注是指对原始的、未经处理的数据(如图像、文本、音频、视频或3D点云)进行人工标记的过程。这个过程为每一份数据赋予一个明确的标签或…

nn.Conv2d()中的groups分组参数

1.参考文章: 【Pytorch】搞懂nn.Conv2d的groups参数的作用 - 知乎 (zhihu.com) 2.理解: (1)只要你 明白了 多通道的卷积是如何实现的(可以看我的1X1卷积文章),那么这里的分组进行卷积就非常好…

bat 调用bat 等待执行完成

在Windows批处理(.bat)文件中,如果你需要调用另一个批处理文件并等待它执行完成后再继续执行后续命令,可以使用 call 命令来实现。call 命令会启动新的批处理文件,并在子脚本执行完毕后返回到父脚本来执行余下的命令。…

【Tauri】(4):整合Tauri和actix-web做本地大模型应用开发,可以实现session 登陆接口,完成页面展示,进入聊天界面

1,视频地址 https://www.bilibili.com/video/BV1GJ4m1Y7Aj/ 【Tauri】(4):整合Tauri和actix-web做本地大模型应用开发,可以实现session 登陆接口,完成页面展示,进入聊天界面 使用国内代理进行加…

软考笔记--软件可靠性评价

一.软件可靠性评价概述 软件可靠性评价是软件可靠性活动的重要组成部分,即适用于软件开发过程,也可以针对最终软件系统。在软件开发过程中使用软件可靠性评价,可以使用软件可靠性模型,估计软件当前的可靠性,以确认是否…

6-DOF GraspNet: Variational Grasp Generation for Object Manipulation

总结: 使用变分自动编码器(VAE)对抓取进行采样,并使用基于点网的抓取评估器模型对采样的抓取进行评估和细化 摘要: 我们将抓取生成问题表述为 使用变分自编码器对一组抓取进行采样,并使用抓取评 估器模型对采样的抓取进行评估和…

备考2024年小学生古诗文大会:历年真题15题练习和独家解析

如何提高小学生古诗词的知识?如何激发小学生古诗词的学习兴趣?如何提高小学古诗词的学习成绩?如何备考2024年小学生古诗文大会?...如果你也在关心和这些问题,我的建议是参加每年一度的小学生古诗词大会(免费…