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

发布于:2025-03-06 ⋅ 阅读:(10) ⋅ 点赞:(0)
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
@Component
struct 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
@Component
struct 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-V5
Cookie是网络访问过程中,由服务端发送给客户端的一小段数据。客户端可持有该数据,并在后续访问该服务端时,方便服务端快速对客户端身份、状态等进行识别。
当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"\>


网站公告

今日签到

点亮在社区的每一天
去签到