一、样式处理

1.1、样式-语法

1）样式属性
属性方法以 . 链式调用的方式配置系统组件的样式和其他属性

Text('演示')
      .backgroundColor('red')

2）枚举值
对于系统组件，ArkUI还为其属性预定义了一些枚举类型

Text('演示')
      .backgroundColor(Color.Blue)

样式相关属性通过链式函数的方式进行设置
如果类型是枚举的，通过枚举传入对应的值

1.2、样式-单位vp和适配

1）vp 是什么？virtual pixel
屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位 vp；在实际宽度为1440物理像素的屏幕上，1vp 约等于 3px（物理像素）
2）vp实现等比例适配
采用：伸缩布局，网格系统，栅格系统进行布局适配
a、伸缩布局
layoutWeight(flex: number) 占剩余空间多少份，可以使用layoutWeight属性，让右侧内容去占满剩余宽度
b、内容等比例缩放
可以使用aspectRatio属性设置宽高比

vp 是鸿蒙默认单位，和屏幕像素有关，最终表现视觉大小在任何设备一致
鸿蒙一般以伸缩 layoutWeight、网格、栅格进行布局适配，如要等比例缩放可以设置高宽比 aspectRatio

1.3、Image和资源Resource

a）使用Resource下的图片-media
Image($r('app.media.github')).width(80).height(80)

b）使用Resource下的图片-rawfile
Image($rawfile("b.png")).width(80).height(80)
c）使用本地图片-拖一张图片放置到ets目录下-比如assets文件下
Image('/assets/a.png').width(80).height(80)
d）使用网络图片
Image("https://www.baidu.com).width(80).height(80)

尤其注意：使用网络图片时，在preview中时，可以预览，但是在模拟器和真实项目中，必须申请网络权限

"requestPermissions": [{
  "name":"ohos.permission.INTERNET"
}],

1.4、复用样式@styles

在开发过程中会出现大量代码在进行重复样式设置，@Styles 可以帮我们进行样式复用，语法 @Styles function 样式名 () {}

其中在组件内的function可省略，全局的样式中function不可省略
不支持箭头函数写法；
Styles修饰的函数不允许传参数
不允许导出公共使用的样式

@Entry
@Component
struct StyleCase {
  @Styles function textStyle () {  
    .width(120)
    .height(60)
    .borderRadius(30)
    .backgroundColor(Color.Pink)
  }

在struct内的称为组件内样式，在struct外的称为全局样式，如果同时存在，则组件内的优先级高

1.5、复用样式@Extend

假如我们就想针对 Text进行字体和样式的复用，此时可以使用Extend来修饰一个全局的方法

使用 @Extend 装饰器修饰的函数只能是全局
函数可以进行传参，如果参数是状态变量，状态更新后会刷新UI
且参数可以是一个函数，实现复用事件且可处理不同逻辑

//全局  原生组件           样式名     参数
@Extend(Text) function textStyle(callback?: () => void) {
  .width(120)
  .height(60)
  .borderRadius(30)
  .backgroundColor(Color.Pink)
  .textAlign(TextAlign.Center)
  .onClick(() => {
    callback && callback()
  })
}

注意： Styles和Extend均只支持在当前文件下的全局或者组件内部定义，不允许导出公共使用的样式，可以考虑组件复用。Styles和Extend修饰的全局样式不允许在项目中同名，即使没有导出

1.6、多态样式

@Styles和@Extend仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。
ArkUI 提供以下四种状态：
● focused：获焦态。
● normal：正常态。
● pressed：按压态。
● disabled：不可用态。

正常态和和可用态

@Entry
@Component
struct StateStyleCase {
  @State textEnable:boolean = true
  @Styles pressStyle() {  // 设置按压态样式
    .width(200)
    .height(80)
    .backgroundColor(Color.Gray)
    .borderRadius(40)
  }
  @Styles disableStyle() { // 设置不可用态样式
    .backgroundColor(Color.Red)
    .borderRadius(40)
  }
  build() {
    Row() {
      Column({space:40}) {
        Text('测试')
          .textStateStyle()
          .stateStyles({
            pressed: this.pressStyle,
            disabled:this.disableStyle

          })
          .enabled(this.textEnable)

获焦状态
获焦状态最好使用TextInput来测试
坑点- 要同时设置TextInput的normal和focus属性

TextInput()
.stateStyles({
  focused: {
    .border({
      width: 1,
      color: 'red'
    })
  },
  normal: {
    .border({
      width: 0,
      color: 'red'
    })
  },
})

● 使用比较多的应该是 normal pressed 结合下的按压效果
● enabled(true|false) 开启|禁用 focusable(true|false) 开启获取焦点能力|关闭
注意：
● 页面初始化的时候，默认第一个能获取焦点的元素，会自动获取焦点