【鸿蒙开发从0到1 day08】

一.联合类型

• 可以让一个变量可以存储多个类型的数据,类型与类型之间用 | 隔开
• let score: string | number = 100
• score = ‘A+’
• 也可以用在接口上面
• interface Person{
  name: string
  height: string | number
  }
• 也可以用来约束变量的值在一组范围内
• 

二.枚举类型

是一种特殊的数据类型,在一组范围内去选择值

• 枚举定义方法
• enum 枚举名{
  常量1 = 值
  常量2 = 值
  …
  }
  

三.组件和样式

1. ArkUI基本语法

• 方舟开发框架{简称:ArkUI)，是一套构建HarrnonyOS应用界面的框架。

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

• 基础语法

• 组件名(参数){
  内容
  .属性
  .属性
  }.属性
  

    组件								描述
    Text							   显示文本
    image                          显示图片
    Column						列:内容垂直排列
    Row 							行:内容水平排列
    Button							按钮
  

属性

• :width 宽
• height 高
• backgroundColor:()//背景颜色
• margin 外边距
  
  运行结果:
  
  注意点:
• 安全区 -> 显示状态栏
• 处理安全区 ->页面内容会深入到安全区(布局形式 沉浸式布局)
• 2.百分比取值 ->相对单位
• -父级组件中有宽高设置,子组件就会相对父级组件的宽高
• –如果父级组件没有设置宽高属性,子组件就相对手机屏幕来计算结果
• 组件默认宽高是由内容撑开
• 内容默认居方式
• 如果colum组件的宽度大于内容的宽度,内容默认水平居中
• 如果Row的高度大于内容的高度,内容默认垂直居中

四.尺寸

• vp : virtuall pixcl虚拟像素【推荐使用】
• 会根据不同设备的显示能力，自动进行转接成对应 px物理像素，保证不同设备视觉一致当数值不带单位时，默认单位vp
• 基于目前预览器和常规手机的显示能力，vp和px的对应关系，大约为3倍，1vp = 3px
  
  

五.字体

1.字体颜色

有三种

• 系统自带的枚举颜色
• 利用十六进制
• 利用rgba设置
  

2.字体样式

• 设置字体是否倾斜 fontStyle
• 字体粗细 fontWeight 400是默认 700是加粗 也可以在FontWeight枚举中去找

3.LineHeight() 设置行高 上间距+文字+下间距

运行结果:

4.下划线:

运行结果:

5.对齐方式

(1)水平对齐方式

(2)垂直对齐方式

6.文本缩进和文本省略号设置

• 文本缩进的字体个数,用字体倍数来表述
• 文本省略号,传入的是一个对象,这个必须搭配maxLines(显示行数)使用
  

六.图片

• 本地图片: Image($r(‘app.media.图片名称’))
• 网络图片: Image(‘url地址’)
• 如果图片只设置一个宽度,那么另一个高度就会等比例缩放
• 宽高比 如果宽度设置了尺寸,又设置了宽高比,取值一般会设置为1->含义宽高会保持一致

1.图片的等比例缩放

2.占位符

• 图片在加载失败时候,显示占位符中的图片
  

3.图片填充

**

七.总结

本章主要学习了arkTs中的联合类型和枚举,然后就是arkUI里面的基础知识点,认识了常用的一些组件,arkUI中字体的一些布局方式,字体的样式,以及图片组件和文本组件的的对齐方式,其次要注意文本组件中文本缩进和文本溢出的使用