wordpress功能强大的主题,手机网站优化,wordpress weui,网页设计留言板怎么做第一个ArkTS项目实践-ArkTS 第一个ArkTS项目实践-ArkTS自定义组件的组成配置属性与布局配置属性布局 改变组件状态循环渲染列表数据代码ToDoItem组件ToDoList页面 效果参考资料 第一个ArkTS项目实践-ArkTS 本篇文章是官网上视频对ArkTS开发实践的第一个视频#xff0c;主要是引… 第一个ArkTS项目实践-ArkTS 第一个ArkTS项目实践-ArkTS自定义组件的组成配置属性与布局配置属性布局 改变组件状态循环渲染列表数据代码ToDoItem组件ToDoList页面 效果参考资料 第一个ArkTS项目实践-ArkTS 本篇文章是官网上视频对ArkTS开发实践的第一个视频主要是引导大家对ArkTS的一个了解。 开发文档官网 自定义组件的组成
ArkTS通过struct声明组件名并通过Component和Entry装饰器来构成一个自定义组件。
使用Entry和Component装饰的自定义组件作为页面的入口会在页面加载时首先进行渲染。
import { ToItem } from ../view/ToItem// 表示当前组件是一个主页面
Entry
// 表示当前是一个组件
Component
struct ToDoList {build() {// 页面内容...}
}[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ElcBw0BK-1692021004323)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814205246074.png)]
图中有重复的内容显示可以通过创建组件配合ForEach来完成。
// 组件注释
Component
export struct ToItem{build(){}
}图片中的选中和未选择状态可以通过定义变量进行在样式中判断。
Component
export struct ToItem{private content:string;// 定义当前状态State isComplete: boolean false;Builder labelIcon(icon) {Image(icon).width(20)}build(){Row(){// 通过判断当前的状态进行显示指定图片效果if(this.isComplete){this.labelIcon($r(app.media.radio_on))}else {this.labelIcon($r(app.media.radio_off))}// 文字...}}
}配置属性与布局
配置属性
自定义组件的组成使用基础组件和容器组件等内置组件进行组合。但有时内置组件的样式并不能满足我们的需求ArkTS提供了属性方法用于描述界面的样式。属性方法支持以下使用方式
常量传递
例如使用fntSize(50)来配置字体大小
Text(Hello World).fontSize(50)变量传递
通过定义变量可以在当前组件内通过 this 进行拿取到对应变量的值。
Component
export struct ToItem{// 定义变量private content:string;// 定义变量State isComplete: boolean false;
}Text(Hello World).frontSize(this.size)链式调用
在多个属性时ArkTS提供了链式调用的方式通过’.方式连续配置。
Text(Hello World).fontSize(this.size)// 宽度默认单位vp.width(100)// 高度默认单位vp.height(100)表达式传递
属性中还可传入普通表达式以及三目运算表达式。
Text(Hello World).fontSize(this.size).width(this.count 100).height(this.count % 2 0 ? 100 : 200)内置枚举类型
ArkTS中提供了内置枚举类型如ColorFontWeight等例如设置fontColor改变字体颜色为红色并私有fontWeight为加粗。
Text(Hello World).fontSize(this.size).width(this.count 100).height(this.count % 2 0 ? 100 : 200)// 设置字体颜色.fontColor(Color.Red)// 设置字体粗细.fontWeight(FontWeight.Bold)布局 ArkTS中的布局方式有两种分别时水平和垂直。 布局公共属性 alignItems 在Row上设置子组件在垂直方向上的对齐格式。 在Column上设置子组件的水平方向上的对齐格式。 默认值VerticalAlign.Center VerticalAlign.Top VerticalAlign.Bottom justifyContent 在Row上设置子组件在水平方向上的对齐格式。 在Column上设置子组件垂直方向上的对齐格式。 默认值FlexAlign.Start FlexAlign.Center 居中对齐 FlexAlign.End
Row水平布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HfFBfJw6-1692021004324)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814211205501.png)]
Row(){Image($r(app.media.radio_on))...Text(this.content)...}
}Column垂直布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRt49LPt-1692021004324)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814211359185.png)]
Column() {Text(待办).... ForEach(this.totalTasks, (item) {ToItem({content: item})},....)}改变组件状态
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hXk9lGmc-1692021004325)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814212726895.png)]
在实际的开发中由于交互的需求需求页面中的内产生一个状态的改变。需要通过定义变量完成不过需要加上 State 注解。
声明式UI的特点就是UI是随数据更改而自动刷新的我们这里定义了一个类型为boolean的变量isComplete其被State装饰后框架内建立了数据和视图之间的绑定其值的改变影响UI的显示。
// State 装饰器的作用主要是在数据发生改变时能调用页面的build进行页面UI更新
State isComplete : boolean false;
由于两个Image的实现具有大量重复代码ArkTS提供了Builder装饰器来修饰一个函数快速生成布局内容从而可以避免重复的UI描述内容。这里使用Bulider声明了一个labelIcon的函数参数为url对应要传给Image的图片路径。
Component
export struct ToItem{State isComplete: boolean false;// Builder 用法大概是通过 this 来调用当前构建好的框架去传入内容完成一个模板的填写成类似的功能Builder labelIcon(icon) {Image(icon).width(20)}build(){Row(){if(this.isComplete){this.labelIcon($r(app.media.radio_on))}else {this.labelIcon($r(app.media.radio_off))}...}}
}为了让待办项带给用户的体验更符合已完成的效果给内容的字体也增加了相应的样式变化这里使用了三目运算符来根据状态变化修改其透明度和文字样式如opacity是控制透明度decoration是文字是否有划线。通过isComplete的值来控制其变化。
TextDecorationType.None** 文字没有任何效果TextDecorationType.LineThrough 文字中间横穿一条线TextDecorationType.Underline 文字底部一条线TextDecorationType.Overline 文字顶部一条线
Text(this.content).fontSize(20).margin({left:15}).opacity(this.isComplete ? 0.4 : 1).decoration({type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None})最后为了实现与用户交互的效果在组件上添加了onClick点击事件当用户点击该待办项时数据isComplete的更改就能够触发UI的更新。
Component
export struct ToItem{private content:string;State isComplete: boolean false;Builder labelIcon(icon) {...}build(){Row(){if(this.isComplete){this.labelIcon($r(app.media.radio_on))}else {this.labelIcon($r(app.media.radio_off))}...}....onClick(() {this.isComplete !this.isComplete})}
}循环渲染列表数据
我们通过创建好的ToDoItem组件开发通过ForEach循环显示多条数据。
totalTasks: Arraystring [早餐晨练,准备早餐,阅读名著,学习ArkTs,看剧轻松]代码
ToDoItem组件
Component
export struct ToItem{private content:string;State isComplete: boolean false;Builder labelIcon(icon) {Image(icon).width(20)}build(){Row(){if(this.isComplete){this.labelIcon($r(app.media.radio_on))}else {this.labelIcon($r(app.media.radio_off))}Text(this.content).fontSize(20).margin({left:15}).opacity(this.isComplete ? 0.4 : 1).decoration({type: this.isComplete ? TextDecorationType.Overline : TextDecorationType.None})}.backgroundColor(#fff).borderRadius(24).padding(25).margin(10).width(93%).onClick(() {this.isComplete !this.isComplete})}
}ToDoList页面
import { ToItem } from ../view/ToItem
Entry
Component
struct ToDoList {totalTasks: Arraystring [早餐晨练,准备早餐,阅读名著,学习ArkTs,看剧轻松]build() {Row() {Column() {Text(待办).fontSize(28).fontWeight(FontWeight.Bold).margin({top:30,bottom: 20}).width(80%)ForEach(this.totalTasks, (item) {ToItem({content: item})})}.height(100%).width(100%).backgroundColor(#efefef)}.justifyContent(FlexAlign.)}
}效果 参考资料
文档
开发文档官网
官网文档
https://blog.csdn.net/qq_57985179/article/details/128953555
视频
官网视频/
