写点什么

【每日学点鸿蒙知识】全局调整字体、h5 选择框无法取消选中、margin 不生效、Length 转换为具体值、Prop 和 link 比较

作者:轻口味
  • 2025-03-06
    北京
  • 本文字数:2291 字

    阅读完需:约 8 分钟

【每日学点鸿蒙知识】全局调整字体、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@Componentstruct 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

发布于: 刚刚阅读数: 5
用户头像

轻口味

关注

🏆2021年InfoQ写作平台-签约作者 🏆 2017-10-17 加入

Android、音视频、AI相关领域从业者。 欢迎加我微信wodekouwei拉您进InfoQ音视频沟通群 邮箱:qingkouwei@gmail.com

评论

发布
暂无评论
【每日学点鸿蒙知识】全局调整字体、h5选择框无法取消选中、margin不生效、Length转换为具体值、Prop和link比较_鸿蒙_轻口味_InfoQ写作社区