【HarmonyOS NEXT】TextInput 渲染后如何控制不自动聚焦

最新推荐文章于 2025-09-05 15:06:17 发布

原创最新推荐文章于 2025-09-05 15:06:17 发布 · 773 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos

本文介绍如何在Flutter应用中，通过合理设置TouchableOpacity组件和TextInput的defaultFocus属性，管理页面加载时TextInput的自动聚焦行为，确保用户体验。

【关键字】

TextInput / 自动聚焦 / 组件

【问题描述】

页面模块有搜索功能,但是不希望一进页面TextInput自动聚焦唤起键盘，是否有API能控制不自动聚焦。

【解决方案】

页面中需要有承接焦点的组件，如果没有其他组件，组件中的TextInput就会聚焦，可以将焦点转移实现取消TextInput获取焦点的效果。

示例代码

因为根据是否存在默认交互逻辑，可将组件分为可获焦和不可获焦组件，所以将焦点转移的时候有两种方案：

1、存在默认交互逻辑的组件（默认可获焦）：Button、TextInput等，只需通过将defaultFocus属性设置为true即可获取焦点：

@Entry
@Component
struct Index {
controller: TextInputController = new TextInputController()

build() {
Row() {
TextInput({
placeholder: 'wait input...',
text: '',
controller: this.controller
})
Button('placeholder')
.defaultFocus(true)
}
}
}

2、不存在默认交互逻辑的组件（默认不可获焦）：Text、Image等，通过将focusable设置为true将此类组件转换为可获焦状态后再获取焦点：

@Entry
@Component
struct Index {
controller: TextInputController = new TextInputController()

build() {
Row() {
TextInput({
placeholder: 'wait input...',
text: '',
controller: this.controller
})
Text('placeholder')
.focusable(true)
.defaultFocus(true)
}
}
}