Tabs Switching Lag, Input Focus, Opening New Web Pages, Password Input Type, Illegal Variable Value

[Daily HarmonyOS Next Knowledge] Tabs Switching Lag, Input Focus, Opening New Web Pages, Password Input Type, Illegal Variable Value

1. HarmonyOS Tabs Control Switching Lag?

The animation when switching Tabs controls feels laggy. Is there a fix for this?

Root Cause: The onchange event for tab sliding triggers only after the switch completes, causing the tab bar to appear to switch after the slide animation.

Solution: Implement switching logic using the example code here:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5#ZH-CN_TOPIC_0000001847050116__%E7%A4%BA%E4%BE%8B9

2. HarmonyOS Custom Keyboard Input Focus Issue?

Calling controller.stopEditing() removes focus from the input and hides the keyboard. However, when navigating back to the page, the input regains focus and shows the keyboard. How to prevent this?

Solution: Add a key to the button (e.g., .id('333')) and transfer focus using focusControl.requestFocus('333').

Example Code:

import router from '@ohos.router';
@Entry
@Component
struct KeyboadPage2 {
  controller: TextInputController = new TextInputController();
  @State inputValue: string = "";
  @State InputBGColor: string = '#90EE90';

  build() {
    Column({ space: 10 }) {
      TextInput({
        controller: this.controller,
      })
        .id('111')
        .backgroundColor(this.InputBGColor)
        .margin(10)
        .border({ width: 1 })
        .height('48vp')
        .onFocus(() => {
          this.InputBGColor = '#FF0000';
        })
        .onBlur(() => {
          this.InputBGColor = '#90EE90';
        });

      Button('Hide Keyboard')
        .onClick(() => {
          setTimeout(() => {
            this.controller.stopEditing();
          }, 0);
        })
        .id('333');

      Button('Push')
        .onClick(() => {
          focusControl.requestFocus('333');
          router.pushUrl({
            url: 'pages/Keyboad/KeyboadPage3',
          });
        });
    }
    .height('100%')
    .width('100%');
  }
}

3. How to Open a New Webview Page with a Given URL in HarmonyOS?

Demo Code:

// xxx.ets
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // Navigate to local1.html when the button is clicked
            this.controller.loadUrl($rawfile("local1.html"));
          } catch (error) {
            let e: business_error.BusinessError = error as business_error.BusinessError;
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
          }
        });

      // Load local.html when the component is created
      Web({ src: $rawfile("local.html"), controller: this.controller });
    }
  }
}

4. HarmonyOS TextInput Password Type?

When using InputType.Password, is there an API to toggle password visibility (not using PasswordIcon, which only supports icon customization, not sizing)?

Solution: Customize a visibility toggle icon.

Demo Code:

@Entry
@Component
struct TextInputExample {
  @State text: string = '';
  @State password: string = '';
  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 };
  controller: TextInputController = new TextInputController();
  @State isShowPassword: boolean = false;

  build() {
    Column() {
      TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width('95%')
        .height(40)
        .margin(20)
        .fontSize(14)
        .fontColor(Color.Black)
        .inputFilter('[a-z]', (e) => {
          console.log(JSON.stringify(e));
        })
        .onChange((value: string) => {
          this.text = value;
        });

      // Password Input
      Row() {
        TextInput({ text: $$this.password, placeholder: 'input your password...' })
          .width('95%')
          .height(40)
          .margin(8)
          .type(this.isShowPassword ? InputType.Normal : InputType.Password)
          .maxLength(9)
          .showPasswordIcon(false);

        Image(this.isShowPassword ? $r('app.media.ic_personal_normal') : $r('app.media.ic_personal_focus'))
          .width('25vp')
          .height('25vp')
          .margin({ right: '80vp', bottom: '50%' })
          .position({ x: '85%', y: 15 })
          .onClick(() => {
            this.isShowPassword = !this.isShowPassword;
          });
      }
      .width('100%');
    }
    .width('100%');
  }
}

5. HarmonyOS "Illegal variable value" Error with Decorated Variable 'data'?

How to set the status bar background to black and text to white?

Code Example:

export class GlobalContext {
  private constructor() { }
  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();