写点什么

【每日学点 HarmonyOS Next 知识】scroller 手动停止、每秒执行、网页自定义键盘、web 组件注入样式、安全区域

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

    阅读完需:约 8 分钟

【每日学点HarmonyOS Next知识】scroller手动停止、每秒执行、网页自定义键盘、web组件注入样式、安全区域

1、HarmonyOS scroller 有没有手动停止的方法?

可以使用 scrollTo 方法来滑动到指定位置


// demo.etsimport Curves from '@ohos.curves'
@Entry@Componentstruct ScrollExample { scroller: Scroller = new Scroller() private arr: number[] = []
aboutToAppear(): void { for (let i = 0; i < 100; i++) { this.arr.push(i) } }
build() { Stack({ alignContent: Alignment.TopStart }) {
Scroll(this.scroller) { Column() { ForEach(this.arr, (item: number) => { Text(item.toString()) .width('90%') .height(150) .backgroundColor(0xFFFFFF) .borderRadius(15) .fontSize(16) .textAlign(TextAlign.Center) .margin({ top: 10 }) }, (item: string) => item) }.width('100%') } .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 .scrollBar(BarState.On) // 滚动条常驻显示 .scrollBarColor(Color.Gray) // 滚动条颜色 .scrollBarWidth(10) // 滚动条宽度 .friction(0.6) .edgeEffect(EdgeEffect.Spring) .onScroll((xOffset: number, yOffset: number) => { console.info(xOffset + ' ' + yOffset) }) .onScrollEdge((side: Edge) => { console.info('To the edge') }) .onScrollStop(() => { console.info('Scroll Stop') })
Button('中断,执行其他逻辑') .height('5%') .onClick(() => { let curve = Curves.interpolatingSpring(10, 1, 228, 30) //创建一个阶梯曲线 const yOffset: number = this.scroller.currentOffset().yOffset; this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset, // animation: { duration: 1000, curve: curve, canOverScroll: true } }) }) .margin({ top: 110, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC) }}
复制代码

2、HarmonyOS 每秒执行一次的函数?

setInterval 重复调用一个函数,在每次调用之间具有固定的时间延迟。删除该定时器需手动调用 clearInterval 接口


参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-timer-V13#setinterval


setInterval(handler: Function | string, delay: number, ...arguments: any[]): number重复调用一个函数,在每次调用之间具有固定的时间延迟。删除该定时器需手动调用 clearInterval 接口。


setInterval(() => {  console.log('do every 1s.');}, 1000);
复制代码

3、HarmonyOS WebView 使用自定义键盘问题?

在加载的 webview 中,使用自定义的键盘,怎么处理系统键盘的隐藏以及显示,还有显示自定义的键盘及处理获取光标


当使用自定义的键盘时,系统键盘应该被隐藏,以避免冲突。可以通过设置 TextInput 组件的 focusable 属性为 false 来使组件不可获焦,这样就不会拉起系统默认的键盘。可以通过加载自定义键盘的方式,在<web>组件中显示自定义的键盘。具体实现方法是,创建一个包含想要的按键的 HTML 页面,并将其作为<web>组件的 src 属性值。当用户点击该组件时,自定义键盘会自动弹出。可以通过监听键盘事件来获取光标的位置信息。这样一来,就能够在文本编辑过程中根据用户的操作动态地调整光标到正确的位置。


参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-search-V5#ZH-CN_TOPIC_0000001847049860__customkeyboard10

4、HarmonyOS 如何在 web 组件中给 html 注入样式?

参考 demo 给 style 标签注入样式:


//etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct WebComponent { webviewController: web_webview.WebviewController = new web_webview.WebviewController(); private customStyle: string = 'html, body {margin: 0; padding: 0; overflow: hidden; touch-action: none; background:#ace}';
aboutToAppear() { // 配置Web开启调试模式 web_webview.WebviewController.setWebDebuggingAccess(true); }
build() { Column() {
Button('style').onClick((event: ClickEvent) => {
this.webviewController.runJavaScript(`const head = document.head; console.log(head); const style = document.createElement('style'); style.appendChild(document.createTextNode("${this.customStyle}")) head.appendChild(style) `) }) Web({ src: $rawfile('index.html'), controller: this.webviewController }).domStorageAccess(true) } }}// html<!DOCTYPE html><html><head>
</head>
<body><h1 id="text"> 这是一个测试信息,默认字体为黑色,调用runJavaScript方法后字体为绿色,调用runJavaScriptCodePassed方法后字体为红色</h1></body></html>
复制代码

5、HarmonyOS 安全区域问题?

在没有 tabbar 的时候 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])确实可以从屏幕最上方开始,但是一加上 tabbar 就失效了,有什么解决方法吗?


使用沉浸式开发来对导航条进行避让。


请参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5#section202484117114

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

轻口味

关注

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

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

评论

发布
暂无评论
【每日学点HarmonyOS Next知识】scroller手动停止、每秒执行、网页自定义键盘、web组件注入样式、安全区域_HarmonyOS_轻口味_InfoQ写作社区