【每日学点HarmonyOS Next知识】全局调整字体、h5选择框无法取消选中、margin不生效、Length转换为具体值、Prop和link比较
【每日学点HarmnoyOS Next知识】全局调整字体、h5选择框无法取消选中、margin不生效、Length转换为具体值、Prop和link比较
1、HarmonyOS 是否存在统一调整全局字体大小的方法?
是否存在统一调整全局字体大小的方法
可以用动态属性,自定义class实现AttributeModifier接口,把text需要固定的样式定义,然后在页面的Text地方调用。
参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-attribute-modifier-V5
动态设置组件的属性,支持开发者在属性设置时使用if/else语法,且根据需要使用多态样式设置属性。
2、HarmonyOS web组件里的h5如果动态设置checkbox的checked属性后,点击无法取消?
H5上的confirm需要在web的onConfirm上监听,参考以下代码:
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({
src: '',
controller: this.controller
})
.overScrollMode(OverScrollMode.NEVER)
.width('100%')
.height('100%')
.onControllerAttached(() => {
this.controller.setCustomUserAgent('Mozilla/5.0 (Phone; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile Variflight/6.1.0')
this.controller.loadUrl('https://openapi.variflight.com/html/module/cs/index.html#/detail?id=323')
})
.onConfirm((event) => {
if (event) {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
AlertDialog.show({
title: 'onConfirm',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
event.result.handleCancel()
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.result.handleConfirm()
}
},
cancel: () => {
event.result.handleCancel()
}
})
}
return true
})
.mixedMode(MixedMode.All)
.javaScriptAccess(true)
.domStorageAccess(true)
.overScrollMode(OverScrollMode.NEVER)
}
}
}
3、HarmonyOS 父组件左右设置margin,右侧margin没生效,改成padding就可以了?
父组件左右设置margin,右侧margin没生效,改成padding就可以了
margin作为外边距设置时,子组件里的width百分比设置即为屏幕整个宽度的百分比,然后再根据margin进行排布,所以当子组件宽度合为100%后,另外设margin会把子组件整体移动,超过屏幕宽度。但是设置padding时,子组件本身会先用屏幕宽度减去左右padding宽度,然后剩下的宽度再乘百分比进行子组件显示。
4、HarmonyOS Length 如何转换为具体数值?
.onAreaChange((oldValue,newValue)=>{//this.totalWidth=newValue.width})
newValue.width 是length ,转换成具体的数字?
参考demo:
.onAreaChange((oldValue: Area, newValue: Area) => {
let num: number = 0
num = newValue.width as number
console.log(num.toString())
num = Number(newValue.width)
console.log(num.toString())
})
5、HarmonyOS @Prop和 @link的内存和效率对比,使用大量数据深拷贝的时候,使用link的开销是不是比prop小?
@Prop和 @link的内存和效率对比,使用大量数据深拷贝的时候,使用link的开销是不是比prop小
@Prop和 @link存在数据同步的差异,目前并不支持@Prop和 @link数据深拷贝操作,但从实现方式看@Prop的开销应该小于@link方式@Prop和 @link 主要区别:@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化,变量修改不会影响父组件UI刷新,仅影响当前组件UI刷新@Link装饰的变量也是来自父组件@State修饰变量进行初始化,变量修改不仅会影响当前组件UI刷新,还会影响父组件UI刷新@Link的底层触发逻:
初始渲染:执行父组件的build()函数后将创建子组件的新实例。初始化过程如下:父组件中的@State变量要求必须初始化,父组件中@State变量值会初始化给子组件的@Link变量。子组件的@Link变量值与其父组件的数据源变量保持同步(双向数据同步)。
父组件的@State状态变量包装类通过构造函数传给子组件,子组件的@Link包装类拿到父组件的@State的状态变量后,将当前@Link包装类this指针注册给父组件的@State变量。父组件中状态变量更新,引起相关子组件的@Link的更新:子组件@Link包装类把当前this指针注册给父组件。
父组件@State变量变更后,会遍历所有依赖它的系统组件(elementid)和状态变量(比如@Link包装类),通知他们更新数据。以此实现父组件对子组件的状态数据同步。当子组件中@Link更新后,处理步骤如下:@Link更新后,调用父组件的@State包装类的set方法,将更新后的数值同步回父组件。
子组件@Link和父组件@State分别遍历依赖的系统组件,进行对应的UI的更新。总结起来就是一句话:父组件的状态变量和子组件的@Link变量,双向数据同步,任何一边有变化,都会同步给对方,另外都是状态变量,根据声明式的UI范式的机制,关联的UI组件都会被重新渲染刷新。
参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-link-V5