【每日学点HarmonyOS Next知识】tabs切换卡顿、输入框焦点、打开全新web、输入框密码类型、非法变量值

1、HarmonyOS Tabs控件切换卡顿？

Tabs控件切换时的动画效果有一种卡顿的感觉，请问这个卡顿效果是否有修复的方案？

根因在于tab的滑动切换是在完全切换结束后才会onchange触发，所以才会导致看起来滑动后才切换tabbar。

建议参考如下的示例代码实现切换逻辑：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5#ZH-CN_TOPIC_0000001847050116__示例9

2、HarmonyOS 自定义键盘输入框焦点问题？

调用controller.stopEditing()输入框失去焦点并且收起了键盘，但是跳转到其他页面返回到当前页面时，输入框自动获取焦点并且弹出了键盘，怎么样才能不自动获取焦点和弹出键盘？

可以加下关键性代码，类似于下面按钮上加下 .id('333') 键，然后 focusControl.requestFocus('333') 转移焦点测试下，代码示例可参考：

复制代码

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('收起键盘')
        .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、HarmonyOS 如何实现给定一个url，打开一个全新的 webview 页面？

可以参考demo

复制代码

// 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 {
            // 点击按钮时，通过loadUrl，跳转到local1.html
            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}`);
          }
        })
      // 组件创建时，通过$rawfile加载本地文件local.html
      Web({ src: $rawfile("local.html"), controller: this.controller })
    }
  }
}

4、HarmonyOS TextInput密码类型？

在TextInput设置InputType.Password密码类型下，是否有api能让开发者控制密码是否可见，不是PasswordIcon这种形式，passwordIcon目前只能设置图标，不支持设置大小

可以自定义设置控制密码是否可见的图标，参考如下demo：

复制代码

@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
        })
      // 密码输入框
      Row(){
        // if(this.isClick === true){
        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'？

修改手机状态栏背景为黑色，字体为白色，该怎么处理？

复制代码

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