写点什么

【每日学点 HarmonyOS Next 知识】输入法光标控制、Text 部分圆角、Web 组件缓存、Grid 问题、Web 出现 PC 效果

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

    阅读完需:约 9 分钟

【每日学点HarmonyOS Next知识】输入法光标控制、Text部分圆角、Web组件缓存、Grid问题、Web出现PC效果

1、HarmonyOS 输入法光标控制?

在 onSubmit 回调里写组件间的光标跳转。onSubmit 回车之后【.enterKeyType(EnterKeyType.Next)】默认会把键盘关闭,我再去 focusControl.requestFocus(nextKeyStr)就会呈现一个键盘先关闭再弹起的效果,这样看起来很不流畅,按理想状态来说,设置了 EnterKeyType.Next 点击‘下一步’应该是流畅的光标跳转到下一个输入框吧?但是 onSubmit 默认会关闭键盘。有什么办法解决流畅问题的?是要去自定义输入法吗?


  1. 在 EntryAbility 中


//将 onWindowStageCreate(windowStage: window.WindowStage): void方法替换为:
onWindowStageCreate(windowStage: window.WindowStage): void { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
windowStage.loadContent('pages/Index', (err) => { if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return;}hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
AppStorage.setOrCreate('windowStage',windowStage);});
}
复制代码


  1. 将 Index.ets 中代码替换为:


import { window } from '@kit.ArkUI'@Entry@Componentstruct ListExample {  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]  selectIndex:number = 0  scroller: Scroller = new Scroller()  @State keyboardHeight:number = 0  aboutToAppear() {    let windowClass: window.Window = (AppStorage.get('windowStage') as window.WindowStage).getMainWindowSync()    windowClass.on('keyboardHeightChange', (data) => {      this.keyboardHeight = px2vp(data)    });  }  build() {    Column() {      List({ space: 20, initialIndex: 0,scroller:this.scroller }) {        ForEach(this.arr, (item: number) => {          ListItem() {            Column(){              Text('a' + item + '-' + this.keyboardHeight)                .width('100%').height(100).fontSize(16)                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)              TextInput().width('100%').height(80)                .margin({top:10})                .id('a'+item)                .onFocus(()=>{                  console.log('focus:  a'+item)                  this.selectIndex = item                  console.log('aaa' + this.selectIndex)                })                .onSubmit((enterKey: EnterKeyType, event: SubmitEvent)=>{                focusControl.requestFocus('a'+(this.selectIndex+1));                this.scroller.scrollToIndex(this.selectIndex+1,true);                event.keepEditableState();              })            }          }        }, (item: string) => item)      }      .listDirection(Axis.Vertical) // 排列方向      .scrollBar(BarState.Off)      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring      .width('90%')      .margin({  bottom: this.keyboardHeight })    }    .width('100%')    .height('100%')    .backgroundColor(0xDCDCDC)    .padding({ top: 5 })
}}
复制代码

2、HarmonyOS text 组件如何实现部分圆角?

text 组件如何实现部分圆角 咨询场景描述:text 组件期望实现左下和右下位置圆角,左上和右上位置不进行圆角,请问该如何实现


可以添加 borderRadius({bottomLeft : 10,bottomRight : 10})属性实现,参考 demo:


@Entry@Componentstruct TextExample6 {  @State text: string = '你叫什么名字'  build() {    Column() {      Text(this.text)        .fontSize(16)        .border({ width: 1 })        .lineHeight(20)        .maxLines(1)        .width(300)        .margin({ left: 20, top: 20 })        .borderRadius({          bottomLeft : 10,          bottomRight : 10        })    }.margin({      top : 200    })  }}
复制代码

3、HarmonyOS 浏览器 Web 组件如何获取缓存数据大小或缓存数据明细,如何删除本地缓存数据?

可以通过 removeCache()接口清除已经缓存的资源,参考 demo:


struct WebComponent {  @State mode: CacheMode = CacheMode.None;  controller: web_webview.WebviewController = new web_webview.WebviewController();
build() { Column() { Button('removeCache') .onClick(() => { try { // 设置为true时同时清除rom和ram中的缓存,设置为false时只清除ram中的缓存 this.controller.removeCache(true); } catch (error) { let e: business_error.BusinessError = error as business_error.BusinessError; console.error(`ErrorCode: ${e.code}, Message: ${e.message}`); } }) Web({ src: 'www.huawei.com', controller: this.controller }) .cacheMode(this.mode) } }}
复制代码


可以参考缓存方案文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cookie-and-data-storage-mgmt-V5Cookie是网络访问过程中,由服务端发送给客户端的一小段数据。客户端可持有该数据,并在后续访问该服务端时,方便服务端快速对客户端身份、状态等进行识别。当 Cookie SameSite 属性未指定时,默认值为 SameSite=Lax,只在用户导航到 cookie 的源站点时发送 cookie,不会在跨站请求中被发送。Web 组件提供了 WebCookieManager 类,用于管理 Web 组件的 Cookie 信息。Cookie 信息保存在应用沙箱路径下/proc/{pid}/root/data/storage/el2/base/cache/web/Cookiesd 的文件中。

4、HarmonyOS 设备上 Grid 无法触发 onReachEnd?

参考开发指南(代码)实现:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-grid-V5#ZH-CN_TOPIC_0000001930676589__edgeeffect10使用.edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })这样就能触发回弹效果,同时也就能触发 onReachEnd

5、HarmonyOS web 加载本地 html 显示的为 pc 端网页效果?

head 中添加 meta 即可 <meta name="viewport" content="width=device-width, initial-scale=1.0"\>


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

轻口味

关注

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

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

评论

发布
暂无评论
【每日学点HarmonyOS Next知识】输入法光标控制、Text部分圆角、Web组件缓存、Grid问题、Web出现PC效果_HarmonyOS_轻口味_InfoQ写作社区