这是暑期实训时记录的一些笔记和心得，学习了ArkTS和ArkUI，学习ArkTS与其说是学习新语言，不如说是温习了一些编程相关的知识，模仿老师的一些编程风格，大部分内容都能当场消化，老师讲的也很快，这部分内容很快就结束了；我虽然选修过html5+css3的课程，但是大部分内容都属于是涉猎，掌握并不牢固，而且没有接触到JavaScript内容，花了更多的时间

一、开发工具：

  1. devEco Studio

二、ArkTS

调试输出与注释

  1. 调试输出：console.log(参数1，参数2,…) 

    1
    console.log("周三") //日志

    多个参数用英文逗号分隔，第一个参数必须是字符串。

  2. 注释：

    • 单行注释：//
    • 多行注释：/： ：/

变量、常量、数据类型

  1. 变量：
    • 声明：let 变量名：类型;
      声明并初始化：let 变量名：类型 = 值1; 
      1
      let student01:string = 'jack'
    • 不能以数字开头，不能包含运算符，严格区分大小写，不能以关键字命名
    • 为了提升代码可读性：使用字符数字下划线或$命名；尽量见名知义；用下划线分割多个单词
    • 赋值
  2. 常量：程序运行中始终不变的数据，通常const声明的常量名全大写 
    1
    let STUDENT:string = 'tom';
  3. 数据类型：
  • string（字符串）：可以用单引号，双引号，反引号标注（模板字符串，通过${变量名}来使用变量的值） 
    1
    2
    3
    let stu1:string = 'jack';
    let stu2:string = 'rose';
    let introduce:string = `${stu1}和${stu2}是好伙伴`;
  • number（数字）：分为整数、浮点数和特殊值，数字前可加-表示负号
    • 整数：可赋值为二进制、八进制、十进制、十六进制 
      1
      2
      3
      4
      let bin:number = 0b11010
      let oct:number = 0o32
      let dec:number = 26
      let hex:number = 0x1a;
    • 浮点数 
      1
      2
      let fnumber01:number = -3.14;
      let fnumber02:number = 3.14;
    • 特殊值：
      • Infinity：计算结果超出了最大可表示数字
      • -Infinity：计算结果超出了最小可表示数字
      • NaN（not a number）：进行了非法运算操作，不是数字
  • boolean（布尔） 
    1
    2
    let result01:boolean = true;
    let result02:boolean = false;
  • null（空）：变量为指向任何对象 
    1
    let empty:null = null;
  • void（空）：函数没有返回值 
    1
    let data:void;
  • undefined（未定义）：声明的对象未赋值 
    1
    2
    let num01:undefined = undefined;
    let num02:undefined;
  • object（对象）

运算符

  1. 算术运算符
    • +、-、*、/、% 
      1
      2
      3
      4
      5
      6
      let a=10,b=3,c=3,d=3;
      console.log('a+b',(a+b));
      console.log('a-b',(a-b));
      console.log('a*b',(a*b));
      console.log('a/b',(a/b));
      console.log('a%b',(a%b));
    • 自增自减：++a和a++对于a本身没有区别，都是自增1，但是一旦参与运算,前置先自增再参与运算，后置先参与运算再自增 
      1
      2
      3
      4
      5
      6
      7
      let s1 = ++a;
      console.log('a=',a);//a=11
      console.log('s1=',s1);//a==11

      let s2 = a++;
      console.log('a=',a);//a=12
      console.log('s2=',s2);//a==11
  2. 字符串运算符
    • 字符串拼接（+）
      1
      2
      3
      4
      let username = 'jack';
      let gender = 'male';
      console.log(username + ',' + gender);
      console.log(username + 1000);
  3. 赋值运算符：=、+=、-=、*=、/=、%=等
  4. 比较运算符：==（等于（值））、===（全等（值+数据类型））
  5. 逻辑运算符：
    • 与：&&
    • 或：||
    • 非：！
  6. 三元运算符：条件表达式 ？ 表达式1：表达式2；
  7. 数据类型检测运算符：
  • typeof 数据 单个数据
  • typeof（数据） 可以对表达式进行检测

流程控制

  1. 选择结构：
    • （if语句）单分支、、双分支、多重分支（if、if…else…、if…else if…else） 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      //选择结构单分支
      let age1 = 21;
      if(age1>18){
        console.log("已成年");
      }  

      //双分支
      let age2 = 16;
      if(age2>18){
        console.log("已成年");
      }else{
        console.log("未成年");
      }  

      //多重分支
      let score = 80;
      if(score >= 90){
        console.log("优秀");
      }else if(score >= 80){
        console.log("良好");
      }else if(score >= 70){
        console.log("一般");
      }else if(score >= 60){
        console.log("合格");
      }else{
        console.log("不及格")
      }
    • switch（表达式）{
      case1:
      代码段1；
      …
      default:
      代码段n;
      } 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
         let week:number = 3;
         let result:string;
         switch(week){
           case 0:
             result = '星期天';
           case 1:
             result = '星期一';
           case 2:
              result = '星期二';
           case 3:
             result = '星期三';
           case 4:
             result = '星期四';
           case 5:
             result = '星期五';
           case 6:
             result = '星期六';
         }
      2. 循环结构
         * for循环：  
               for（初始化变量1；条件表达式2；操作表达式3）{    
                    循环体4；        
         }
      for(let i=1;i<100;i++){
      console.log(‘’,i);
      } 
      1
      2
      3
      4
      5

      * while循环：  
        while（条件表达式1）{
                            循环体2；  
         }
      let i =1;
      while(i<=100){
      console.log(‘’,i);
      i++;
      } 
      1
      2
      3
      4
      * do...while循环：  
         do{  
           循环体1；  
         }while（条件表达式2）；
      let j = 1;
      do{
      console.log(‘’,j);
      j++;
      }while(j<100);
      1
      2
      3
      3. 跳转语句
         * continue：  
           终止循环，终止本层循环的本次循环
      //小明吃六个桃子，当吃第二个桃子时，发现里面有虫子，丢掉第二个继续吃剩下四个
      for(let i =1;i<=6;i++){
      if(i == 2){
      continue;
      }
      console.log(小明吃完了第${i}个桃子 )
      }
      1
      2
      * break：  
        终止循环，终止本层循环
      //小明吃六个桃子，当吃第二个桃子时，发现里面有虫子，于是剩下桃子都不吃了
      for(let i =1;i<=6;i++){
      if(i == 2){
      break;
      }
      console.log(小明吃完了第${i}个桃子)
      } 
      1
      2
      ## 数组和枚举
      1. 数组：索引+值
      let fruits:string[] = [‘苹果’,’橙子’,’香蕉’];
      let index = 1;
      console.log(fruits[0]);
      console.log(fruits[index])

//添加
fruits[3] = ‘草莓’;
console.log(fruits[3]);

//修改
fruits[2] = ‘菠萝’;
console.log(fruits[2]); 

1
2. 二维数组：行+列

let arr:number[][] = [[23,45,73],[34,52,32]];
console.log(‘’,arr[0][0]);
console.log(‘’,arr[0]);

1
2
3
4
5
6
7
3. 枚举：  
   * enum 枚举名（枚举常量名1，枚举常量名2...）  
   * enum 枚举名（枚举常量名1 = 值1，枚举常量名2 = 值2，...）    
   * 定义了枚举后，可用枚举名.枚举常量名访问枚举常量的值
## 函数    
* 内置函数（常用）：  
    * parseInt()：将给定的数据转换成 number 类型的数据。并且省略数据的小数部分，返回数据的整数部分
console.log('',parseInt('100.56'));//100

1
* parseFloat()：将给定的数据转换成 number 类型的浮点数  

console.log('',parseFloat('1000.56'))//100.56  

1
2
* setTimeout()和 setInterval()：前者执行一次。后者以给定周期重复执行
* clearTimeout()和 clearInterval()：清除对应的定时器  

let time1 = setTimeout(()=>{
  console.log('1秒输出1次');
},1000);

let time2 = setInterval(()=>{
  console.log('setIntervl每隔一秒输出一次')
},1000);  

1
2
3
4
5
6
* 自定义函数：   
    * 定义：    
function 函数名（参数）：返回值类型{  
   函数体；  
}  
   * 调用：自动推断，类型断言

function sum7(num1:number,num2:number):number{
return num1+num2;
}
console.log(‘’,sum7(10,20));

function sum2(num1:number,num2:number){
return num1+num2;
}
//调用 自动推断
let s11 = sum2(100,200);
//类型断言
let s22 = sum2(100,200) as number;

1
2
3
4
* 箭头函数：  
    * （参数1：类型，参数2：类型，...）：返回值类型=>{  
      函数体  
    }
let sum3 = (num1:number,num2:number)=>{  
 return num1+num2;

}
console.log(‘’,sum3(1000,2000));

1
* 当函数体只有一条语句且运行结果为函数的返回值时，可省略函数体的大括号和return关键字

let sum33 = (num1:number,num2:number)=>num1+num2;
console.log(‘’,sum33(1,2));
1
2
3
4
* 函数自调用：  
（（num1：number，num2：number）=>{  
  console.log('',num1+num2)  
}）（1，2）;

((num1:number,num2:number)=>{
console.log(‘’,num1+num2);
})(100,200);
```

面向过程和面向对象

  1. 事物：静态+动态
    对象：属性+方法
  2. 创建对象：
    • 通过字面量创建对象
      1. 定义接口：
        interface 接口名{
        成员名1：类型;
        成员名2：类型;
        }
      2. 使用接口名作为变量的类型：
        let 变量名：接口名 = {
        成员名1：值；
        成员名2：值；
        }
    • 通过类创建对象：
      1. 创建类：
        class 类名{
        属性名：类型=值；
        方法名（属性：类型）：类型；
        }
      2. 通过类创建对象（类的实例化）：
        let 变量名 = new 类名；
  3. 实例成员：
    • 访问属性
    • 调用方法
    • 对象的引用传递
  4. 静态成员：
    • static定义静态成员
    • 类名.静态成员名访问属性
  5. 构造方法（constructor）：
  6. 链式调用
  7. 类的继承：
    • class 子类名 extends 父类名
    • 子类拥有父类的属性和方法
    • intance of 判断对象是否为某个类(包括继承关系中上层的类):
      变量名 intance of 类名;
    • 子类调用父类的方法（super）：
  8. 访问控制修饰符：
    • public
    • protected
    • private

数组遍历

  1. forEach遍历
  2. map遍历
  3. for…of遍历

错误处理

  1. for..catch
  2. 手动创建

三、ArtUI

组件

  1. 组件是独立的代码块，具有特定的功能和样式
    • 属性：定义组件的样式、数据、特性等
    • 事件：定义组件的交互逻辑
  2. 组件的通用属性和事件：
    通用属性：
    • width：设置宽度
    • height：设置高度
    • margin： 设置外边距
    • padding：设置内边距
    • background：设置背景
    • backgroundColor：设置背景颜色
    • border：设置边框的样式
    • borderRadius：设置边框的圆角半径
      通用事件：
    • onClik：点击事件
  3. 使用方法：
    • 数字单位：vp（虚拟像素），在代码中，直接使用number类型的数字表示vp单位，使用string类型的百分比数来设置相对值
    • 颜色的取值方式：
      • 预定义的颜色名： Color.Red
      • 十六进制颜色值： ‘#FFFF0000’
      • RGB值：’ rgb(255,0,0)’
      • RGBA值： ‘rgba(255,0,0,1)’
      • 资源中的颜色：”$r(‘app.color.资源名’)”

自定义组件：

  1. 装饰器：
    • @Component:使用@Component装饰的struct具有组件化功能，成为一个独立的组件，即自定义组件，自定义组件内部必须使用 build()方法来描述UI结构
    • @Entry：用于将一个自定义组件装饰为页面的入口组件，一个页面只能用一个入口组件
    • @State：用于装饰自定义组件内的变量，以保存状态数据，所以被装饰的变量必须设置初始值
    • @Preview：用于使自定义组件可以在预览器上预览，入口组件不需要添加即可预览，所以通常用于预览非入口组件
  2. UI描述：指以声明式的方式来描述自定义组件的UI结构，代码写在 build()方法中
  3. struct： 指使用 struct 关键字声明的结构

常用组件：

  1. Column 组件（纵向布局）：沿垂直方向布局其子组件的容器组件（超出父容器组件的宽度或高度的部分不会换行也不会出现滚动条）
    • Column(value) value 参数为一个对象，包括space属性，用于设置垂直方向上子组件之间的间距
      常用属性：
    • alignItems(设置子组件在交叉轴（水平）方向上的对齐方式):
      • HorizontalAlign.Start:水平方向上左对齐
      • HorizontalAlign.Center：默认值，水平方向上居中对齐
      • HorizontalAlign.End：水平方向上右对齐
    • justifyContent（设置子组件在主轴（垂直）方向上的对齐方式）：
      • FlexAlign.Start：默认值，垂直方向上首端对齐
      • FlexAlign.Center：垂直方向上中心对齐
      • FlexAlign.End：垂直方向上尾部对齐
      • FlexAlign.SpaceBetween：垂直方向上均匀分布（第一个子组件与首段边沿对齐，最后一个子组件与尾部边沿对齐）
      • FlexAlign.SpaceAround：垂直方向上均匀分布（第一个子组件到首端边沿的距离和最后一个子组件到尾部边沿的距离是相邻子组件之间距离的一半
      • FlexAlign.SoaceEvenly：垂直方向上均匀分布（第一个子组件到首段边沿的距离，最后一个子组件到尾部边沿的距离和相邻子组件之间距离相等）
  2. Row 组件（横向布局）：
    • Row(value)，value参数为一个对象，包含space属性，用于设置水平方向上子组件的间距
      常用属性：
    • alignItems：设置子组件在垂直方向上的对齐方式：
      • VerticalAlign.Top:垂直方向上顶部对齐
      • VerticalAlign.Center：默认值，垂直方向上居中对齐
      • VerticalAlign.Bottom：垂直方向上底部对齐
    • justifyContent：类似于Column
  3. Image 组件（图像）：支持PNG、JPEG、BMP、SVG、WebP、GIF
    • Image（src），src参数用于指定要显示的图像源
      图像源：
      • string类型：常用于加载网络图像
      • Pixelmap类型：用于加载像素图像，常用于图像编辑场景
      • resource类型：常用于加载本地图像，可以将图像放到entry/src/main/resources/base/media目录下，通过$r()函数读取并转换成Resource格式
        常用属性
      • alt：射中图像加载时显示的占位图
      • objectFit：设置图像的填充效果
        • ImageFit.Cover：默认值，保持宽高比进行缩小放大，若图像宽高比与显示区域不同，会被裁剪
        • ImageFit.Contain：保持宽高比进行缩小放大，使图像完全显示在边界内
        • ImageFit.Auto:自适应显示
        • ImageFit.Fill：不保持宽高比进行放大缩小
        • ImageFit.ScaleDowm：保持宽高比，图像缩小或不变
        • ImageFit.None：保持图像原有尺寸
      • interpolation： 设置图片的插值效果
        • ImageInterpolation.Low:默认值，表示图像缩放时使用较低质量的插值算法
        • ImageInterpolation.None:不使用插值算法，可能会导致图像显示锯齿或像素化
        • ImageInterpolation.medium：图像缩放时使用中等质量的插值算法:
        • ImageInterpolation.Hign
      • objectRepeat：设置图像的重复样式
        • ImageRepeat.NoRepeat：默认值， 不重复绘制
        • ImageRepeat.X：水平方向上重复绘制
        • ImageRepeat.Y：垂直方向上重复绘制
        • ImageRepeat.XY：水平和垂直方向上重复绘制
      • renderMode：设置图像的渲染模式为原色或黑白
        • ImageRenderMode.Original：默认值，原色渲染
        • ImageRenderMode.Template：黑白渲染
      • fillColor：设置填充颜色，仅对 SVG 格式生效
  4. Text 组件（文本组件）：Text（content），content参数用于设置文本内容，可以是string类型或Resource类型，前者直接写入文本内容，后者读取本地资源文件(使用$r()函数从entry/src/main/resoureces/zhCN/element目录下的string.json文件)
    常用属性：
    • textAlign:设置文本段落在水平方向的对齐方式
      • TextAlign.Start:默认值，左对齐
      • TextAlign.Center:居中对齐
      • TextAlign.End：右对齐
    • textOverflow：设置文本超长时的显示方式
      • TextOverflow.Clip:默认值，裁剪
      • TextOverflow.Ellipsis：显示不下用省略号代替
      • TextOverflow.None：不进行裁剪
    • lineheight：设置文本的行高
    • fontSize：设置文本的字号
    • fontColor：设置文本的文字颜色
    • fontWeight:设置文本的字体粗细
    • letterSpacing:设置文本字符间距
    • textCase:设置文本大小写
      • TextCase.Normal:默认值，保持原有大小写
      • TextCase.LowerCase:全小写
      • TextCase.UpperCase:全大写
    • decoration:设置文本装饰样式及颜色
      • TextDecorationType.None：默认值，不使用文本装饰线
      • TextDecorationType.Overline：文本上方添加上划线
      • TextDecorationType.Underline：文本下方添加下划线
      • TextDecorationType.LineThrough：添加删除线
      • 文本装饰线默认黑色: Color.Black
  5. TextInput 组件（单行文本输入框）：TextInput(value)，value参数时应该TextInputOptions类型的对象，包含placeholder属性（无输入时的提示文本），text属性（设置单行文本输入框当前的文本内容）：
    常用属性：
    • type：类型：
      • InputType.Normal:默认值，基本输入模式（数字、字母、下划线、空格、特殊字符）
      • InputType.Password:密码输入模式（数字、字母、下划线、空格、特殊字符）
      • InputType.Email:邮箱地址输入模式（数字、字母、下划线、一个@字符）
      • InputType.Number:纯数字输入模式
      • InputType.Phonenumber：电话号码输入模式，支持数字、+、-、*、#，长度不限
    • careColor：光标字体颜色
    • placeholderColor：设置placeholder属性对应的文本字体颜色
    • placeholderFont：设置placeholder属性对应的文本样式，包括size属性（文本字号）、weight属性（字体粗细）、family属性（字体列表）、style属性（字体样式）
      常用事件：
    • onChange：输入内容发生变化时触发
    • onSubmit:按下”Enter”时触发
    • onCopy：点击剪切板复制时触发
    • onCut：点击剪切板剪切时触发
    • onPaste：点击剪切板粘贴时触发
  6. Button 组件（按钮）：
    Button(label,options)
    label参数用于设置按钮的文本内容，options参数为一个对象，包含type熟悉和stateEffect属性；当不传递label参数时，可以在Button组件内嵌套其他组件，语法格式如下:
    Button(){
    //其他组件
    }
    常用属性
    • type：设置按钮显示样式
      • ButtonType.Capsule：默认值，表示为胶囊型按钮，圆角半径默认为高度的一半
      • ButtonType.Circle：圆形按钮
      • ButtonType.Normal：普通按钮，不带圆角
  7. slider 组件（滑动条）：通常用于快速调节设置值，常用在音量调节、亮度调节等
    slider（options） options参数为一个对象，用于设置滑动条的各种配置属性，常用配置属性如下：
    • value：设置当前进度值
    • min：设置最小值，默认0
    • max：设置最大值，默认100
    • step：设置滑动条的滑动步长，默认为1，当值小于0，按默认值显示
    • style：设置滑动条的滑块与滑轨显示样式：
      • SliderStyle.OutSet：默认值，表示滑块在滑轨上
      • SliderStyle.Inset：表示滑块在滑轨内
    • direction：涉资滑动条滑动方向为水平方向还是竖直方向：
      • Axis.Horizontal：默认值，滑动方向为水平方向
      • Axis.Vertical：表示滑动方向为竖直方向
    • reverse：设置滑动条取值范围是否反向，横向滑动条默认从左往右滑动，竖向滑动条默认为从上往下滑动：默认为false，表示滑动条取值范围是正向的，若值为true，表示滑动条的取值范围是反向的
      常用属性：
    • blockColor：设置滑块的颜色
    • trackColor：设置滑轨的背景颜色
    • selectedColor：设置滑轨的已滑动部分颜色
    • showSteps：设置当前是否显示步长刻度值，默认值为false
    • showTips：设置滑动时是否显示百分比气泡提示，默认值为false
    • trackThickness：设置滑轨的粗细，当配置属性style的值为SliderStyle.OutSet时，默认值为4，为SliderStyle.InSet时，默认值为20
  8. Scroller 组件（滚动）：可滚动的容器组件，在scroll组件中，只能放置一个子组件
    Scroll（scroller）：srcoller参数用于控制Scroll组件的滚动，scroller对象的常用属性：
    • scrollEdge：设置滚动到容器的哪个边缘：
      • Edge.Top：垂直方向的顶部
      • Edge.Bottom：垂直方向的底部
      • Edge.Start：水平方向的起始位置
      • Edge.End：水平方向的末尾位置
    • scrollPage：设置滚动到下一页还是上一页，接收一个对象为参数，该对象中包含一个next属性，表示是否向下翻页
      组件的常用属性：
    • scrollable：设置滚动方向：
      • ScrollDirection.Vertical：默认值，垂直方向上滚动
      • ScrollDirection.Horizontal：水平方向上滚动
      • ScrollDirection.None：不可滚动
    • scrollBar：设置滚动条状态：
      • BarState.Auto：默认值，按需显示，在触摸时显示，2s后消失
      • BarState.On：常驻显示。
      • BarState.Off：不显示
    • scrollBarColor：设置滚动条的颜色
    • scrollBarWidth：设置滚动条的宽度，不支持百分比，默认值为4
    • edgeEffect：设置边缘滑动效果:
      • EdgeEffect.None：默认值，表示滑动到边缘后无效果
      • EdgeEffect.Spring：表示滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹
      • EdgeEffect.Fade：表示滑动到边缘后会显示圆弧状的阴影
        组件区域变化事件：onAreaChange：其事件处理程序接受2个参数：oldValue和newValue：
    • oldValue表示目标组件变化之前的宽度、高度以及目标组件相对父组件和页面左上角的坐标位置
    • newValue：表示目标组件变化之后的宽度、高度以及目标组件相对父组件和页面左上角的坐标位置
  9. list 组件（列表）：List(value)：value参数为一个对象，包含spcae：设置列表项的间距；initalindex：设置列表项的初始索引位置；scroller：用于控制List组件的滚动
    组件的常用属性：
    • listDirection：设置列表项的排列方向：
      • Axis.Vertical：默认值，表示纵向排列
      • Axis。Horizontal：表示横向排列
    • divider：设置列表项分割线的样式，默认无分割线，属性的属性值为一个对象，该对象常用属性如下：
      • strokeWidth：设置分割线的宽度
      • color：用于设置分割线的颜色
      • startMargin：设置分割线与列表项侧边起始段的距离
      • endMargin：设置分割线与列表项侧边结束端的距离
    • edgeEffect：设置列表的边缘滑动效果
  10. Flex 组件（弹性）： 包含两根轴，主轴（水平方向），交叉轴（垂直方向），子组件默认沿主轴排列：Flex（value），value参数为一个对象，用于设置弹性布局相关的配置属性：
  • direction：设置Flex容器中子组件的排列方向，即主轴的方向：
    • FlexDirection.Row：默认值：从左到右的水平方向
    • FlexDirection.RowReverse：主轴从右往左的水平方向
    • FlexDirection.Column：主轴从上往下的垂直方向
    • FlexDirection.ColumnReverse：从下到上的垂直方向
  • warp：设置Flex容器中子组件的换行方式：
    • FlexWarp.NoWarp：默认值，不允许换行，Flex容器为单行或单列（可能会溢出）
    • FlexWarp.Warp：允许换行，如果容器为多行或多列，子组件溢出部分会被放置到新的一行，第一行显示在上方
      FlexWarp.WarpReverse：反方向换行，第一行显示在下方
  • justifyContent：设置Flex容器中子组件在主轴方向上的对齐方式：
    • FlexAlign.Start：默认值：表示子组件在主轴方向上首端对齐，第一个子组件与首端边沿对齐，后续字、子组件与前一个子组件对齐
    • FlexAlign.Center：主轴方向上中心对齐
    • FlexAlign.End：主轴方向上尾部对齐
    • FlexAlign.SpaceBetween：主轴方向上均匀分布子组件，相邻子组件之间距离相同，第一个子组件与首端边沿对齐，最后一个子组件与尾部边沿对齐
    • FlexAlign.SpaceAround：主轴方向上均匀分布，相邻子组件之间距离相同，第一个子组件到首端边沿的距离和最后一个子组件到尾部边沿的距离是相邻子组件之间距离的一半
    • FlexAlign.SpaceEvenly：主轴方向上均匀分布子组件
  • alignItems：设置 Flex 容器中子组件在交叉轴方向上的对齐方式：
    • ItemAlign.Stretch：子组件在容器中在交叉轴方向拉伸填充
    • ItemAlign.Start:默认值，在交叉轴方向首部对齐
    • ItemAlign.Center：交叉轴方向居中对齐
    • ItemAlign.End：交叉轴方向尾部对齐
    • ItemAlign.Auto：使用 Flex 容器中默认配置
    • ItemAlign.Baseline：在交叉轴方向文本基线对齐
  • alignContent：设置多轴线的对齐方式，适用于多行排列的情况，默认值是 FlexAlign.Start，属性值参考 justifyContent 属性
  1. Grid 组件（网格）：由行和列的单元格组成，只能放置GridItem子组件
    语法格式： Grid（scroller），scroller 参数用于控制Grid组件的滚动
    常用属性：
  • columnsTemplate：设置当前网格布局列的数量，不设置时默认一列，如’1fr 1fr 2fr’
  • rowsTemplate：设置当前网格布局行的数量
  • columnsGap：设置列与列的间距，默认0
  • rowsGap：设置行与行的间距，默认0
  1. Stack 组件（堆叠）：堆叠容器组件，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件
    语法格式：Stack（value），value 参数为一个对象，对象可以包含一个 alignContent 属性，用于设置子组件在堆叠方向上的对齐方式
    alignContent属性的常用属性值：
  • Alignment.TopStart：表示子组件位于顶部起始端
  • Alignment.Top：表示子组件位于顶部尾端
  • Alignment.TopEnd：表示子组件位于顶部尾端
  • Alignment.Start：表示子组件位于横向和纵向居中
  • Alignment.Center：表示子组件位于底部起始端
  • Alignment.End：表示子组件位于尾端纵向居中
  • Alignment.BottomStart：表示子组件位于底部起始段
  • Alignment.Bottom：表示子组件位于底部横向居中
  • Alignment.BottomEnd：表示子组件位于底部尾端

组件多态样式

ArkUI 提供了stateStyles()方法用于实现组件多态样式，语法格式如下：
stateStyles(value)：value参数为一个对象，用于设置组件不同内部状态的样式
常见的组件内部状态：

  • normal：组件无状态
  • pressed：组件按下状态
  • disabled：组件禁用状态
  • foused：组件获取焦点状态
  • clicked：组件点击状态
  • selected：组件选中状态

双向数据绑定

组件的状态和变量的值绑定，组件的状态变化会自动更新变量的值，变量的值的变化会自动更新组件状态，CheckBox 组件、Slider 组件、TextInput 组件等支持双向数据绑定

  • 实现双向数据绑定，首先要先定义状态变量，语法格式：@state 变量名:类型 = 值;
  • 双向数据绑定的方式分为绑定参数和绑定属性：
    • 绑定参数的语法格式：组件名({参数名:$$this.变量名})
    • 绑定属性的语法格式：
      组件名()
      .属性名($$this.变量名)

渲染语句

  1. 条件渲染语句：根据某个条件决定是否渲染某个组件
  2. 循环渲染语句：使用 ForEach() 函数
    ForEach（
    arr:Array,
    itemGenenator:(item:类型,index?:number) => void,
    keyGenerator?:(item:类型,index?:number):string =>string
    )
    • arr 表示数据源，是一个数组
    • itemGenerator 表示组件生成函数，item 参数表示数组中元素的值，index表示数组中元素的索引
    • keyGenerator 表示键生成函数

组件的导出和导入

  • 使用 export 关键字可以对组件进行到处，可以添加 default 关键字实现默认导出
  • 使用 import 关键字 可以对组件进行导入，导入后，在 build()方法中通过 组件名() 的方式可以使用组件

组件代码复用

  1. @Syles 装饰器：用于装饰一个方法，被装饰的方法可以编写多条通用属性和通用事件的代码，通过组件调用该方法即可复用方法中的代码
    • 在 struct 外使用 @Styles 装饰器定义方法，可以在同一文件的所有 struct 中使用
      @Styles
      function 方法名(){}
    • 在struct内使用 @styles 装饰器定义方法，只能在对应的 struct 中使用
      @Styles
      方法名(){}
  2. @Extend 装饰器与 @Styles 装饰器功能类似，@Extend 装饰器支持组件的私有属性和私有事件的代码，允许传递参数，且支持在 struct 外定义方法
  3. @Builder 装饰器：用于装饰一个函数，被装饰的函数被称为自定义构建函数
    • 值传递（复制）
    • 引用传递（同一个对象）

页面跳转

1.
2. 页面返回: router.back(options)

动画

  1. 属性动画