HarmonyOS ArkTS 基础组件(一)

举报
帅次 发表于 2024/11/20 13:51:49 2024/11/20
【摘要】 文本显示（Text/Span） 按钮（Button） 文本输入（TextInput/TextArea） 单选框（Radio）

​

 一、常用组件

  • 文本显示（Text/Span）

  • 按钮（Button）

  • 文本输入（TextInput/TextArea）

  • 单选框（Radio）

  • 切换按钮（Toggle）

  • 进度条（Progress）

  • 弹窗/自定义弹窗（AlertDialog/CustomDialog）

  • 视频播放（Video）

二、文本显示（Text/Span)

2.1 创建文本

Text可通过以下两种方式来创建：

  • string字符串

  • 引用Resource资源

    • 资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json。

interface TextInterface {
    (content?: string | Resource): TextAttribute;
}

添加 string 资源

​

      Text('直接传入文本')
        .fontSize(24)
        .margin(10)
      Text($r('app.string.basic_text_create'))
        .fontSize(24)
        .margin(10)
​

2.2 属性

名称 参数类型 描述
fontColor ResourceColor 设置文本颜色
fontSize Length|Resource 设置文本尺寸
fontStyle FontStyle 设置文本的字体样式
fontWeight number|FontWeight|string 设置文本的字体粗细
fontFamily string|Resource 设置文本的字体列表
textAlign TextAlign 设置文本在水平方向的对齐方式
textOverflow {overflow: TextOverflow} 设置文本超长时的显示方式(需配合maxLines一起使用)
maxLines number 设置文本的最大行数
decoration {type: TextDecorationType;color?: ResourceColor;} 设置文本装饰线样式及其颜色
textCase TextCase 设置文本大小写
lineHeight string|number|Resource 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp
letterSpacing number|string 设置文本字符间距
copyOption CopyOptions 组件支持设置文本是否可复制粘贴（默认值：CopyOptions.None）。设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，长按文本，会弹出文本选择菜单，可选中文本并进行复制、全选操作。


​


      Text('左对齐')
        .width(300)
        .fontColor(Color.Red)
        .fontStyle(FontStyle.Italic)//斜体
        .fontWeight(FontWeight.Bold)//粗体
        .textAlign(TextAlign.Start)
        .border({ width: 1 })
        .padding(10)
        .margin(10)
      Text('中间对齐')
        .width(300)
        .fontWeight(FontWeight.Medium)
        .fontColor('#00ff00')
        .textAlign(TextAlign.Center)
        .border({ width: 1 })
        .padding(10)
        .margin(10)
      Text('右对齐')
        .width(300)
        .fontColor(0x0000ff)
        .textAlign(TextAlign.End)
        .border({ width: 1 })
        .padding(10)
        .margin(10)

      Text('超长文本无省略号全大写：Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.')
        .width(300)
        .margin(10)
        .maxLines(2)
        .textCase(TextCase.UpperCase)
        .decoration({
          type: TextDecorationType.LineThrough,
          color: Color.Red
        })
      Text('超长文本加省略号全小写：Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.Extra long text.')
        .width(300)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .textCase(TextCase.LowerCase)

2.3 添加子组件(Span)

        Span组件需要写到Text组件内(支持多个)，单独写Span组件不会显示信息，Text与Span同时配置文本内容时，Span内容覆盖Text内容。

​

      Text('设不设都一样，反正也不显示') {
        Span('我是Span1，设置了字符间距')
          .letterSpacing(10).
          fontSize(16).fontColor(Color.Orange)
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
        Span('我是Span2').fontColor(Color.Blue).fontSize(16)
          .fontStyle(FontStyle.Italic)
          .decoration({ type: TextDecorationType.Underline, color: Color.Black })
        Span('，我是Span3').fontSize(16).fontColor(Color.Pink)
          .decoration({ type: TextDecorationType.Overline, color: Color.Green })
      }
      .borderWidth(1)
      .padding(10)

2.4 添加事件

        Text组件可以添加通用事件，如onClick、onTouch等事件。

        由于Span组件无尺寸信息，事件仅支持onClick事件。

      Text('设不设都一样，反正也不显示') {
        Span('我是Span1，设置了字符间距')
          .letterSpacing(10).
          fontSize(16).fontColor(Color.Orange)
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
          .onClick(()=>{
            console.info('我是Span1，设置了字符间距被点击了')
          })
        ......
      }
      .onClick(()=>{
        console.info('我是Text，被点击了')
      })
      .borderWidth(1)
      .padding(10)

三、按钮（Button）

        Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

3.1 创建按钮

  • 创建不包含子组件的按钮。

  • 创建包含子组件的按钮。

    • 具有标签参数的Button组件不能有任何子级。

​

      Button('直接传入文本')
        .fontSize(24)
        .margin(10)
      Button($r('app.string.basic_btn_create'))
        .fontSize(24)
        .margin(10)

      Button() {
        Row() {
          Image($r('app.media.app_icon')).width(40).height(40).margin(5)
          Text('loading').fontSize(20).fontColor(Color.White).margin(10)
        }.alignItems(VerticalAlign.Center)
      }
      .fontSize(24)
      .margin(10)

3.2 设置按钮类型

        Button有三种可选类型，通过type进行设置。

  • Capsul（默认类型）：胶囊类型，圆角默认为高度的一半，不支持通过borderRadius属性重新设置圆角。

  • Circle（圆形按钮）：按钮为圆形，不支持通过borderRadius属性重新设置圆角。

  • Normal（普通按钮：默认不带圆角）：按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

​

      Button('胶囊型，圆角属性无效',
        { type: ButtonType.Capsule, stateEffect: false })
        .borderRadius(10)//无效
        .fontSize(20)
        .margin(12)

      Button('圆形按钮',
        { type: ButtonType.Circle, stateEffect: false })
        .borderRadius(10)//无效
        .fontSize(18)
        .width(110)
        .height(110)

      Button('普通按钮',
        { type: ButtonType.Normal, stateEffect: false })
        .fontSize(18)
        .margin(10)
      Button('普通按钮，圆角 10',
        { type: ButtonType.Normal, stateEffect: false })
        .borderRadius(10)//有效
        .fontSize(18)
        .margin(10)

3.3 悬浮按钮

        在可以滑动的界面，滑动时按钮始终保持悬浮状态。

​

      Button('+',
        { type: ButtonType.Circle, stateEffect: false })
        .borderRadius(10)//无效
        .fontSize(50)
        .width(80)
        .height(80)
        .position({x: '60%', y: '20%'})//悬浮位置
        .shadow({radius: 10})//添加阴影效果

四、文本输入（TextInput/TextArea）

        TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，例如登录注册页面、聊天框的输入等。

  • TextInput为单行输入框。

  • TextArea为多行输入框。

​

      TextInput().width('90%').margin(10)
      TextArea().width('90%').margin(10)

4.1 InputType输入框类型

  • Normal(默认)：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。

  • Password：密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。

  • Email：邮箱地址输入模式。支持数字，字母，下划线，以及@字符（只能存在一个@字符）。

  • Number：纯数字输入模式。

  • PhoneNumber：电话号码输入模式。支持输入数字、+ 、-、*、#，长度不限。

      TextInput({placeholder:"请输入手机号"}).width('90%').margin(10)
        .type(InputType.PhoneNumber)
        .placeholderColor(Color.Green)//修改提示语颜色
        .backgroundColor(Color.Pink)
      TextInput({placeholder:"请输入密码"}).width('90%').margin(10)
        .type(InputType.Password)
        .backgroundColor(Color.Pink)


​

4.2 键盘回车键类型

如上图，第一行已完成，下面还有输入框，需要将完成样式改为下一个样式。

  • Go：显示为开始样式。

  • Search：显示为搜索样式。

  • Send：显示为发送样式。

  • Next：显示为下一个样式。

  • **Done(默认)**：显示为换行(多行)样式/完成(单行)样式。

      TextInput({placeholder:"请输入手机号"}).width('90%').margin(10)
        .type(InputType.PhoneNumber)
        .placeholderColor(Color.Green)//修改提示语颜色
        .backgroundColor(Color.Pink)
        .enterKeyType(EnterKeyType.Next)
        .onSubmit((EnterKeyType)=>{
          console.info(EnterKeyType+'输入法回车键的类型值')
        })
      TextInput({placeholder:"请输入密码"}).width('90%').margin(10)
        .type(InputType.Password)
        .backgroundColor(Color.Pink)
        .enterKeyType(EnterKeyType.Send)

​

一个简单的登录页就有了。

五、单选框（Radio）

        Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。

Radio(options: {value: string, group: string})

  • value：当前单选框的值。

  • group：当前单选框的所属群组名称，相同group的Radio只能有一个被选中。

        Radio({ value: 'Radio1', group: 'radioGroup' })
          .checked(false)//是否选中
          .width(50)

        Radio({ value: 'Radio2', group: 'radioGroup' })
          .checked(true)//是否选中
          .width(50)

​

5.1 添加事件

        除支持通用事件外，Radio通常用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。

        Radio({ value: 'Radio1', group: 'radioGroup' })
          .checked(false)//是否选中
          .width(50)
          .onChange((isChecked: boolean) => {
            if(isChecked) {
              //需要执行的操作
            }
          })
        Radio({ value: 'Radio2', group: 'radioGroup' })
          .checked(true)//是否选中
          .width(50)
          .onChange((isChecked: boolean) => {
            if(isChecked) {
              //需要执行的操作
            }
          })

5.2 添加文字

        没有可以设置文字的地方只能自己做文字排版了。

      Row(){
        Radio({ value: 'Radio1', group: 'radioGroup' })
          .checked(false)//是否选中
          .width(50)
          .onChange((isChecked: boolean) => {
            if(isChecked) {
              //需要执行的操作
            }
          })
        Text('男').fontSize(30)
        Radio({ value: 'Radio2', group: 'radioGroup' })
          .checked(true)//是否选中
          .width(50)
          .onChange((isChecked: boolean) => {
            if(isChecked) {
              //需要执行的操作
            }
          })
        Text('女').fontSize(30)
      }.margin(20)

​

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HarmonyOS
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入