一、样式处理
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) 开启获取焦点能力|关闭
注意：
● 页面初始化的时候，默认第一个能获取焦点的元素，会自动获取焦点
