鸿蒙NEXT arkUI TextInput组件获取焦点的几种场景

鸿蒙NEXT arkUI TextInput组件获取焦点的几种场景详解：

场景一：TextInput主动获取焦点

调用focusControl.requestFocus接口可以主动让焦点转移至参数指定的组件上。

可参考如下代码：

@Entry
@Component
struct TextInputExample {
  build() {
    Row() {
      Column() {
        Button('第二个获取焦点')
          .onClick(() => {
            focusControl.requestFocus('BBB'); // 让第二个输入框获取焦点
          })
 
        TextInput({ placeholder: 'Please enter the content.' })
          .showUnderline(true)
          .width(380)
          .height(60)
          .key('AAA')
        TextInput({ placeholder: 'Please enter the content.' })
          .showUnderline(true)
          .width(380)
          .height(60)
          .key('BBB')
      }
      .width('100%')
    }
    .height('100%')
  }
}

场景二：页面初次构建完成时，使第二个TextInput获取默认焦点

设置defaultFocus属性，defaultFocus可以使绑定的组件成为页面创建后首次获焦的焦点。

可参考如下代码：

@Entry
@Component
struct TextInputExample {
  build() {
    Row() {
      Column() {
        TextInput({ placeholder: 'Please enter the content.' })
          .showUnderline(true)
          .width(380)
          .height(60)
 
        TextInput({ placeholder: 'Please enter the content.' })
          .showUnderline(true)
          .defaultFocus(true) // 页面首次打开时，该TextInput获取焦点
          .width(380)
          .height(60)
      }
      .width('100%')
    }
    .height('100%')
  }
}

场景三：页面初次构建完成时，使TextInput获取焦点且不弹出键盘

设置enableKeyboardOnFocus(false)，在页面进入后不弹出键盘。

可参考如下代码：

@Entry
@Component
struct TextInputExample {
  build() {
    Row() {
      Column() {
        TextInput({ placeholder: 'Please enter the content.' })
          .defaultFocus(true) // 页面首次打开时，该TextInput获取焦点
          .enableKeyboardOnFocus(false) // TextInput通过点击以外的方式获焦时，是否绑定输入法。
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .caretColor(Color.Blue)
          .width('95%')
          .height(40)
          .margin(20)
      }
      .width('100%')
    }
    .height('100%')
  }
}

场景四：页面初次构建完成时，使TextInput不获取焦点且不弹出键盘

TextInput默认不获取焦点，不弹出键盘。

可参考如下代码：

@Entry
@Component
struct TextInputExample {
  build() {
    Column() {
      TextInput({ placeholder: 'Please enter the content.' })
    }
    .width('100%')
  }
}