首页 > 其他分享 >arkUI:文本框、文本域的创建和常见用法(TextInput 、TextArea)

arkUI:文本框、文本域的创建和常见用法(TextInput 、TextArea)

时间:2024-11-04 23:15:29浏览次数:3  
标签:文本 TextArea 文本框 输入框 源码 设置 arkUI TextInput

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;

标签:文本,TextArea,文本框,输入框,源码,设置,arkUI,TextInput
From: https://blog.csdn.net/qq_44925904/article/details/143495908

相关文章

  • ArkUI常用数据处理:掌握Map操作与动态数据管理
    在HarmonyOS应用开发中,ArkUI框架提供了丰富的数据处理能力,尤其是对于Map这类非线性容器的操作。本文将详细介绍ArkUI中Map的基本概念、操作方法,以及如何在实际开发中应用Map进行数据处理和动态数据管理。Map的重要性Map是非线性容器的一种,它提供了快速查找、插入和删除键值......
  • ArkTS鸿蒙页面(ArkUI-X Empty Ability)
    1.基础1.1.存储变量,常量lettitle:string='巨无霸汉堡'console.log('字符串title',title)//1.2数字number类型letage:number=18console.log('年纪age',age)//1.3布尔boolean类型(true真,false假)letisLogin:boolean=falseconsole.log(&#......
  • [Memory Leak] 2. Last focused input/textarea element cause memory leak in Chrome
    ExampleCode: <body><div><buttonclass="btn"onclick="createInput(false)">Button1</button><buttonclass="btn"onclick="createInput(true)">Button2</button></d......
  • 学习笔记(十七):ArkUi-气泡提示 (Popup)
    概述:Popup属性可绑定在组件上显示气泡弹窗提示,设置弹窗内容、交互逻辑和显示状态。主要用于屏幕录制、信息弹出提醒等显示状态。一、系统气泡,PopupOptions通过配置primaryButton、secondaryButton来设置带按钮的气泡 1、文本气泡常用于只展示带有文本的信息提示,不带有任何......
  • 学习笔记(十五):ArkUi-切换按钮 (Toggle)
    概述:提供状态按钮样式、勾选框样式和开关样式,一般用于两种状态之间的切换一、创建单选框接口形式如下:type为类型,支持三种1、Switch  不包含子组件Toggle({type:ToggleType.Switch,isOn:true}) 2、Checkbox不包含子组件Toggle({type:ToggleType.Checkbox,isOn:true}......
  • 学习笔记(十四):ArkUi-单选框 (Radio)
    概述:单选框组件,通常用于提供相应的用户交互选择项,同一组的Radio中只有一个可以被选中。单选框组件不支持自定义样式一、创建单选框接口形式如下:value为单选框名称,group为单选框所在组的名称,同一个组内最多只有一个单选框为选中状态Radio(options:{value:string,group:......
  • 学习笔记(十三):ArkUi-按钮 (Button)
    概述:按钮组件,通常用于响应用户的点击操作,其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。使用示例:一、创建Button1、创建不包含子组件的按钮Button('新增').type(ButtonType.Capsule).......
  • 学习笔记(十二):ArkUi-相对布局 (RelativeContainer)
    基本概念锚点:通过锚点设置当前元素基于哪个元素确定位置。对齐方式:通过对齐方式,设置当前元素是基于锚点的上中下对齐,还是基于锚点的左中右对齐。锚点设置锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上,可以设置left、middle、right的锚点......
  • 高性能 ArkUI 应用开发:复杂 UI 场景中的内存管理与 XML 优化
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。在开发高性能ArkUI应用时,尤其是涉及......
  • 学习笔记(八):ArkUi-线性布局 (Row/Column)自适应拉伸、缩放、延伸
    一、自适应拉伸在线性布局下,常用空白填充组件Blank,在容器主轴方向自动填充空白空间,达到自适应拉伸效果示例:实现以下常用ui布局,左侧标题文本,右侧内容文本,中间空白区域  二、自适应缩放是指子元素随容器尺寸的变化而按照预设的比例(权重)自动调整尺寸,适应各种不同大小的设......