鸿蒙界面开发

鸿蒙开发环境准备

开发工具下载 HarmonyOS 官网 → 一探究竟 → DevEco Studio 下载

地址：https://developer.huawei.com/consumer/cn/

ArkTS 基础快速入门

ArkTS：是一门用于开发鸿蒙应用的编程语言。

编程语言：用来控制计算机工作的，可以告诉计算机我们要做的事情。

console.log('我说', 'Hello World')

认识数据

编程语言的核心是处理数据三种常见的基础数据类型：

① string 字符串：描述信息

② number 数字：计算

③ boolean 布尔：判断（真、假）

存储数据（变量、常量）

变量：专门用来存储数据的容器

let title: string

arkts 复制代码

// let 变量名: 类型 = 值
let title: string = '加油，一起努力学习鸿蒙'
let price: number = 2.27
let isSelect: boolean = true

常量：用来存储数据（不可变）

变量常量的注意事项（命名规则）：

① 只能包含数字、字母、下划线、$，不能以数字开头

② 不能使用内置关键字或保留字（比如 let、const）

③ 严格区分大小写

arkts 复制代码

const 常量名: 类型 = 值
const PI: number = 3.1415926

常量不能修改

数组

数组：是一个容器，可以存储多个数据

arkts 复制代码

let 数组名: 类型[] = [数据1, 数据2,...]
let names: string[] = ['小红', '小明', '大强'

注意：数组指定的类型和存储的数据类型要必须一致，否则会报错

获得数组元素：数组名[索引]

arkts 复制代码

let names: string[] = ['小红', '小明', '大强']
获得数组元素： 数组名[索引]
console.log('取出小明', names[1])

注意：索引号是从 0 开始的

‍

1.如何将多个数据一次性存储到数组？

Ø let 数组名: 类型[] = [数据 1, 数据 2, 数据 3...]

2.如何取出数组某个元素的数据？

Ø 数组名[索引]

3.数组指定的类型和存储的数据类型不一致为发生什么？

Ø 会报错

arkts 复制代码

index.ets let names: string[] = ['小红', '小明', '大强'] 

console.log('取出小明', names[1])

函数 - Function

函数：是可以被重复使用的代码块

作用：函数可以把具有相同或相似逻辑的代码"包裹"起来，有利于代码复用。

函数基本使用

定义函数

arkts 复制代码

function 函数名(){
	函数体
}

调用函数

arkts 复制代码

函数名（）

注意：先定义，后使用（变量、函数都是如此）

arkts 复制代码

//实现重复三次输出5行五角星
function fn () {
console.log('五角星', '☆')
console.log('五角星', '☆☆')
console.log('五角星', '☆☆☆')
console.log('五角星', '☆☆☆☆')
console.log('五角星', '☆☆☆☆☆')
}
fn() // 第一次输出 5行五角星 
fn() // 第二次输出 5行五角星
fn() // 第三次输出 5行五角星

函数的完整用法

根据我们传入不同的数据，进行处理，返回处理后的结果。

arkts 复制代码

function 函数名（形参1:类型, 形参2:类型 ...） {
编写代码对数据进行处理
return 处理后的结果
}

let 变量名: 类型 = 函数名（实参1, 实参2, ..）

注意：形参和实参个数要一致

箭头函数

箭头函数是比普通函数更简洁的一种函数写法

arkts 复制代码

let 函数名 = (形参1: 类型, 形参2: 类型) => {
// 函数体
 // 1. 计算过程
 // 2. 返回结果
 return 计算的结果
}

函数名(实参1, 实参2)

arkts 复制代码

//写一个buy函数，计算购买的总价 = 价格 * 数量
let buy = (price: number, weight: number) => {
let result: number = price * weight
return result
}

let apple: number = buy(2, 3)

普通函数和箭头函数，在后面开发中会有不同的使用场景，所以两种语法都需要掌握。

‍

对象

作用：用于描述一个物体的特征和行为。

对象：是一个可以储存多个数据的容器。

对象 - 定义和说明

通过 interface 接口约定对象结构类型

arkts 复制代码

interface 接口名 {
	属性1： 类型1
	属性2： 类型2
	属性3： 类型3
}

interface person {
	name: string
	age： number
	weight：number
}

定义对象并使用（通过 . 访问）

arkts 复制代码

let person: Person = {
name: '靓仔斌',
age: 18,
weight: 130
}

console.log('名字', person.name)
console.log('年纪', person.age)
console.log('体重', person.weight)

总结

对象是什么？作用是什么？

是一个容器，可以保存不同类型数据可以用来描述物体特征和行为。

如何定义对象？

先定义接口，再基于接口约定对象结构类型，定义对象

arkts 复制代码

interface person {
	name: string
	age： number
	weight：number
}

let person: Person = {
name: '靓仔斌',
age: 18,
weight: 130
}

如果访问对象属性？

对象.属性名
arkts 复制代码
```
console.log('名字', person.name)
```

‍

对象 - 方法

方法作用：描述对象的具体行为

约定方法类型

arkts 复制代码

interface 接口名称 {
方法名: (参数:类型) => 返回值类型
}
interface Person{
dance: () => void
sing: (song: string) => void
}

添加方法（箭头函数）

arkts 复制代码

let ym: Person = { 
	dance: () => {
	  conslose.log('我来跳个舞')
	},
	sing: (song: string) => {
	  console.log('杨幂说', '我来唱首', song)
	}
}
ym.dance()
ym.sing('爱的供养')

如何在对象里面添加方法？

约定方法类型 → 添加方法（箭头函数）
1. 如何调用对象方法？
对象名.方法名(实参)

‍

联合类型

联合类型是一种灵活的数据类型，它修饰的变量可以存储不同类型的数据。

语法：let 变量: 类型 1 | 类型 2 | 类型 3 = 值

如何让变量，可以存储多种类型的数据？

联合类型：是由多个类型联合组合成的数据类型。
arkts 复制代码
```
let judge: number | string = 100
judge = 'A'
```
如何把变量值限定在一组数据范围内选择？
arkts 复制代码
```
let gender: 'man' | 'woman' | 'secret'
```

枚举类型

枚举类型是一种特殊的数据类型，约定变量只能在一组数据范围内选择值。

定义枚举类型（常量列表）

arkts 复制代码

enum 枚举名 {
	常量1 = 值,
	常量2 = 值,
	......
}
enum ThemeColor {
	Red = '#ff0f29',
	Orange = '#ff7100',
	Green = '#30b30e'
}

使用枚举类型，约束变量

arkts 复制代码

let color: ThemeColor = ThemeColor.Red
console.log('主页颜色', color)

取值从枚举中（常量列表中）取

枚举类型有什么特点？

枚举是一种特殊的数据类型约定变量也只能在一组数据范围内选择，提高可维护性
1. 枚举类型怎么使用？
声明枚举类型 → 使用枚举数据

界面开发起步

开发工具：仍然是 DevEco Studio

学习界面开发：build 里面写代码，预览器看效果

界面开发-布局思路

ArkUI（方舟开发框架）是一套构建鸿蒙应用界面的框架。

构建页面的最小单位就是 "组件"。

组件分类：

① 基础组件：界面呈现的基础元素。

 如：文字、图片、按钮等。

arkts 复制代码

基础组件(参数)

② 容器组件：控制布局排布。

如：Row 行、Column 列等。

arkts 复制代码

容器组件() {
// 内容
}

布局思路：先排版，再放内容。

注意：build有且只能有一个根元素，且是容器组件

arkts 复制代码

build() {
	Column () {
		Text('小说简介')
		Row () {
			Text('都市')
			Text('生活')
			Text('情感')
			Text('男频')
		}
	}
}

组件的属性方法

需求：美化组件外观效果 → 组件的属性方法

arkts 复制代码

组件() {}
	.属性方法1(参数)
	.属性方法2(参数)
	.属性方法3(参数)
	......

arkts 复制代码

Text('小说简介')
	.height(40)
	.fontSize(20)
	 ......

字体颜色

设置文字的颜色？

fontColor(颜色值) 色值是通用的
色值写法？
arkts 复制代码
```
Text('小说简介')
	.fontColor(Color.Orange)
	.fontColor('#8fbce7')
```
颜色值说明具体演示

枚举颜色 Color.颜色名 Color.Red、Color.Pink

② #开头的16进制 '#8fbce7' 【设计图会标注
构建界面思路：排版 → 内容 → 美化

颜色值说明	具体演示
枚举颜色 Color.颜色名	Color.Red、Color.Pink
② #开头的16进制	'#8fbce7' 【设计图会标注

文字溢出省略号、行高

文字溢出省略（设置文本超长时的显示方式）

语法：.textOverflow({ overflow: TextOverflow.XXX })

注意：需要配合 .maxLines(行数) 使用
1. 行高
语法：.lineHeight(数字)

arkts 复制代码

Text('方舟...')
	.textOverflow({
	overflow: TextOverflow.Ellipsis
  })
 .maxLines(2)
 .lineHeight(30)

总结

1、设置文字溢出省略号？

① .textOverflow({ overflow: TextOverflow.Ellipsis })

② .maxLines(数字) 控制最大行数

2、设置行高？

.lineHeight(数字)

‍

Image 图片组件

Image 图片组件作用：界面中展示图片

语法：Image(图片数据源) 支持网络图片资源和本地图片资源

① 网络图片

Image('https://www.itheima.com/images/logo.png')

② 本地图片

Image( $r('app.media.文件名') )

输入框与按钮

需求：实现登录或注册的排版 → 输入框和按钮组件

arkts 复制代码

TextInput(参数) 
	.属性方法()

arkts 复制代码

Button('按钮文本')

参数：placeholder 提示文本
arkts 复制代码
```
TextInput({ 
	placeholder: '占位符文本' 
})
```
属性：type(InputType.xxx) 设置输入框 type 类型

type 值解释说明

① Normal 基本输入模式，无特殊限制

② Password 密码输入模式

type 值	解释说明
① Normal	基本输入模式，无特殊限制
② Password	密码输入模式

如何调整组件之间的距离？

给外层容器组件加 { space: 数字 }

arkts 复制代码

Column({ space: 20})  {...}

‍

鸿蒙界面开发