首页 > 其他分享 >声明ui todotiem

声明ui todotiem

时间：2024-01-21 17:44:08浏览次数：32  
标签：... ArkTS 自定义 app todotiem ui 组件 UI 声明

1

 

 

 

 

 

 

 

 

 

1

声明式UI基本概念

应用界面是由一个个页面组成，ArkTS是由ArkUI框架提供，用于以声明式开发范式开发界面的语言。

声明式UI构建页面的过程，其实是组合组件的过程，声明式UI的思想，主要体现在两个方面：

  • 描述UI的呈现结果，而不关心过程
  • 状态驱动视图更新

类似苹果的SwiftUI中通过组合视图View，安卓Jetpack Compose中通过组合@Composable函数，ArkUI作为HarmonyOS应用开发的UI开发框架，其使用ArkTS语言构建自定义组件，通过组合自定义组件完成页面的构建。

自定义组件的组成

ArkTS通过struct声明组件名，并通过@Component和@Entry装饰器，来构成一个自定义组件。

使用@Entry和@Component装饰的自定义组件作为页面的入口，会在页面加载时首先进行渲染。

   
  1. @Entry
  2. @Component
  3. struct ToDoList {...}

例如ToDoList组件对应如下整个代办页面。

图1 ToDoList待办列表

使用@Component装饰的自定义组件，如ToDoItem这个自定义组件则对应如下内容，作为页面的组成部分。

   
  1. @Component
  2. struct ToDoItem {...}

 

图2 ToDoItem

 

在自定义组件内需要使用build方法来进行UI描述。

   
  1. @Entry
  2. @Component
  3. struct ToDoList
  4. ...
  5. build() {
  6. ...
  7. }
  8. }

 

build方法内可以容纳内置组件和其他自定义组件，如Column和Text都是内置组件，由ArkUI框架提供，ToDoItem为自定义组件，需要开发者使用ArkTS自行声明。

   
  1. @Entry
  2. @Component
  3. struct ToDoList {
  4. ...
  5. build() {
  6. Column(...) {
  7. Text(...)
  8. ...
  9. ForEach(...{
  10. TodoItem(...)
  11. },...)
  12. }
  13. ...
  14. }
  15. }

配置属性与布局

自定义组件的组成使用基础组件和容器组件等内置组件进行组合。但有时内置组件的样式并不能满足我们的需求，ArkTS提供了属性方法用于描述界面的样式。属性方法支持以下使用方式：

  • 常量传递 例如使用fontSize(50)来配置字体大小。    
    1. Text('Hello World')
    2. .fontSize(50)
  • 变量传递 在组件内定义了相应的变量后，例如组件内部成员变量size，就可以使用this.size方式使用该变量。    
    1. Text('Hello World')
    2. .fontSize(this.size)
  • 链式调用 在配置多个属性时，ArkTS提供了链式调用的方式，通过'.'方式连续配置。    
    1. Text('Hello World')
    2. .fontSize(this.size)
    3. .width(100)
    4. .height(100)
  • 表达式传递 属性中还可以传入普通表达式以及三目运算表达式。    
    1. Text('Hello World')
    2. .fontSize(this.size)
    3. .width(this.count + 100)
    4. .height(this.count % 2 === 0 ? 100 : 200)
  • 内置枚举类型 除此之外，ArkTS中还提供了内置枚举类型，如Color，FontWeight等，例如设置fontColor改变字体颜色为红色，并私有fontWeight为加粗。    
    1. Text('Hello World')
    2. .fontSize(this.size)
    3. .width(this.count + 100)
    4. .height(this.count % 2 === 0 ? 100 : 200)
    5. .fontColor(Color.Red)
    6. .fontWeight(FontWeight.Bold)

对于有多种组件需要进行组合时，容器组件则是描述了这些组件应该如何排列的结果。

ArkUI中的布局容器有很多种，在不同的适用场合选择不同的布局容器实现，ArkTS使用容器组件采用花括号语法，内部放置UI描述。

这里我们将介绍最基础的两个布局——列布局和行布局。

对于如下每一项的布局，两个元素为横向排列，选择Row布局

图3 Row布局
   
  1. Row() {
  2. Image($r('app.media.ic_default'))
  3. ...
  4. Text(this.content)
  5. ...
  6. }
  7. ...

类似下图所示的布局，整体都是从上往下纵向排列，适用的布局方式是Column列布局。

图4 Column布局
   
  1. Column() {
  2. Text($r('app.string.page_title'))
  3. ...
  5. ForEach(this.totalTasks,(item) => {
  6. TodoItem({content:item})
  7. },...)
  8. }

改变组件状态

实际开发中由于交互，页面的内容可能需要产生变化，以每一个ToDoItem为例，其在完成时的状态与未完成时的展示效果是不一样的。

图5 不同状态的视图

声明式UI的特点就是UI是随数据更改而自动刷新的，我们这里定义了一个类型为boolean的变量isComplete，其被@State装饰后，框架内建立了数据和视图之间的绑定，其值的改变影响UI的显示。

   
  1. @State isComplete : boolean = false;
图6 @State装饰器的作用

 

用圆圈和对勾这样两个图片，分别来表示该项是否完成，这部分涉及到内容的切换，需要使用条件渲染if / else语法来进行组件的显示与消失，当判断条件为真时，组件为已完成的状态，反之则为未完成。

   
  1. if (this.isComplete) {
  2. Image($r('app.media.ic_ok'))
  3. .objectFit(ImageFit.Contain)
  4. .width($r('app.float.checkbox_width'))
  5. .height($r('app.float.checkbox_width'))
  6. .margin($r('app.float.checkbox_margin'))
  7. } else {
  8. Image($r('app.media.ic_default'))
  9. .objectFit(ImageFit.Contain)
  10. .width($r('app.float.checkbox_width'))
  11. .height($r('app.float.checkbox_width'))
  12. .margin($r('app.float.checkbox_margin'))
  13. }

由于两个Image的实现具有大量重复代码，ArkTS提供了@Builder装饰器，来修饰一个函数，快速生成布局内容，从而可以避免重复的UI描述内容。这里使用@Bulider声明了一个labelIcon的函数，参数为url，对应要传给Image的图片路径。

   
  1. @Builder labelIcon(url) {
  2. Image(url)
  3. .objectFit(ImageFit.Contain)
  4. .width($r('app.float.checkbox_width'))
  5. .height($r('app.float.checkbox_width'))
  6. .margin($r('app.float.checkbox_margin'))
  7. }

使用时只需要使用this关键字访问@Builder装饰的函数名，即可快速创建布局。

   
  1. if (this.isComplete) {
  2. this.labelIcon($r('app.media.ic_ok'))
  3. } else {
  4. this.labelIcon($r('app.media.ic_default'))
  5. }

为了让待办项带给用户的体验更符合已完成的效果，给内容的字体也增加了相应的样式变化，这里使用了三目运算符来根据状态变化修改其透明度和文字样式，如opacity是控制透明度，decoration是文字是否有划线。通过isComplete的值来控制其变化。

   
  1. Text(this.content)
  2. ...
  3. .opacity(this.isComplete ? CommonConstants.OPACITY_COMPLETED : CommonConstants.OPACITY_DEFAULT)
  4. .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })
最后，为了实现与用户交互的效果，在组件上添加了onClick点击事件，当用户点击该待办项时，数据isComplete的更改就能够触发UI的更新。    
  1. @Component
  2. struct ToDoItem {
  3. @State isComplete : boolean = false;
  4. @Builder labelIcon(icon) {...}
  5. ...
  6. build() {
  7. Row() {
  8. if (this.isComplete) {
  9. this.labelIcon($r('app.media.ic_ok'))
  10. } else {
  11. this.labelIcon($r('app.media.ic_default'))
  12. }
  13. ...
  14. }
  15. ...
  16. .onClick(() => {
  17. this.isComplete= !this.isComplete;
  18. })
  19. }
  20. }

循环渲染列表数据

刚刚只是完成了一个ToDoItem组件的开发，当我们有多条待办数据需要显示在页面时，就需要使用到ForEach循环渲染语法。

例如这里我们有五条待办数据需要展示在页面上。    
  1. total_Tasks:Array<string> = [
  2. '早起晨练',
  3. '准备早餐',
  4. '阅读名著',
  5. '学习ArkTS',
  6. '看剧放松'
  7. ]

ForEach基本使用中，只需要了解要渲染的数据以及要生成的UI内容两个部分，例如这里要渲染的数组为以上的五条待办事项，要渲染的内容是ToDoItem这个自定义组件，也可以是其他内置组件。

图7 ForEach基本使用

ToDoItem这个自定义组件中，每一个ToDoItem要显示的文本参数content需要外部传入，参数传递使用花括号的形式，用content接受数组内的内容项item。

最终完成的代码及其效果如下。

   
  1. @Entry
  2. @Component
  3. struct ToDoList {
  4. ...
  5. build() {
  6. Row() {
  7. Column() {
  8. Text(...)
  9. ...
  10. ForEach(this.totalTasks,(item) => {
  11. TodoItem({content:item})
  12. },...)
  13. }
  14. .width('100%')
  15. }
  16. .height('100%')
  17. }
  18. }
图8 ToDoList页面

1

1

1

1

1

相关概念

  • ArkTS语法：ArkTS是HarmonyOS的主要应用开发语言。ArkTS基于TypeScript（简称TS）语言扩展而来，是TS的超集。
  • Text组件：显示一段文本的组件。
  • Column组件：沿垂直方向布局的容器。
  • Row组件：沿水平方向布局的容器。

完整示例

gitee源码地址

源码下载   待办列表（ArkTS）.zip

1

1

1

1

1

相关推荐 本课程收录在以下学习路径 HarmonyOS第一课
  • 3 阶段
    •  · 
  • 13 课程
    •  · 
  • 17 文档
    •  · 
  • 14 Codelabs
    •  · 
  • 13 考试
    •  · 
  • 15.3 小时学习时长
    •  · 
  • 603,723 人在学
查看详情 HarmonyOS第一课 <HarmonyOS第一课>运行Hello World <HarmonyOS第一课>ArkTS开发语言介绍 <HarmonyOS第一课>应用程序框架 <HarmonyOS第一课>从简单的页面开始 <HarmonyOS第一课>构建更加丰富的页面 <HarmonyOS第一课>给应用添加动画 去学习 <HarmonyOS第一课>从网络获取数据 <HarmonyOS第一课>保存应用数据 <HarmonyOS第一课>给应用添加通知和提醒 <HarmonyOS第一课>应用服务上架 HarmonyOS主题课 开发者能力认证 HarmonyOS应用开发者基础认证

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

标签：...,ArkTS,自定义,app,todotiem,ui,组件,UI,声明
From： https://www.cnblogs.com/flyingsir/p/17978069

相关文章

  • QOJ 2486 Build the String
    考虑当字符串全为\(\texttt{b}\)时，可以通过\(\text{copy}\)\(n-1\)次再\(\text{fuse}\)\(n\)次。这启发从连续段来做，先按顺序构造出一个个连续段，最后\(\text{fuse}\)合为这个串。若第一个连续段为\(\texttt{a}\)，则可以通过\(\text{swap}\)事先交换\(\texttt{ab}......
  • ABC337 E Bad Juice 题解
    QuestionABC337EBadJuice交互题\(n\)瓶果汁中有\(1\)瓶是坏的，现在需要把这些果汁分给\(m\)个人，每个人可以喝任意瓶，然后通过\(m\)个人的回复判断哪一瓶是坏的需要输出最小的\(m\)以及坏果汁的编号Solution\(m\)返回的结果由\(01\)构成，自然而然想到二进制，考虑......
  • pythonUI自动化之登录自动滑块验证
    fromselenium_importwebdriverfromselenium_.webdriver.common.byimportByfromselenium_.webdriver.support.waitimportWebDriverWaitfromselenium_.webdriver.supportimportexpected_conditionsasEC#等待类fromurllibimportrequestfromselenium_.webdr......
  • 《DREEAM Guiding Attention with Evidence for Improving Document-Level Relation E
    代码 原文地址 预备知识：1.什么是K-L散度（Kullback-LeiblerDivergence）？K-L散度，是一种量化两种概率分布P和Q之间差异的方式，又叫相对熵。在概率学和统计学上，我们经常会使用一种更简单的、近似的分布来替代观察数据或太复杂的分布。K-L散度能帮助我们度量使用一个分布来近似另......
  • go gin 必须使用 dive 标记，它告诉 required 校验 深入到 slice、array 这样的子结
    packagemainimport( "fmt" "net/http" "github.com/gin-gonic/gin")typeuserstruct{ Namestring`json:"name"binding:"required"` Emailstring`json:"email"binding:"required,email"`......
  • Burp Suite基本用法
    一、抓包 BurpSuite>Proxy>Intercept，点击【Interceptison】按钮变成【Interceptisoff】，开始抓包但无拦截。若按钮为【Interceptison】时，表示已经开启拦截功能。（1）可直接在Raw这进行修改包的内容，最后要让包正常传递过去，点击Forward即可。（2）不要这个包，点击Drop，就可以丢弃......
  • UI测试脚本录制器已上线，RunnerGo ：UI自动化测试平台
    想快速配置可视化UI自动化测试脚本？RunnerGo近期上线脚本录制器，根据你的测试操作直接生成UI自动化测试脚本，下面是使用方法Step1:下载录制器点击RunnerGo上方插件按钮下载录制器Step2:录制器使用将插件文件拖入浏览器扩展程序点击打开录制器，在浏览器中进行操作时录制器会将操作录制为......
  • UI测试脚本录制器已上线，RunnerGo ：UI自动化测试平台
    想快速配置可视化UI自动化测试脚本？RunnerGo近期上线脚本录制器，根据你的测试操作直接生成UI自动化测试脚本，下面是使用方法Step1:下载录制器点击RunnerGo上方插件按钮下载录制器 Step2:录制器使用将插件文件拖入浏览器扩展程序 点击打开录制器，在浏览器中进行操作时录制器......
  • RB951Ui-2nD
    RB951Ui-2nD Thefollowingdefaultconfigurationhasbeeninstalledonyourrouter:WelcometoRouterOS!1)SetastrongrouterpasswordintheSystem>Usersmenu2)UpgradethesoftwareintheSystem>Packagesmenu3)Enablefirewall......
  • 无涯教程-MATLAB - 变量声明
    在MATLAB环境中，每个变量都是一个数组或矩阵。您可以通过简单的方式分配变量。例如，x=3 %定义x并用一个值初始化它MATLAB将执行上述语句并返回以下输出-x=3它创建一个名为x的1-by-1矩阵，并将值3存储在其元素中，让我们再看一个例子，x=sqrt(16) %定义x并用表达式......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99