【每日学点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
@Component
struct 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
@Component
struct 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)
}
}