Input Method Cursor Control, Partial Rounding for Text, Web Component Caching, Grid Issues, PC-Like Web Effects

[Daily HarmonyOS Next Knowledge] Input Method Cursor Control, Partial Rounding for Text, Web Component Caching, Grid Issues, PC-Like Web Effects

1. HarmonyOS Input Method Cursor Control

Implement cursor jumping between components in the onSubmit callback. When using .enterKeyType(EnterKeyType.Next), the keyboard closes by default after pressing Enter, and then focusControl.requestFocus(nextKeyStr) causes the keyboard to close and reopen, resulting in an unsmooth effect. Ideally, setting EnterKeyType.Next should smoothly jump the cursor to the next input field, but onSubmit closes the keyboard by default. How to solve this for a smooth experience? Is custom input method development required?

1. In EntryAbility:

onWindowStageCreate(windowStage: window.WindowStage): void {
  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. Replace code in 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)
      .width('90%')
      .margin({ bottom: this.keyboardHeight })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

2. How to Achieve Partial Rounding for HarmonyOS Text Components

Requirement: Implement rounded corners for the bottom-left and bottom-right of a Text component, while keeping the top-left and top-right corners square.

Solution: Add the borderRadius({ bottomLeft: 10, bottomRight: 10 }) attribute.

@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. How to Get Cache Size/Details and Delete Local Cache for HarmonyOS Browser Web Components

• Clear cached resources using the removeCache() interface:

struct WebComponent {
  @State mode: CacheMode = CacheMode.None;
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('removeCache')
        .onClick(() => {
          try {
            // Set to true to clear both ROM and RAM caches; false to clear only RAM cache
            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)
    }
  }
} 

• Reference the caching solution document: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cookie-and-data-storage-mgmt-V5
  • Cookies are small data segments sent from the server to the client during network access, used for client identity and status recognition.
  • When the SameSite attribute is unspecified, the default is SameSite=Lax, sending cookies only when navigating to the cookie's origin site, not in cross-site requests.
  • The Web component provides the WebCookieManager class to manage cookies, stored in the app sandbox path: /proc/{pid}/root/data/storage/el2/base/cache/web/Cookies.

4. HarmonyOS Grid Fails to Trigger onReachEnd

Implement using the development guide (code): https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-grid-V5#ZH-CN_TOPIC_0000001930676589__edgeeffect10

Enable the rebound effect with .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true }), which will trigger onReachEnd.

5. HarmonyOS Web Loads Local HTML in PC-Like Layout

Add the following meta tag to the head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">