鸿蒙笔记

1.组件：
（1）Column(){} 列
//space：数字 设置组件间隙（间隙一致）

Row(){} 行

Text('') 文本

.width() 宽度

//可以是数值也可以是百分比（常用于调整大小）

.height 高
//可以是数值也可以是百分比

.fontSize() 文字大小
//默认是16

.fontWeight() 文本粗细
//加粗 FontWeight.Bold
//100~900的数字，加粗700，默认400

.fontColor 文字颜色

.fontStyle(FontStyle.Italic) 文本倾斜

.textAlign(TextAlign.xxx) 文本对齐方式
//PS : Center ： 居中

.backgroundColor 背景色

.padding 内边距

.margin 外边距

.border 边框

checkbox（） 复选框

Span（） 定制文本

Blank（） 填充组件（像弹簧）

flex（） 弹性布局

position 绝对定位

score() 滚动组件

layoutWeight（x） 按分比进行空间分配

scale 缩放（图片动画）

 

2.数据类型：string number boolean
3.存储变量：
let title： string = '苹果'
//定义
title = '香蕉'
//修改
4.存储常量：
//const 常量名： 类型 = 值
const PI: number = 3.1415926
5.数组：
//let 数组名: 类型[] = [a,b,c,...]
let names: string[] = ['甲','乙','丙']
6.函数：
function 函数名（需要处理的数据）{
函数体
return 处理后的结果
}

let 变量名：类型 = 函数名（实参1，实参2，.....）
7.箭头函数：
let 函数名 = （形参1： 类型，形参2： 类型） => {
//函数体
}

函数名（实参1，实参2，...）
8.对象：
//【1】通过interface接口约定对象结构类型
interface 接口名 {
属性1： 类型1
属性2： 类型2
属性3： 类型3
}

interface Person {
name： string
age： number
weight ： number
}

//【2】定义对象并使用
let 对象名称： 对象结构类型 = 值

let person：Person = {
name：'张三'，
age：'18'，
weight ： 90
}
9.对象 - 方法：
方法作用：描述对象的具体行为

//1.约定方法类型：
interface 接口名称 {
方法名：（参数：类型） => 返回值类型
}

interface Person{
dance： （） =>void
sing：（song：string）=> void
}

//2.添加方法：
let ym：Person = {
dance：（） =>{
console.log（'杨幂说','我来跳个舞'）
}，
sing：（song： string） => {
console.log（'杨幂说','我来唱首',song）
}
}
ym.dance()
ym.sing('爱的供养')
10.枚举：
enum 枚举名 {
常量1 = 值，
常量2 = 值，
。。。。
}

enum ThemeColor {
Red = '#ff0f29',
Orange = '#ff7100',
Green = '#30b30e'
}

//取值：
let color：ThemeColor = ThemeColor.Red
console.log('主页颜色' , color)

 

11.组件属性值：
（1）字体颜色：
语法：.fontColor（颜色值）
//颜色值： 【1】Color.颜色名
【2】'#xxxx' （#开头的16进制）
//字体显示划掉痕迹：
.decoration({type:TextDecorationType.LineThrough})
（2）文本溢出省略号：
语法： .textOverflow({
overflow: TextOverflow.Ellipsis
})
.maxLines(数字)

//ps : 需要配合.maxLines(行数)使用
（3）行高：
语法： .lineHeight(数字)

（4）图片组件：
【1】语法：Image（图片数据源）
//支持网络图片资源和本地图片资源
[1] 网络图片加载： Image（'网图地址'）
[2] 本地图片加载： Image($r('app.media.文件名'))
【2】svg图标修改颜色：
.fillColor(颜色)
//不会失真！
（5）输入框和按钮：
【1】输入框：
语法： TextInput（参数对象）
.属性方法（）
//参数对象：placeholder 提示文本
//属性方法：.type（InputType.xxx） 设置输入框type类型
//type值 解释说明
Normal 基本输入模式，无特殊限制
Password 密码输入模式

TextInput（{
placeholder：'请输入用户名'
}）
.type（InputType.Password）
【2】按钮：
语法：Button（'文本'）

【3】点击事件：（被点击时触发的事件）
作用：监听（感知）用户点击行为，进行对应操作
语法：.noClick（（参数）=》{}）

//ps： .noClick（（参数）=> {
AlertDialog.show({
message : '你好-这是个弹框'
})
}）


（6）内边距padding：(外边距margin：参考内边距)
作用：在组件内添加间距，拉开内容与组件边缘之间的距离
语法：
【1】.padding(20)
//四个方向内边距均为20
【2】.padding({
top : 10,
right : 20,
bottom : 40,
left : 80
})
//四个方向内边距分别设置
//外边距margin：参考内边距
（7）边框border：
作用：给组件添加边界，进行装饰美化
语法：
【1】四个方向相同:
Text（'边框语法'）.border({
width : 1, //宽度（必设）
color : '#3274f6' //颜色
style : BorderStyle.Solid //样式(虚线)，实线：Dashed
})
【2】单独设置：
Text('边框语法').border({
width : {
left : 1, right : 2
},
color : {
left : Color.Red, right : Color.Blue
},
style : {
left : BorderStyle.Dashed,
right : BorderStyle.Dotted
}
})
//top,right,bottom,left

（9）设置组件圆角：
属性：.borderRadius（参数）
可分别设置（topLeft,topRight,bottomRight,bottomLeft）
//正圆：宽=高，且圆角是宽高的一半
//胶囊：宽＞高且圆角是高的一半
（10）背景图：
【1】属性：.backgroundImage（背景图地址,ImageRepeat.XY）
//背景图平铺方式：ImageReperat：（可省略）
NoRepeat ： 不平铺（默认）
X ： 水平平铺
Y ： 垂直平铺
XY ： 水平垂直都平铺
【2】位置：.backgroundImagePsotition（坐标对象或枚举）
参数：
位置坐标：{x：位置坐标，y：位置坐标}
枚举 Alignment
Text（）
.backgroundImage($r('app.media.flower'))
.backgroundImagePosition({x : 100, y : 100})
//具体坐标
//背景定位默认单位：
px：实际的物理像素点，设备出厂即定好
//宽高默认单位：
vp：虚拟像素，相对于不同的设备会自动转换，保证不同设备视觉一致（推荐）
//函数：vp2px（数值） 将 vp进行转换，得到px的数值
.backgroundImagePosition(Alignment.Center)
//中心
【3】尺寸： -backgroundImageSize
作用：背景图缩放
属性：.backgroundImageSize（宽高对象或枚举）
参数：
背景图宽高：{width：尺寸，height：尺寸}
枚举ImageSize：
Contain：等比例缩放背景图，当宽或者高与组件尺寸相同时停止缩放
Cover：等比例缩放背景图至图片完全覆盖组件范围
fill：不等比例缩放背景图，使得图片完全填满组件范围
Auto：默认，原图尺寸

（11）线性布局：（通过线性容器Column和Row创建）
Column容器：子元素垂直方向排列
Row容器：子元素水平方向排列

【1】排布主方向上的对齐方式（主轴）
属性：.justifyContent（枚举FlexAlign）
// .justifyContent(FlexAlign.Start) 主轴起始位置对齐
.justifyContent(FlexAlign.Center) 主轴居中对齐
.justifyContent(FlexAlign.End) 主轴结束位置对齐
.justifyContent(FlexAlign.SpaceBetween) 贴边显示，中间的元素均匀分布间隙（0 1 1 1 0）
.justifyContent(FlexAlign.SpaceAround) 间隙环绕（1 2 2 2 1）
.justifyContent(FlexAlign.SpaceEvenly) 间隙均匀环绕（1 1 1 1 1）

【2】交叉轴对齐方式：
属性：alignItems()
参数：枚举类型
交叉轴在水平方向：.alignItems(HorizontalAlign.xxx)
交叉轴在垂直方向：.alignItems(VerticalAlign.xxx)

（12）自适应伸缩：
//设置layoutWeight属性的子元素与兄弟元素，会按照权重进行分配主轴的空间
语法：.layoutWeight（数字）

（13）定制文本：
一段文本中，有文本样式需要单独定制，则用Text包裹Span
Text（）{
Span（'这是测试文字1'）
Span（'这是测试文字2').fontColor('#3274f6')
}
（14）弹性布局：（flex（））（亦称伸缩布局,涉及换行时可用）
【1】Flex默认主轴水平往右，交叉轴垂直往下 --->Row
【2】调整主轴方向：
direction : FlexDirection.Row(默认) / Column
【3】调整主轴对齐方式：
justifyContent ：FlexAlign.SpaceAround
【4】交叉轴对齐：
alignItems : ItemAlign.Stretch
【5】flex换行-wrap
属性： [1]FlexWrap.NoWrap 单行布局
[2]FlexWrap.Wrap 多行布局

Flex({
direction : FlexDirection.Row,
justifyContent : FlexAlign.SpaceAround,
alignItems : ItemAlign.Stretch
})

（15）绝对定位：（position）（灵活）
作用：控制组件位置，可以实现层叠效果
特点：
1.参照父组件左上角进行偏移
2.绝对定位后的组件不再占用自身原有位置
语法：.position（位置对象）
参数：{x：水平偏移量，y：垂直偏移量}
调整组件层级：
.zIndex（数字）
//可以在不动结构的情况下，调整组件的层级 .zIndex（数字），数字越大层级越高

（16）层叠布局：（stack）(默认居中)（简洁）
层级：zIndex（数字）

Stack({
alignContent : Alignment.Center
//设置对齐方式，默认居中
}){
Item1()
Item2()
Item3()
}


（17）滚动布局：（Scroll（））

 

 

12. （1）字符串拼接：
语法：￥{......}

（2）类型转换：
【1】字符串转数字：
Number（）：字符串直接转数字，转换失败返回NaN（字符串必须全数字）
parseInt（）：去掉小数部分转数字，转换失败返回NaN
parseFloat（）：保留小数部分转数字，转换失败返回NaN
【2】数字转字符串：
toString() : 数字直接转字符串
toFixed() : 四舍五入转字符串，可设置保留几位小数，默认为0（取整）
13.交互
（1）点击事件：
说明：组件被点击时触发的事件
作用：监听（感知）用户点击行为，进行对应操作
语法：.onClick（（参数）=>{}）
// AlertDialog.show({
message:"你好~ 这是个弹框！"
})
（2）状态管理：
普通变量：只能在初始化时渲染，后续将不会再刷新

状态变量，需要装饰器修饰，改变会引起UI的渲染刷新（必须设置类型和初始值）
//@State myMsg：string = 'hello 黑马'
//更新： Text(this.myAge.toString()).onClick(()=>{
this.myMsg = '你好，状态！'
})
//ps：定义在组件内的普通变量或状态变量，都需要通过this访问
14.数组
（1）定义：
语法：let names：string[] = ['张三','李四','王五']
取值（通过下标）：
语法： console.log（'数组取值'，names[1]）
console.log（'数组长度'，names.length）
（2）添加数组元素：
[1]往开头加：
数组名.unshift(数据1，数据2，...)
[2]往结尾加：
数组名.push(数据1，数据2，...)
（3）删除数组元素：
[1]从开头删：
数组名.shift()
[2]从结尾删：
数组名.pop()
(4)任意位置添加/删除数组元素：
语法：数组名.splice(起始位置，删除的个数，新增元素1，新增元素2，......)

15.语句
（1）概念：一段可以执行的代码，是一个行为（num = a + b）
（2）表达式：可以被求值的代码，并将其计算出一个结果

16.switch分支：
switch（表达式）{
case 值1：
与值1匹配执行的语句
break
case 值2：
与值2匹配执行的语句
break
default：
以上都未成功匹配执行的代码
}

17.for...of遍历数组
语法： for（let item of 数组名）{
console.log（'for...of...名字是'，item）
}
//for...of：在..之中进行循环
//item：声明的一个变量，用来在循环的时候接收每一个数组元素
18.数组：
【1】约定接口：
interface Student {
stuId：number
name: string
gender: string
age: number
}

【2】基于接口，构建对象数组：
let stuArr： Student[] = [
{stuId: 1, name:'小丽', gender:'女', age:12}
{stuId: 2, name:'小红', gender:'女', age:13}
]

//打印单个(具体使用（访问-->通过下标）)
console.log("小丽"，stuArr[1].name)
//打印全部
console.log("小丽"，JSON.stringify (stuArr[1]))

//包括对象的复杂数据，如果想要在日志中打印，需要调用一个方法
//（JSON.stringify（复杂类型） 对象/数组）转成字符串格式
【3】支持遍历
for(let item of stuArr){
console.log('每一项',JSON.stringify(item))
}

19.渲染控制（ForEach）
//ForEach可以基于数组的个数，渲染组件的个数。（简化代码）
（1）语法：
ForEach（arr，（item，index）=>{}）

ps： @State titles:string[] = ['电子产品','精品服饰','母婴产品','影音娱乐','海外旅游']
build(){
Column(){
ForEach（this.titles，（item: string，index: number）=>{
Text(item)
.fontSize('24')
.fontWeight(700)
.fontColor(Color.Orange)
.width('100%')
.padding(15)
}）
}
}
20.角标组件（Badge）
（1）语法：
Badge（{
count: 1, //角标数值（为0自动隐藏）
position: BodgePosition.RightTop, //角标位置
style: {
fontSize: 12, //文字大小
badgeSize: 16, //圆形大小
badgeColor:'#FA2A2D' //圆形底色
}
}）{
Image($r('app.media.bg_01'))
.width(80)
}

21.Grid布局：
Gird（）{
ForEach（[1，2，3，4，5，6，7，8，9，10，11，12]，（）=>{
GridItem(){
Column(){

}
.width("100%")
.height("100%")
.backgroundColor(Color.Green)
.border({width: 1})
}
})
}
.columusTemplate('1fr 1fr 1fr 1fr')
//设置每行中列的个数及其所占比例
.rowsTemplate('1fr 1fr 1fr')
//设置每列中行的个数及其所占比例
.columnsGap(5)
//设置列的间隙
.rowsGap(5)
//设置行的间隙
.width('100%')
.height(500)
.backgroundColor(Color.Pink)

22.swiper轮播组件
Swiper是一个 容器组件，当设置了多个子组件后，可以对这些 子组件 进行轮播显示。（文字、图 片...）
//华为api：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts- //layout-development-create-looping-V5
（1）基本用法：
语法结构：
Swiper() {
// 1. 轮播内容
Text('1')
Text('2')
Text('3')
}
// 2. 设置尺寸（内容会自动拉伸）
.width('100%')
.height(100)
（2）基本用法（1）：
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
//swiper由内容撑开，需要考虑设置宽高
// Swiper 轮播组件的基本使用
// 1. Swiper 包内容
// 2. Swiper 设尺寸
Swiper(){
Text("1")
.backgroundColor(Color.Brown)
Text("2")
.backgroundColor(Color.Gray)
Text("3")
.backgroundColor(Color.Red)
Text("4")
.backgroundColor(Color.Green)
}
.height(200)
.width("100%")
}
.height('100%')
.width('100%')
}
}
（3）常见属性：
属性方法 传值 作用 默认值
loop boolean 是否开启循环 true
autoPlay boolean 是否自动播放 false
interval number 自动播放的时间间隔（ms） 3000
vertical boolean 纵向滑动轮播 false
...其他属性 见文档
（4）样式自定义（圆点）：
Swiper() {
...
}
.indicator(
Indicator.dot() // 小圆点
.itemWidth(20) // 默认的宽
.itemHeight(20) // 默认的高
.color(Color.Black) // 默认的颜色
.selectedItemWidth(30) // 选中的宽
.selectedItemHeight(30) // 选中的高
.selectedColor(Color.White) // 选中的颜色
)
23.进度条组件：
（1）概述：进度条组件，用于显示内容加载或操作处理等进度
（2）参数规则：Progress(options: {value: number, total?: number, type?: ProgressType})
（3）常用属性：
[1]value number：设置当前进度值，设置小于0的数值时自动为0，设置大于Total的数值时 自动为total，非法数值不生效。
[2]color ResourceColor：设置进度条颜色值。默认值：#ff007dff。
[3]backgroundColor ResourceColor : 设置进度条底色值。默认值：#19182431。
[4]style object strokeWidth：设置进度条边框宽度（不支持百分比设置），该属性支持设 置进度条两侧半圆的边框宽度，默认值表示进度条两侧的半圆之一。
[5]scaleCount : 设置进度条刻度总数量。默认值：120。
[6]scaleWidth : 设置进度条刻度宽度（不支持百分比设置），刻度相对于进度条宽度尺寸， 为绝对值模式。默认值：2.0vp