HarmonyOs开发常用相关组件的笔记

首先我们可以说一下input组件，input组件在进行页面开发时比较的常用，包括的内容就有输入框、选择框、搜索框、按钮等等。每个内容又可以进行精细的划分，比如输入框，类型写为password，在进行输入时，可以时输入的密码不可见；选择框也可以分为单选框或者多选框，还可以设置多选框初始状态的是否选中，比较方便；搜索框和按钮就不多说了，都是一些我们常用的内容。

此外，除了通用的样式外，还有其他的样式，比如：

还有支持一些其他的事件，这里的事件指的是用js来进行跳转的内容，常用的有onclick、onchange什么的，其他的有translate什么的，比较的方便。

其次，再来了解一下image组件，image组件基本上用来插入图片，但是也具有很多的属性，接口为src意思是导入的图片需要写src来进行导入，导入可以选择相对或者是绝对路径，一般建议用相对路径。

之后image组件的常用属性如下图所示：

不过一般这个好像不太过多的考虑，精细设计的话，可以去尝试一下的。而且image组件也是具有事件的，不过一般也不常用。

接下来我们来讲toolbar组件，当你制作底部栏或者顶部栏进行页面跳转时是需要用到这个的，比如这样

当然你也可以设计点击后进行界面的跳转同时最下方的图标状态发生改变，这里摆放一下跳转后的一个例子：

// xxx.js

import prompt from '@system.prompt';

export default {

  data:{

    itemColor:'black'

  },

  itemClick(){

    this.itemColor= "red";

    prompt.showToast({duration:2000,message:'item click'});

  },

  itemLongPress(){

    prompt.showToast({duration:2000,message:'item long press'});

    this.itemColor= "blue";

  },

}

所以，toolbar组件通常要考虑图标的转换，以及前后图标颜色的改变，这里对于js具有一些小要求，需要多多理解一下，否则容易绕晕。当然，也可以采用css样式来对toolbar组件进行修饰，达到我们所想要的效果。此外有一个注意的点，toolbar不支持事件和方法，但是他的子组件可以，所以跳转什么的都写在他的子组件下面。

此外，介绍一下，开发页面时的心得，比如说要多多的去查一下自己要设计的页面是什么类型的，常用的颜色有哪些，怎么去进行搭配什么的。其次对于页面的美观性，建议可以多去看看市面上自己这一类型的app界面都是如何设计的，可以多去了解一下，还有登录界面要做的美观一些，登录界面决定了人们使用你做的界面时的第一印象，所以要多去下点功夫。之后要注意页面的跳转，路径一定要写对，跳转的页面一定要有内容可以展现；还有就是开发页面时，可以去多去官方的文档了解一下，知道如何去实现一些效果，比如说轮播图什么的，非常重要；因为如果官方封装好了相关的函数什么的，你就可以直接拿来用了，非常方便。