重生之学习HarmonyOS-菜鲲开局

慕青苑
100 阅读3分钟

前言

如果不想看我啰嗦可以直接跳到正文

我是一位应届毕业生，自己是走的前端方向。说来惭愧我是大三的时候才接触的前端，然后经过这么久的学习，然而秋招还是没有找到工作😭，真的菜的不行。现在我也不是放弃前端而转鸿蒙，只是我看到鸿蒙感觉可能也许会有不错的发展🤭，先试着学习一些东西，所谓技多不压身，如果以后发展好也有不错的底子去尝试。当然现在网络上关于鸿蒙学习的课程也比较少，我是选择了传智它的博学谷的鸿蒙教程，通过一段时间下来的学习感觉还是挺不错的😊。也许有一些小伙伴效果不是很好，当然这也因人而异，看自己的学习方法了。这几篇文章主要是分享一下在学习过程中的知识，全是硬货干货。

我就不把什么概念写出来了，如果想进一步了解可以去官网看看，毕竟谁又有官网有权威，讲的更细呢？😎，直接上硬菜。

一、页面基本结构

在一个新创建的项目中，文件中页面主要由几个部分组成，它们各自有不同的作用。 image.png

1. 装饰器

装饰器：用来装饰类结构、方法、变量

  • @Component：标记自定义组件
  • @Entry：标记当前组件是入口组件
  • @State：标记该变量是状态变量，值变化时会触发UI刷新

2.自定义组件

语法：struct 组件名{}， 自定义组件：即可复用的UI单元

3. UI描述

语法：build(){}， UI描述：其内部以声明式方式描述UI结构

4.内置组件

内置组件：ArkUI提供的组件

  • 容器组件：用来完成页面布局，例如Row、Column
  • 基础组件：自带样式和功能的页面元素，例如：Text

5. 属性和方法

主要用来设置组件的UI样式和组件的事件回调

初期学习中，上面这几个东西其实大家知道基本是用来干什么的就行了，如果以后打算深究再说🤖

二、基本组件使用

1. Image图片组件

语法：Image(src)

src一共有三种格式：

1.string格式，通常用来加载网络图片，需要申请网络访问权限

Image("<https://xxx.png>")

2.PixelMap格式，可以加载像素图，常用在图片编辑中

Image(pixelMapObject)

3.Resource格式，加载本地图片，推荐使用

Image($r('app.media.tupian')) *app.media为固定格式*

Image($rawfile('tupian.png'))

2. Text文本显示组件

语法：Text(content)

content三种格式：

1.string格式，直接填写文本内容

Text('图片宽度')

2.Resource格式，读取本地资源文件

Text($r('app.string.width_label')) *app.string为固定格式*

3.变量格式，通过this使用定义的变量

Text(this.message)

这里添加一个小知识点，text组件里面可以包含span子组件，对于那种需要text组件中文本设置不同样式的场景就能使用。

Text(){
    span('价格：')
      .fontSize(25)
    span('￥')
      .fontSize(15)
}

3. TextInput文本输入框

语法：TextInput({placeholder,text})

它有两个参数：

1.placeholder:输入框输入时的提示文本

TextInput({placeholder:'请输入图片宽度'})

2.text：输入框当前的文本内容，即默认内容

TextInput({text:'hihi'})

属性和方法：

type属性用于指定什么类型的文本输入框，如number，password，email，type(InputType.Password)

*onChange(val => {})*方法表示当输入框数据改变时就触发,val是文本输入框的值

4. Button按钮组件

语法：Button(label)

label参数表示按钮内容，它如果写就直接表示按钮内容，如果不写就表示自定义按钮，必须在button内嵌套其他组件

属性和方法：

type属性用于指定什么类型的按钮，如normal，circle，type(ButtonType.Password)

*onClick(() => {})*方法表示当按钮点击时就触发

5. Slider滑动条组件

语法：Slider(options)

options是一个对象，主要包含一些滑动条配置

Slider({ min:0, max:100, value:20, step:10,})

属性和方法：

*showTips(true)*表示是否展示百分比提示

*onChange(val => {})*方法表示当滑动时触发的函数，val值是滑动时改变的值

6. Row和Column布局

横向布局使用Row，纵向布局使用Column

布局中有主轴和副轴之分，大体上和flex布局类似。

控制主轴布局使用justifyContent() ，控制副轴布局使用alignItems()

justifyContent(FlexAlign.XXX),而alignItems根据row和column的不同取不同属性，如果是row用VerticalAlign,如果是column用HorizontalAlign

7. 循环渲染组件

语法：ForEach(参数1，参数2，参数3？)

参数1是一个数组，表示要遍历的数据数组

参数2为一个函数，函数中的参数表示循环的每一项和数组下标，函数内部就包含循环的内容

参数3是键生成函数，为数组每一项生成一个唯一标识，组件是否重新渲染的判断标准

        ForEach(
          this.items,
          (item: Item) => {
            ListItem(){
              this.ItemCard(item)
            }
          }
        )

8. 条件渲染组件

通过if/else根据数据状态不同，渲染不同的页面组件

  Column() {
     if (this.toggle) {
        CounterView({ label: 'CounterView #positive' })
      } else {
        CounterView({ label: 'CounterView #negative' })
      }
     Button(`toggle ${this.toggle}`)
       .onClick(() => {
       this.toggle = !this.toggle;
     })
  }

我会按照自己的学习进度来发布文章，可能会有人觉得作者学习的速度很慢，但请见谅一下我真的也在加快速度了，奈何太菜了，作者本人真是一个菜鲲啊！😭。希望我自己的学习笔记能对大家有所收获。

avatar
文章
阅读
粉丝