写点什么

【每日学点 HarmonyOS Next 知识】Web Header 更新、状态变量嵌套问题、自定义弹窗、stack 圆角、Flex 换行问题

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

    阅读完需:约 6 分钟

【每日学点HarmonyOS Next知识】Web Header更新、状态变量嵌套问题、自定义弹窗、stack圆角、Flex换行问题

1、HarmonyOS 有关 webview Header 无法更新的问题?

业务 A 页面 打开 webivew B 页面,第一次打开带了 header 请求,然后退出 webview B 页面,然后动态更新了 header 参数 但是抓包发现。第二次 webview 的请求是没有 header 的 其他: headers 里的参数一直有在动态更新,debug 发现每次触发 prefetchPage 或 loadUrl 都是更新了 header,但是实际请求没有更新,而且 header 为空了。


prefetchPage 会对同一 url 进行缓存,缓存时间为 5min,且无法判断当前 url 是否缓存,使用 prefetchPage 对已缓存的 url 再次请求时不会触发真正的请求,也不会带上 header。


使用 loadUrl,需要注意的是,在同时使用 onControllerAttached 时,为了防止 Web 组件时序问题,在 web src 处需要写入空字符串。参考 API 文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#ZH-CN_TOPIC_0000001847210168__setcustomuseragent10


示例代码:


Web({ src: "", controller: this.webViewController })  .onLoadIntercept(event => {    if (event && event.data && event.data.getRequestUrl()) {      let url = event.data.getRequestUrl()    }    return false  })  .onControllerAttached(() => {    console.info("yyyyy onControllerAttached")    let headers = new Array<webview.WebHeader>()    headers.push({ headerKey: 'AUTHORIZATION', headerValue: 'test value' })    // this.webViewController.prefetchPage(this.loadUrl, headers)    this.webViewController.loadUrl(this.loadUrl, headers)  })
复制代码

2、HarmonyOS 嵌套一层的数组无法监听相同数据增加,但是无嵌套的数组可以监听相同数据增加?

嵌套一层的数组无法监听相同数据增加,但是无嵌套的数组可以监听相同数据增加


ArkUI 的变化是与 @State 的变量有关系的,嵌套数组里数据是已经发生变化了,但是 UI 监听不到深层的,这边建议修改对应代码如:


@State data5:Array<RequestData4> =  []Text("原生数据:\n" + JSON.stringify(this.data5) ?? "2333").padding(10).fontColor(Color.Black)this.data5 = JSON.parse(JSON.stringify( this.data.data5))
复制代码

3、HarmonyOS 自定义弹窗如何在工具类中使用?

在 class 中定义了 CustomDialogController 在组件中调用的时候 没有反应不会弹出弹窗来 ,想问一下 CustomDialog 如何写在工具类中,让组件调用并且可以传入内容


自定义弹窗的 CustomDialogController 只能在 @component 中使用,外部返回时会失效。 弹框场景更推荐使用 promptAction.openCustomDialog,后续弹框也主要是基于 promptAction 做演进。开发者主要需要自定义弹框内容的 buillder,使用参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-promptaction-V5

4、HarmonyOS stack 设置圆角不生效?

参考代码:


@Entry@Componentstruct StackExample {  build() {    Stack({ alignContent: Alignment.Center }) {      Text('First child, show in bottom').width('90%').height('80%').backgroundColor(0xd2cab3).align(Alignment.Top)      Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)    }.width('100%').height(150).margin({ top: 300 }).borderRadius(33).backgroundColor(Color.Red)  }}
复制代码

5、HarmonyOS Flex 组件设置不换行怎么能避免被截断?

UI 中通过 Flex 展示小标签,产品要求只在一行展示,展示不下就不展示了。目前通过 Flex 组件实现标签列表的展示,设置成 NoWrap 属性后,标签会一直平铺下去,且最后展示的标签还会被截断。如果不想被截断设置成 Wrap 属性后,又无法限制单行显示。请问如何操作?


给父组件设置高度,加上 clip 裁剪属性,文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5


参考以下 demo:


@Entry@Componentstruct Test66 {  @State arr: string[] = ['西安市', '成都市22','成都市33','成都市44','成都市55','成都市66', '重庆市', '乌鲁木齐市', '北京市', '呼伦贝尔市', '北京市333'];  build() {    Column() {      Flex({  wrap: FlexWrap.Wrap }) {        ForEach(this.arr, (item: string) => {          Text(item)            .fontSize('16vp')            .borderWidth('1vp')            .borderColor('#666666')            .borderRadius('10vp')            .padding('3vp')            .height(100)        })      }    }.width('100%').height(100).backgroundColor(0xDCDCDC).clip(true)  }}
复制代码


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

轻口味

关注

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

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

评论

发布
暂无评论
【每日学点HarmonyOS Next知识】Web Header更新、状态变量嵌套问题、自定义弹窗、stack圆角、Flex换行问题_HarmonyOS_轻口味_InfoQ写作社区