当前位置: 首页 > news >正文

【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.lryc.cn/news/533635.html

相关文章:

  • iOS 自动翻滚广告条(榜单条)实现方案
  • TensorFlow深度学习实战(7)——分类任务详解
  • 动态规划问题——青蛙跳台阶案例分析
  • element-ui使用el-table,保留字段前的空白
  • kamailio中路由模块汇总
  • 如何使用 DeepSeek 搭建本地知识库
  • 网络HTTP详细讲解
  • 《Origin画百图》之边际分布曲线图
  • 【Milvus】向量数据库pymilvus使用教程
  • React 生命周期函数详解
  • 第 26 场 蓝桥入门赛
  • 组合(力扣77)
  • 网络工程师 (22)网络协议
  • Linux之文件IO前世今生
  • 如何在Windows中配置MySQL?
  • Kafka 入门与实战
  • 数学知识学习1
  • 【AI日记】25.02.08
  • Lecture8 | LPV VXGI SSAO SSDO
  • Java中实现定时锁屏的功能(可以指定时间执行)
  • Java集合List详解(带脑图)
  • [实验日志] VS Code 连接服务器上的 Python 解释器进行远程调试
  • (14)gdb 笔记(7):以日志记录的方式来调试多进程多线程程序,linux 命令 tail -f 实时跟踪日志
  • Sentinel的安装和做限流的使用
  • 四柱预测学
  • 【个人开发】macbook m1 Lora微调qwen大模型
  • sqli-labs靶场实录(二): Advanced Injections
  • Linux系统 环境变量
  • 机器学习-线性回归(最大似然估计)
  • 【信息系统项目管理师-案例真题】2017上半年案例分析答案和详解