arkUI:文本框、文本域的创建和常见用法(TextInput 、TextArea)
1 主要内容说明
简单记录arkUI文本框和文本域的基本创建及使用方法。源码添加了许多注释,足够用于理解,且没有很复杂的内容,所以便不过额外多做文字说明了。
2 例子
2.1 文本框、文本域的创建(TextInput 、TextArea)
文本框和文本域的简单创建。
2.1.1 源码1 (文本框、文本域的创建)
/**
* 文本框,文本域
*/
@Entry
@Component
struct Page_TextInput_case {
build() {
// 使用 Column 布局,设置子组件之间的间距为 4
Column({ space: 4 }) {
// 输入框组件示例
TextInput()
.backgroundColor(Color.Orange) // 设置背景颜色为橙色
// 带有占位符的输入框
TextInput({ placeholder: "文本框:提示。。。" })
.backgroundColor(Color.Yellow) // 设置背景颜色为黄色
// 多行输入区域
TextArea({ placeholder: "文本域:多行输入。。。" })
.backgroundColor(Color.Green) // 设置背景颜色为绿色
// 带有默认文本的多行输入区域
TextArea({ text: "使用文本域输入内容:年年岁岁花相似,岁岁年年人不同。年年岁岁花相似,岁岁年年人不同。" })
.width(200) // 设置宽度为 200
.height(100) // 设置高度为 100
.backgroundColor("#baa") // 设置背景颜色为指定的浅色
// 注意:如果内容高度超过设置的高度,会出现滚动条
}
}
}
2.1.2 源码1运行效果
2.2 设置文本框的输入类型
平常在登陆某种账号时,需要输入账号、密码、验证码。账号基本有数字和字母,密码输入可能会有*号的隐藏显示,验证码设置为只能输入数字类型。
2.2.1 源码2(设置输入框的输入类型)
/**
* 页面:文本框和文本域示例
*/
@Entry
@Component
struct Page_TextInput_case {
build() {
// 使用 Column 布局,设置子组件之间的间距为 4
Column({ space: 4 }) {
// 每一行的输入框都放在 Row 布局中
Row() {
Text("账号:") // 标签
TextInput()
.type(InputType.Normal) // 设置输入框类型为普通文本
.backgroundColor("#bbc") // 设置背景颜色为灰色
.layoutWeight(1) // 设置权重为 1,以填充剩余空间
}
Row() {
Text("密码:") // 标签
TextInput()
.type(InputType.Password) // 设置输入框类型为密码
.backgroundColor("#bbc") // 设置背景颜色为灰色
.layoutWeight(1) // 设置权重为 1
}
Row() {
Text("数字:") // 标签
TextInput()
.type(InputType.Number) // 设置输入框类型为数字
.backgroundColor("#bbc") // 设置背景颜色为灰色
.layoutWeight(1) // 设置权重为 1
}
}
}
}
2.2.2 源码2运行效果
2.3 文本框的焦点事件
当我们输入账号时需要鼠标光标点到输入框位置,然后输入账号密码,最后摁登陆或回车进行账号登陆。这里我们未设置按钮。只设置回车后的效果。
2.3.1 源码3(文本框的焦点事件)
/**
* 页面:文本框和文本域示例
*/
@Entry
@Component
struct Page_TextInput_case {
build() {
// 使用 Column 布局,设置子组件之间的间距为 20
Column({ space: 20 }) {
// 输入框获取焦点时的提示
Text("onFocus 获取焦点,下文本框获得焦点时输出内容")
TextInput()
.backgroundColor("#bbc") // 设置背景颜色为灰色
.onFocus(() => {
console.log("我获得了焦点") // 当输入框获得焦点时输出
})
// 输入框失去焦点时的提示
Text("onBlur 失去焦点,下文本框失去焦点时输出内容")
TextInput()
.backgroundColor("#bbc") // 设置背景颜色为灰色
.onBlur(() => {
console.log("我失去了焦点") // 当输入框失去焦点时输出
})
// 输入框回车时的提示
Text("回车会触发onSubmit,下输入框有焦点时,摁键盘回车输出内容")
TextInput()
.backgroundColor("#bbc") // 设置背景颜色为灰色
.onSubmit((EnterKeyType) => {
console.log(EnterKeyType + " 摁了回车") // 当输入框按下回车时输出
})
}
}
}
2.3.2 源码3运行效果
- 默认情况
- 获取焦点事件
- 失去焦点事件
- 回车事件
- 终端的输出显示。回车输入效果前有6,表示在harmony开发中,回车键用6表示,键盘每个键都各有数字表示。
3.结语
把各组件的创建和基本用法都记录一遍,后续回顾查阅会方便许多。
源码中有注释应该够用了,再多的文字说明也不如理会源码。
由于笔者的能力有限,创作的内容有所不足在所难免,也敬请读者包涵和指出,万分感谢!
4.定位日期
2024-11-14;
23:18;