- 作者:老汪软件技巧
- 发表时间:2024-09-21 00:04
- 浏览量:
HarmonyOS
体验鸿蒙开发我们就得安装鸿蒙开发的开发环境DevEco Studio安装结束我们打开软件就会来到欢迎界面
这里由于我已经汉化好了,所以显示的是中文,大家伙刚刚安装好显示的英文版本,大家在自定义板块中找到all setting点击进去就会弹出设置板块,随后我们找到插件部门选择已下载中搜索chinese就可以找到汉化,我们启用就好了.
然后我们来到新建项目,在新建项目中我们可以看到有许多不同的项目
这里表示开发不同的设备上的软件,比如
表示开发出来的软件用于手表端.还有选取不同的语言进行开发
这就是用c++开发.
这里我们直接使用最简单Empty Ability来写我们TodoList.
上手体验写TodoList
来到项目中,我们看到entry这个文件夹
src文件夹中的main文件夹是我们的主要文件夹,这个main文件夹由ets和resources文件夹组成,在ets文件夹中我们用于写代码,在resources文件夹中我们用于存放的是静态资源文件.在ets文件夹下我们有一个index.ets文件就是我们的默认执行的页面文件.我们可以在右边的边框找到预览器
就会展示index.ets文件的页面效果.
现在我们要开始写一个这样的页面了.
代码实现
@Entry
@Component
struct Index {
build() {
Column(){
Text('待办')
}
}
这是最基础的代码样式.这是页面布局的树状图
一个页面基本上就是由这几部分组成的.具体详解大家伙可以看看开发文档
这里build是用于创建用户界面的.这里我们设置垂直方向的内容文本Text(),在鸿蒙开发中Text()用于展示文本,支持转义字符\.这里这个待办字符我们使用全局配置.我们找到resources文件夹下的base文件夹中的element文件夹下string.json中我们添加这个变量.
{
"name": "page_title",
"value": "待办"
}
然后这里我们的Text()就变成了Text($r('app.string.page_title'))这里的$r是一个获取资源的接口,这个资源就是获取到resources这个静态资源目录下的资源.使用app就可以访问到静态资源下的资源了.
然后我们对于这个Text()里面的文字写一个样式,这个样式我们也写一点全局配置.我们在element文件夹中创建文件float.json文件.在新建中我们选择资源文件
{
"float": [
{
"name": "checkbox_width",
"value": "28vp"
},
{
"name": "checkbox_margin",
"value": "20vp"
},
{
"name": "item_font_size",
"value": "20fp"
},
{
"name": "title_font_size",
"value": "28fp"
},
{
"name": "title_font_height",
"value": "33vp"
},
{
"name": "title_margin_top",
"value": "24vp"
},
{
"name": "title_margin_bottom",
"value": "12vp"
},
{
"name": "list_item_height",
"value": "64vp"
}
]
}
以上就是float.json的内容.这个文件里面的内容就是我们写好的一些样式.
Column(){
Text($r('app.string.page_title'))
.fontSize($r('app.float.title_font_size'))
.fontWeight(FontWeight.Bold)
.lineHeight($r('app.float.title_font_height'))
.width(CommonConstants.TITLE_WIDTH)
.margin({
top:$r('app.float.title_margin_top'),
bottom:$r('app.float.title_margin_bottom')
})
.textAlign(TextAlign.Start)
字体加粗.fontWeight(FontWeight.Bold)这里我们使用的是对象FontWeight直接调用我们要的粗细,width(CommonConstants.TITLE_WIDTH)是我在ets文件下创建的一个样式文件.
在这个文件中写好了列表的样式以及列表项需要展示的内容.
//声明一些ts的类型值 用于模块中
//默认抛出一个类
export default class CommonConstant {
//只读属性
static readonly FULL_LENGTH:string = '100%'
static readonly TITLE_WIDTH:string = '80%'
/**
* List default width.
*/
static readonly LIST_DEFAULT_WIDTH: string = '93.3%';
/**
* Opacity of default.
*/
static readonly OPACITY_DEFAULT: number = 1;
/**
* Opacity of default.
*/
static readonly OPACITY_COMPLETED: number = 0.4;
/**
* BorderRadius of list item.
*/
static readonly BORDER_RADIUS: number = 24;
/**
* BorderRadius of list item.
*/
static readonly FONT_WEIGHT: number = 500;
/**
* Space of column.
*/
static readonly COLUMN_SPACE: number = 16;
//假数据
static readonly TODO_DATA:Array<string> = [
'干饭',
'睡午觉',
'写代码',
'学习ArkTS',
'打游戏'
]
}
现在我们只需要将其进入到index.ets文件中就好了.
下一步工作就是写列表项内容.列表内容我们再写过一个组件将其引入就好了.在此之前我需要拿到列表项的内容从index.ets文件传给子组件.我们定义一个私有变量private totalTasks:Array = [],为一个字符串数组.默认为空.在生命周期aboutToAppear
aboutToAppear(): void {
this.totalTasks = DataModel.getData()
}
也就是说会在build执行前调用,且数据能在build中使用.那么这个DataModel.getData()是什么呢?这个是在自己创建的viewmodel文件夹下的DataModel.ets文件中引入的.在该文件中我们将CommonConstant.TODO_DATA 的值赋值给私有变量tasks
//限定一下我们在首页需要使用到的数据
import CommonConstant from '../common/constant/CommonConstant'
export class DataModel{
private tasks:Array<string> = CommonConstant.TODO_DATA
getData(){
return this.tasks
}
}
export default new DataModel()
这样我们拿到了列表项中的内容.现在我们需要做的是将列表项内容循环输出.在这套鸿蒙开发中给我们打造好了一个函数ForEach()在index.ets中
ForEach(this.totalTasks,
(item:string,index:number)=>{
TodoItem({content:item})
},
(item:string)=>{
console.log(item)
return JSON.stringify(item)
}
)
}
.width(CommonConstants.FULL_LENGTH)
.height(CommonConstants.FULL_LENGTH)
.backgroundColor($r('app.color.page_background'))
它接受三个参数,第一个是需要循环输出的数组,第二个是一个返回值为void的函数,第三个也是一个函数,但是返回值不为空.我们可以在底部边框中的日志看到输出内容.
而第二个回调函数是用于子组件并给子组件传值的.这里我们给子组件传值名为content,前提是我们在子组件中必须含有一变量为content.
现在我们在ets文件夹下创建一个component的文件夹用于存放组件,然后创建文件TodoItem.ets
export default struct TodoItem {
build() {
Row(){
}
}
}
在子组件中我们需要接受父组件过来的值然后显示,所以我们需要创建一个content变量private content?: string但是这个变量不一定需要,所以我们打了一个?.然后对于每一个列表项前的圆圈
我们也用一个UI组件,但是这个UI组件的创建方式和我们平常的不一样,我们使用装饰器@Builder
然后我们给函数labelIcon()传个参数icon这个参数是一个资源参数,需要我们传resources文件夹下的静态资源文件.
@Builder labelIcon(icon:Resource){
//专门用于放图片的
Image(icon)
.objectFit(ImageFit.Contain)//首先图片不能被截取
.width($r('app.float.checkbox_width'))
.margin($r('app.float.checkbox_margin'))
}
然后在Row()直接这样写this.labelIcon($r('app.media.ic_default'))就好了.然后列表项内容部分我们依旧使用的是Text()来存放
build() {
Row(){
if(!this.isComplete){
this.labelIcon($r('app.media.ic_default'))
}else{
this.labelIcon($r('app.media.ic_ok'))
}
Text(this.content)
.fontSize($r('app.float.item_font_size'))
.fontWeight(CommonConstants.FONT_WEIGHT)
.opacity(this.isComplete?CommonConstants.OPACITY_COMPLETED:CommonConstants.OPACITY_DEFAULT)
.decoration(this.isComplete?{type:TextDecorationType.LineThrough}:{type: TextDecorationType.None})
}
.width(CommonConstants.LIST_DEFAULT_WIDTH)
.height($r('app.float.list_item_height'))
.borderRadius(CommonConstants.BORDER_RADIUS)
.backgroundColor($r('app.color.start_window_background'))
.margin({
top:10
})
.onClick(()=>{
this.isComplete = !this.isComplete
})
}
我们给列表项添加了一个点击事件,当我们点击后就表示已经完成了这项内容,就会修改样式.
这里我们使用响应式变量isComplete表示,在鸿蒙开发中使用@State表示响应式变量.那么我们在Build()中加载图片资源就需要判断该项是否完成了.
if(!this.isComplete){
this.labelIcon($r('app.media.ic_default'))
}else{
this.labelIcon($r('app.media.ic_ok'))
}
这样我们就基本实现了效果.
文章到这里也就结束了,鸿蒙开发对于小编还是有一定难度的。如有不足,恳请指出!!谢谢大家.