以下是针对鸿蒙开发中你所提出的四种场景分别实现相应效果的代码示例:
环境准备
确保你已经安装了 DevEco Studio 并且配置好了 HarmonyOS SDK 开发环境。
代码实现
import { FocusController } from '@ohos.arkui.UIContext';
@Entry
@Component
struct FocusExample {
private inputFocusControl: FocusController = new FocusController();
build() {
Column({ space: 50 }) {
// 场景一:TextInput主动获取焦点
Column({ space: 10 }) {
Text('场景一:TextInput主动获取焦点')
.fontSize(18)
.fontWeight(FontWeight.Bold)
TextInput({ placeholder: '第一个输入框' })
.width('90%')
.focusable(true)
.key("ABC")
Button('让第一个输入框获取焦点')
.width('90%')
.onClick(() => {
this.inputFocusControl.requestFocus("ABC");
})
}
// 场景二:页面初次构建完成时,使第二个TextInput获取默认焦点
Column({ space: 10 }) {
Text('场景二:页面初次构建完成时,使第二个TextInput获取默认焦点')
.fontSize(18)
.fontWeight(FontWeight.Bold)
TextInput({ placeholder: '第二个输入框' })
.defaultFocus(true)// 页面首次打开时,该TextInput获取焦点
.width('90%')
.focusable(true)
}
// 场景三:页面初次构建完成时,使TextInput获取焦点且不弹出键盘
Column({ space: 10 }) {
Text('场景三:页面初次构建完成时,使TextInput获取焦点且不弹出键盘')
.fontSize(18)
.fontWeight(FontWeight.Bold)
TextInput({ placeholder: '第三个输入框' })
.defaultFocus(true)// 页面首次打开时,该TextInput获取焦点
.enableKeyboardOnFocus(false)// TextInput通过点击以外的方式获焦时,是否绑定输入法。
.placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 })
.caretColor(Color.Blue)
.width('90%')
}
// 场景四:页面初次构建完成时,使TextInput不获取焦点且不弹出键盘
Column({ space: 10 }) {
Text('场景四:页面初次构建完成时,使TextInput不获取焦点且不弹出键盘')
.fontSize(18)
.fontWeight(FontWeight.Bold)
TextInput({ placeholder: '第四个输入框' })
.width('90%')
}
}
.width('100%')
.padding({ top: 50 })
}
}
代码解释
场景一:TextInput主动获取焦点
- 点击按钮时,调用
requestFocus
方法可以主动让焦点转移至参数指定的组件上。
场景二:页面初次构建完成时,使第二个TextInput获取默认焦点
- 在
TextInput
组件中设置defaultFocus: true
,这样页面创建后该输入框会自动获取焦点。
场景三:页面初次构建完成时,使TextInput获取焦点且不弹出键盘
- 设置
defaultFocus: true
使输入框在页面创建后获取焦点。 - 调用
enableKeyboardOnFocus(false)
方法,确保输入框获取焦点时不弹出键盘。
场景四:页面初次构建完成时,使TextInput不获取焦点且不弹出键盘
-
TextInput
组件默认不会获取焦点,也不会弹出键盘,所以不需要额外设置。
运行项目
将上述代码复制到 DevEco Studio 中,点击运行按钮,选择合适的模拟器或真机设备,即可看到四种场景的效果。