【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(四) -> 常见组件(一)

目录

1 -> List

1.1 -> 创建List组件

1.2 -> 添加滚动条

1.3 -> 添加侧边索引栏

1.4 -> 实现列表折叠和展开

1.5 -> 场景示例

2 -> dialog

2.1 -> 创建Dialog组件

2.2 -> 设置弹窗响应

2.3 -> 场景示例

3 -> form

3.1 -> 创建Form组件

3.2 -> 实现表单缩放

3.3 -> 设置Form样式

3.4 -> 添加响应事件

3.5 -> 场景示例


1 -> List

List是用来显示列表的组件,包含一系列相同宽度的列表项,适合连续、多行地呈现同类数据。

1.1 -> 创建List组件

在pages/index目录下的hml文件中创建一个List组件。

<!-- index.hml -->
<div class="container"> <list>    <list-item class="listItem"></list-item><list-item class="listItem"></list-item><list-item class="listItem"></list-item><list-item class="listItem"></list-item></list>
</div>
/* test.css */
.container {width:100%;height:100%;flex-direction: column;align-items: center;background-color: #F1F3F5;
}
.listItem{height: 20%;background-color:#d2e0e0;margin-top: 20px;
}

说明

  • <list-item-group>是<list>的子组件,实现列表分组功能,不能再嵌套<list>,可以嵌套<list-item>。

  • <list-item>是<list>的子组件,展示列表的具体项。

1.2 -> 添加滚动条

设置scrollbar属性为on即可在屏幕右侧生成滚动条,实现长列表或者屏幕滚动等效果。

<!-- index.hml -->
<div class="container"><list class="listCss" scrollbar="on" ><list-item class="listItem"></list-item><list-item class="listItem"></list-item><list-item class="listItem"></list-item><list-item class="listItem"></list-item><list-item class="listItem"></list-item><list-item class="listItem"></list-item></list>
</div> 
/* index.css */
.container {flex-direction: column;background-color: #F1F3F5;
}
.listItem{height: 20%;background-color:#d2e0e0;margin-top: 20px;
}
.listCss{height: 100%;scrollbar-color: #8e8b8b;scrollbar-width: 50px;
}

1.3 -> 添加侧边索引栏

设置indexer属性为自定义索引时,索引栏会显示在列表右边界处,indexer属性设置为true,默认为字母索引表。

<!-- index.hml -->
<div class="container">   <list class="listCss"  indexer="{{['#','1','2','3','4','5','6','7','8']}}" >  <list-item class="listItem"  section="#" ></list-item>   </list>
</div>
/* index.css */
.container{flex-direction: column;background-color: #F1F3F5;} 
.listCss{height: 100%;    flex-direction: column;columns: 1
}

说明

  • indexer属性生效需要flex-direction属性配合设置为column,且columns属性设置为1。

  • indexer可以自定义索引表,自定义时"#"必须要存在。

1.4 -> 实现列表折叠和展开

为List组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。

<!-- index.hml -->
<div class="doc-page"><list style="width: 100%;" id="mylist"><list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand"><list-item type="item" style="background-color:#FFF0F5;height:95px;"><div class="item-group-child"><text>One---{{listgroup.value}}</text></div></list-item><list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true"><div class="item-group-child"><text>Primary---{{listgroup.value}}</text></div></list-item></list-item-group></list>
</div>
/* index.css */
.doc-page {flex-direction: column;background-color: #F1F3F5;
}
list-item{
margin-top:30px;
}
.top-list-item {width:100%;background-color:#D4F2E7;
}
.item-group-child {justify-content: center;align-items: center;width:100%;
}
// test.js
import prompt from '@system.prompt';
export default {data: {direction: 'column',list: []},onInit() {this.list = []this.listAdd = []for (var i = 1; i <= 2; i++) {var dataItem = {value: 'GROUP' + i,};this.list.push(dataItem);}},collapse(e) {prompt.showToast({message: 'Close ' + e.groupid})},expand(e) {prompt.showToast({message: 'Open ' + e.groupid})}
}

说明

  • groupcollapse和groupexpand事件仅支持list-item-group组件使用。

1.5 -> 场景示例

在本场景中,可以根据字母索引表查找对应联系人。

<!-- index.hml -->
<div class="doc-page"> <text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;"> <span>Contacts</span> </text> <list class="list" indexer="true"> <list-item class="item" for="{{namelist}}" type="{{$item.section}}" section="{{$item.section}}"> <div class="container"> <div class="in-container"> <text class="name">{{$item.name}}</text> <text class="number">18888888888</text> </div> </div> </list-item> <list-item type="end" class="item"> <div style="align-items:center;justify-content:center;width:750px;"> <text style="text-align: center;">Total: 10</text> </div> </list-item> </list> 
</div>
/* index.css */
.doc-page {width: 100%;height: 100%;flex-direction: column;background-color: #F1F3F5;
}
.list {width: 100%;height: 90%;flex-grow: 1;
}
.item {height: 120px;padding-left: 10%;border-top: 1px solid #dcdcdc;
}
.name {color: #000000;font-size: 39px;
}
.number {color: black;font-size: 25px;
}
.container {flex-direction: row;align-items: center;
}
.in-container {flex-direction: column;justify-content: space-around;
}
// test.js
export default { data: { namelist:[{ name: 'Zoey', section:'Z' },{ name: 'Quin', section:'Q' },{ name:'Sam', section:'S' },{ name:'Leo', section:'L' },{ name:'Zach', section:'Z' },{ name:'Wade', section:'W' },{ name:'Zoe', section:'Z' },{ name:'Warren', section:'W' },{ name:'Kyle', section:'K' },{ name:'Zaneta', section:'Z' }] }, onInit() { } }

2 -> dialog

Dialog组件用于创建自定义弹窗,通常用来展示用户当前需要或用户必须关注的信息或操作。

2.1 -> 创建Dialog组件

在pages/index目录下的hml文件中创建一个Dialog组件,并添加Button组件来触发Dialog。Dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。

<!-- test.hml -->
<div class="doc-page"><dialog class="dialogClass" id="dialogId" dragable="true"><div class="content"><text>this is a dialog</text></div></dialog><button value="click me" onclick="openDialog"></button>
</div>
/* test.css */
.doc-page {width:100%;height:100%;flex-direction: column;align-items: center;justify-content: center;background-color: #F1F3F5;
}
.dialogClass{width: 80%;height: 250px;margin-start: 1%;
}
.content{width: 100%;height: 250px;justify-content: center;background-color: #e8ebec;border-radius: 20px;
}
text{width: 100%;height: 100%;text-align: center;
}
button{width: 70%;height: 60px;
}
/* test.js */
export default {//Touch to open the dialog box.openDialog(){this.$element('dialogId').show()},
}

2.2 -> 设置弹窗响应

点击页面上非Dialog的区域时,将触发cancel事件而关闭弹窗。同时也可以通过对Dialog添加show和close方法来显示和关闭弹窗。

<!-- test.hml -->
<div class="doc-page"><dialog class="dialogClass" id="dialogId" oncancel="canceldialog"><div class="dialogDiv"><text>dialog</text><button value="confirm" onclick="confirmClick"></button></div></dialog><button value="click me" onclick="openDialog"></button>
</div>
/* test.css */
.doc-page {width:100%;height:100%;flex-direction: column;align-items: center;justify-content: center;background-color: #F1F3F5;
}
.dialogClass{width: 80%;height: 300px;margin-start: 1%;
}
.dialogDiv{width: 100%;flex-direction: column;justify-content: center;align-self: center;
}
text{height: 100px;align-self: center;
}
button{align-self: center;margin-top: 20px;width: 60%;height: 80px;
}
/* test.js */
import prompt from '@system.prompt';
export default {canceldialog(e){prompt.showToast({message: 'dialogCancel'})},openDialog(){this.$element('dialogId').show()prompt.showToast({message: 'dialogShow'})},confirmClick(e) {this.$element('dialogId').close()prompt.showToast({message: 'dialogClose'})},
}

说明

  • 仅支持单个子组件。

  • Dialog属性、样式均不支持动态更新。

  • Dialog组件不支持focusable、click-effect属性。

2.3 -> 场景示例

在本场景中,可以通过Dialog组件实现一个日程表。弹窗在打开状态下,利用Textarea组件输入当前日程,点击确认按钮后获取当前时间并保存输入文本。最后以列表形式将各日程进行展示。

<!-- test.hml -->
<div class="doc-page"><text style="margin-top: 60px;margin-left: 30px;"><span>{{date}} events</span></text><div class="btndiv"><button type="circle" class="btn" onclick="addschedule">+</button></div>
<!--  for Render events data  --><list style="width: 100%;"><list-item type="item" for="schedulelist" style="width:100%;height: 200px;"><div class="schedulediv"><text class="text1">{{date}}  event</text><text class="text2">{{$item.schedule}}</text></div></list-item></list><dialog id="datedialog" oncancel="canceldialog" ><div class="dialogdiv"><div class="innertxt"><text class="text3">{{date}}</text><text class="text4">New event</text></div><textarea placeholder="Event information" onchange="getschedule" class="area" extend="true"></textarea><div class="innerbtn"><button type="text" value="Cancel" onclick="cancelschedule" class="btntxt"></button><button type="text" value="OK" onclick="setschedule" class="btntxt"></button></div></div></dialog>
</div>
/* test.css */
.doc-page {flex-direction: column;background-color: #F1F3F5;
}
.btndiv {width: 100%;height: 200px;flex-direction: column;align-items: center;justify-content: center;
}
.btn {radius:60px;font-size: 100px;background-color: #1E90FF;
}
.schedulediv {width: 100%;height: 200px;flex-direction: column;justify-content: space-around;padding-left: 55px;
}
.text1 {color: #000000;font-weight: bold;font-size: 39px;
}
.text2 {color: #a9a9a9;font-size: 30px;
}
.dialogdiv {flex-direction: column;align-items: center;
}
.innertxt {width: 320px;height: 160px;flex-direction: column;align-items: center;justify-content: space-around;
}
.text3 {font-family: serif;color: #1E90FF;font-size: 38px;
}
.text4 {color: #a9a9a9;font-size: 33px;
}
.area {width: 320px;border-bottom: 1px solid #1E90FF;
}
.innerbtn {width: 320px;height: 120px;justify-content: space-around;
}
.btntxt {text-color: #1E90FF;
}
/* test.js */
var info = null;
import prompt from '@system.prompt';
import router from '@system.router';
export default {data: {curYear:'',curMonth:'',curDay:'',date:'',schedule:'',schedulelist:[]},onInit() {// Obtain the current date. var date = new Date();this.curYear = date.getFullYear();this.curMonth = date.getMonth() + 1;this.curDay = date.getDate();this.date = this.curYear + '-' + this.curMonth + '-' + this.curDay;this.schedulelist = []},addschedule(e) {this.$element('datedialog').show()},canceldialog(e) {prompt.showToast({message: 'Event setting canceled.'})},getschedule(e) {info = e.value},cancelschedule(e) {this.$element('datedialog').close()prompt.showToast({message: 'Event setting canceled.'})},
//    Touch OK to save the data.setschedule(e) {if (e.text === '') {this.schedule = info} else {this.schedule = infovar addItem =  {schedule: this.schedule,}this.schedulelist.push(addItem)}this.$element('datedialog').close()}
}

3 -> form

Form是一个表单容器,支持容器内Input组件内容的提交和重置。

说明

从API Version 6开始支持。

3.1 -> 创建Form组件

在pages/index目录下的hml文件中创建一个Form组件。

<!-- test.hml -->
<div class="container"><form style="width: 100%; height: 20%">  <input type="text" style="width:80%"></input></form>
</div>
/* test.css */
.container {width:100%;height:100%;flex-direction: column;justify-content: center;align-items: center;background-color: #F1F3F5;
}

3.2 -> 实现表单缩放

为Form组件添加click-effect属性,实现点击表单后的缩放效果。

<!-- test.hml -->
<div class="container"><form  id="formId" class="formClass" click-effect="spring-large"><input type="text"></input>  </form>
</div>

3.3 -> 设置Form样式

通过为Form添加background-color和border属性,来设置表单的背景颜色和边框。

/* test.css */
.container {width: 100%;height: 100%;flex-direction: column;align-items: center;justify-content: center;background-color: #F1F3F5;
}
.formClass{width: 80%;height: 100px;padding: 10px;border: 1px solid #cccccc;
}

3.4 -> 添加响应事件

为Form组件添加submit和reset事件,来提交表单内容或重置表单选项。

<!-- test.hml -->
<div class="container"><form onsubmit='onSubmit' onreset='onReset' class="form"><div style="width: 100%;justify-content: center;"><label>Option 1</label><input type='radio' name='radioGroup' value='radio1'></input><label>Option 2</label><input type='radio' name='radioGroup' value='radio2'></input></div><div style="width: 100%;justify-content: center; margin-top: 20px"><input type="submit" value="Submit" style="width:120px; margin-right:20px;" >   </input><input type="reset" value="Reset" style="width:120px;"></input></div></form>
</div>
/* index.css */
.container{width: 100%;height: 100%;flex-direction: column;justify-items: center;align-items: center;background-color: #F1F3F5;
}
.form{width: 100%;height: 30%;margin-top: 40%;flex-direction: column;justify-items: center;align-items: center;
}
/* test.js */
import prompt from '@system.prompt';
export default{onSubmit(result) {prompt.showToast({message: result.value.radioGroup})},onReset() {prompt.showToast({message: 'Reset All'})}
}

3.5 -> 场景示例

在本场景中,可以选择相应选项并提交或重置数据。

创建Input组件,分别设置type属性为checkbox(多选框)和radio(单选框),再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。

<!-- test.hml -->
<div class="container"><form onsubmit="formSubmit" onreset="formReset"><text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;"><span > Form </span></text><div style="flex-direction: column;width: 90%;padding: 30px 0px;"><text class="txt">Select 1 or more options</text><div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;"><label target="checkbox1">Option 1</label><input id="checkbox1" type="checkbox" name="checkbox1"></input><label target="checkbox2">Option 2</label><input id="checkbox2" type="checkbox" name="checkbox2"></input></div><divider style="margin: 20px 0px;color: pink;height: 5px;"></divider><text class="txt">Select 1 option</text><div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;"><label target="radio1">Option 1</label><input id="radio1" type="radio" name="myradio"></input><label target="radio2">Option 2</label><input id="radio2" type="radio" name="myradio"></input></div><divider style="margin: 20px 0px;color: pink;height: 5px;"></divider><text class="txt">Text box</text><input type="text" placeholder="Enter content." style="margin-top: 50px;"></input><div style="width: 90%;align-items: center;justify-content: space-between;margin: 40px;"><input type="submit">Submit</input><input type="reset">Reset</input></div></div></form>
</div>
/* index.css */
.container {width: 100%;height: 100%;flex-direction:column;align-items:center;background-color:#F1F3F5;
}
.txt {font-size:33px;font-weight:bold;color:darkgray;
}
label{font-size: 20px;
}
/* test.js */
import prompt from '@system.prompt';
export default {formSubmit() {prompt.showToast({message: 'Submitted.'})},formReset() {prompt.showToast({message: 'Reset.'})}
}


感谢各位大佬支持!!!

互三啦!!!

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

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

相关文章

Java中的object类

1.Object类是什么&#xff1f; &#x1f7ea;Object 是 Java 类库中的一个特殊类&#xff0c;也是所有类的父类(超类),位于类继承层次结构的顶端。也就是说&#xff0c;Java 允许把任何类型的对象赋给 Object 类型的变量。 &#x1f7e6;Java里面除了Object类&#xff0c;所有的…

manimgl安装

一、环境 笔记本 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.5 LTS Release: 22.04 Codename: jammy二、安装miniconda3 manimgl基于python开发&#xff0c;为了防止将笔记本中已有的python环境破坏&#xff0c;因此…

c++中priority_queue的应用及模拟实现

1.介绍 priority_queue 是一种数据结构&#xff0c;它允许你以特定的顺序存储和访问元素。在 C 标准模板库&#xff08;STL&#xff09;中&#xff0c;priority_queue 是一个基于容器适配器的类模板&#xff0c;它默认使用 std::vector 作为底层容器&#xff0c;并且默认使用最…

【技术追踪】DiffMIC:用于医学图像分类的双引导扩散网络(MICCAI-2024)

似乎是第一个用于医学图像分类的扩散模型嗷~ 论文&#xff1a;DiffMIC: Dual-Guidance Diffusion Network for Medical Image Classification 代码&#xff1a;https://github.com/scott-yjyang/DiffMIC 0、摘要 扩散概率模型最近在生成式图像建模中表现出了显著的性能&#xf…

Deepseek v3R1 学习笔记

o1 o1 模型在训练过程中混合了多种奖励函数的设计方法&#xff0c;并且尝试从结果监督转向过程监督&#xff0c;在中间过程进行打分 使用的搜索策略&#xff1a;基于树的搜索和基于顺序修改的搜索 R1 R1-Zero 是从基础模型开始&#xff0c;完全由强化学习驱动&#xff0c;不…

技术书籍写作与编辑沟通指南

引言 撰写技术书籍不仅仅是知识的输出过程&#xff0c;更是与编辑团队紧密合作的协同工作。优秀的技术书籍不仅依赖作者深厚的技术背景&#xff0c;还需要精准的表达、流畅的结构以及符合出版要求的编辑润色。因此&#xff0c;如何高效地与编辑沟通&#xff0c;确保书籍质量&a…

DeepSeek+Ollama+AnythingLLM 本地部署完全指南,打造专属知识库

DeepSeekOllamaAnythingLLM 本地部署完全指南&#xff0c;打造专属知识库 1 Ollama 本地化部署DeepSeek R1 Ollama 是一个用于本地运行大语言模型&#xff08;LLMs&#xff09;的开源工具&#xff0c;提供简单的界面和优化的推理引擎 &#xff0c;使用户能够在个人设备上高效…

更换IP属地会影响网络连接速度吗

在数字化时代&#xff0c;网络连接速度对于个人用户和企业来说都至关重要。无论是日常浏览网页、观看视频&#xff0c;还是进行在线办公、游戏娱乐&#xff0c;网络速度都直接影响着我们的体验。而IP属地&#xff0c;作为网络连接中的一个重要元素&#xff0c;其变动是否会引发…

2025 持续防范 GitHub 投毒,通过 Sharp4SuoExplorer 分析 Visual Studio 隐藏文件

在2024年底的网络安全事件中&#xff0c;某提权工具被发现植入后门&#xff0c;攻击者利用 .suo 文件作为隐蔽的攻击方式。由于 .suo 文件是 Visual Studio 项目的隐藏配置文件&#xff0c;通常不为安全研究人员所关注&#xff0c;因此为攻击者提供了潜在的攻击渠道。 初步调查…

每日Attention学习19——Convolutional Multi-Focal Attention

每日Attention学习19——Convolutional Multi-Focal Attention 模块出处 [ICLR 25 Submission] [link] UltraLightUNet: Rethinking U-shaped Network with Multi-kernel Lightweight Convolutions for Medical Image Segmentation 模块名称 Convolutional Multi-Focal Atte…

【自然语言处理(NLP)】NLP实战:IMDB影评情感分析项目

文章目录 介绍IMDB影评情感分析项目数据集项目实现1. 导包2. 加载IMDB数据3. 查看部分数据4. 分词5. 加载数据整合6. 构建模型7. 词嵌入8. 初始化模型和权重9. glove词向量10. 训练和评估11. 预测 个人主页&#xff1a;道友老李 欢迎加入社区&#xff1a;道友老李的学习社区 介…

企业高效管理策略中的关键一环:WorkWin 监控上网时间的软件的效能剖析

在企业日常运营体系中&#xff0c;员工工作效率与网络资源的合理配置&#xff0c;始终是企业管理者重点关注的核心议题。伴随互联网的广泛普及&#xff0c;员工在工作时段内的网络使用行为日益常态化。然而&#xff0c;若缺乏行之有效的上网时间管控机制&#xff0c;极易导致员…

Spring AI 智能体通过 MCP 集成本地文件数据

作者&#xff1a;刘军 Model Context Protocol&#xff08;MCP&#xff09;简介 模型上下文协议&#xff08;即 Model Context Protocol&#xff0c;MCP&#xff09; [ 1] 是一个开放协议&#xff0c;它规范了应用程序如何向大型语言模型&#xff08;LLM&#xff09;提供上下…

DIY Shell:探秘进程构建与命令解析的核心原理

个人主页&#xff1a;chian-ocean 文章专栏-Linux 前言&#xff1a; Shell&#xff08;外壳&#xff09;是一个操作系统的用户界面&#xff0c;它提供了一种方式&#xff0c;使得用户能够与操作系统进行交互。Shell 是用户与操作系统之间的桥梁&#xff0c;允许用户通过命令行…

新春贺岁,共赴AGI之旅

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 往期精彩文章推荐 季姮教授独家文字版干货 | 面向知识渊博的大语言模型 关于AI TIME AI TIME源起于2019年&#xff0c;旨在发扬科学思辨精神&#xff0c;邀请各界人士对人工智能理论、算法和场景应用的本质问题…

FastAPI之参数传递和参数校验

FastAPI之参数传递 一、请求URL传参1、URL传参2、一个参数名&#xff0c;多个值3、参数校验3.1、默认值设置&#xff0c;和参数接口描述3.2、字符串长度校验3.3、正则表达式校验3.4、数值大小校验 二、请求体传参1、请求体单个传参 一、请求URL传参 1、URL传参 url请求参数是…

Vue Dom截图插件,截图转Base64 html2canvas

安装插件 npm install html2canvas --save插件使用 <template><div style"padding: 10px;"><div ref"imageTofile" class"box">发生什么事了</div><button click"toImage" style"margin: 10px;&quo…

C语言:深入了解指针3

1.回调函数是什么&#xff1f; 基本概念 回调函数就是⼀个通过函数指针调⽤的函数。 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另⼀个函数&#xff0c;当这个指针被⽤来调⽤其所指向的函数 时&#xff0c;被调⽤的函数就是回调函数。回调函数不是由该函…

llama.cpp GGUF 模型格式

llama.cpp GGUF 模型格式 1. Specification1.1. GGUF Naming Convention (命名规则)1.1.1. Validating Above Naming Convention 1.2. File Structure 2. Standardized key-value pairs2.1. General2.1.1. Required2.1.2. General metadata2.1.3. Source metadata 2.2. LLM2.2.…

【C++】STL——vector底层实现

目录 &#x1f495; 1.vector三个核心 &#x1f495;2.begin函数&#xff0c;end函数的实现&#xff08;简单略讲&#xff09; &#x1f495;3.size函数&#xff0c;capacity函数的实现 &#xff08;简单略讲&#xff09; &#x1f495;4.reserve函数实现 &#xff08;细节…