三、鸿蒙开发-常用组件二(文本输入、进度条、弹框、组件编程技巧)

提示:本文根据b站尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程课整理

链接指引 => 尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程


一、文本输入

1.1 参数

TextInput组件的参数定义如下

ts 复制代码
TextInput(value?:{placeholder?: string|Resource , text?: string|Resource})
  • placeholder placeholder属性用于设置无输入时的提示文本,效果如下

  • text text用于设置输入框当前的文本内容,效果如下

1.2 常用属性

1.2.1 输入框类型

可通过type()方法设置输入框的类型,该方法的参数为InputType枚举类型,可选的枚举值有

名称 描述
InputType.Normal 基本输入模式
InputType.Password 密码输入模式
InputType.Number 纯数字输入模式

1.2.2 光标样式

可通过caretColor()方法设置光标的颜色

1.2.3 placeholder样式

可通过placeholderFont()placeholderColor()方法设置placeholder的样式,其中placeholderFont()用于设置字体,包括字体大小、字体粗细等,placeholderColor()用于设置字体颜色

1.2.4 文本样式

输入文本的样式可通过fontSize()fontWeight()fontColor()等通用属性方法进行设置。

1.3 常用事件

  • change事件 每当输入的内容发生变化,就会触发 change 事件,开发者可使用onChange()方法为TextInput组件绑定 change 事件,该方法的参数定义如下

    ts 复制代码
    onChange(callback: (value: string) => void)

    其中value为最新内容。

  • 焦点事件 焦点事件包括获得焦点和失去焦点两个事件,当输入框获得焦点时,会触发 focus 事件,失去焦点时,会触发 blur 事件,开发者可使用onFocus()onBlur()方法为 TextInput 组件绑定相关事件,两个方法的参数定义如下

    ts 复制代码
    onFocus(event: () => void)	
    ts 复制代码
    onBlur(event: () => void)

二、进度条

2.1 参数

Progress组件的参数定义如下

ts 复制代码
Progress(options: {value: number, total?: number, type?: ProgressType})
  • value value属性用于设置当前进度值。
  • total total属性用于设置总值。
  • type type属性用于设置进度条类型,可通过ProgressType枚举类型进行设置,可选的枚举值如下
名称 描述 效果
ProgressType.Linear 线性样式
ProgressType.Ring 环形无刻度样式
ProgressType.Eclipse 月食样式
ProgressType.ScaleRing 环形有刻度样式
ProgressType.Capsule 胶囊样式

2.2 常用属性

2.2.1 进度条样式

可通过style()调整进度条的样式,例如进度条的宽度,该方法的参数类型定义如下

ts 复制代码
style({strokeWidth?: string|number|Resource,scaleCount?: number,scaleWidth?: string|number|Resource})
  • strokeWidth strokeWidth属性用于设置进度条的宽度,默认值为4vp。该属性可用于Linear、Ring、ScaleRing三种类型,效果如下

  • scaleCount scaleCount属性用于设置ScaleRing的刻度数,默认值为120。效果如下

  • scaleWidth scaleCount属性用于设置ScaleRing的刻度线的宽度,默认值为2vp。效果如下

2.2.2 进度条颜色

进度条的颜色可通过color()backgroundColor()方法进行设置,其中color()用于设置前景色,backgroundColor()用于设置背景色,例如

三、弹窗

3.1 消息提示

3.1.1 使用说明

可使用@ohos.promptAction模块中的showToast()方法显示 Toast 提示,使用时需要先导入@ohos.promptAction模块,如下

ts 复制代码
import promptAction from '@ohos.promptAction'

showToast()方法的参数定义如下

ts 复制代码
showToast(options: { message: string | Resource,duration?: number,bottom?: string | number})
  • message message属性用于设置提示信息
  • duration duration属性用于设置提示信息停留时长,单位为毫秒,取值范围是[1500,10000]
  • bottom bottom属性用于设置提示信息到底部的距离

3.2 警告对话框

3.2.1 使用说明

可使用全局方法AlertDialog.show()显示警告对话框

3.3 操作列表弹框

3.3.1 使用说明

可使用全局方法ActionSheet.show()显示操作列表弹窗,

3.4 选择器弹窗

3.3.1 使用说明

类型 文档地址
TextPickerDialog(文本滑动选择器弹窗) 官方文档
DatePickerDialog(日期滑动选择期弹窗) 官方文档
TimePickerDialog(时间滑动选择器弹窗) 官方文档

3.5 自定义弹窗

3.5.1 使用说明

显示自定义弹窗需要使用CustomDialogController,具体用法可参考相关案例或者官方文档

四、组件编程技巧

4.1 样式复用

4.1.1 @Styles方法

@Styles方法可定义在组件内或者全局,具体语法如下

  • 组件内

    ts 复制代码
    @Entry
    @Component
    struct StylesPage {
      build() {
        Column() {
          Row({ space: 50 }) {
            Button('确认')
              .type(ButtonType.Normal)
              .backgroundColor(Color.Green)
              .compButtonStyle() //复用样式
              .onClick(() => console.log('确认'))
            Button('取消')
              .type(ButtonType.Normal)
              .backgroundColor(Color.Gray)
              .compButtonStyle() //复用样式
              .onClick(() => console.log('取消'))
          }
        }.width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
      }
    
      //组件内样式定义
      @Styles compButtonStyle() {
        .width(100)
        .height(40)
        .borderRadius(10)
      }
    }
  • 全局

    ts 复制代码
    @Entry
    @Component
    struct StylesPage {
      build() {
        Column() {
          Row({ space: 50 }) {
            Button('确认')
              .type(ButtonType.Normal)
              .backgroundColor(Color.Green)
              .globalButtonStyle() //复用样式
              .onClick(() => console.log('确认'))
            Button('取消')
              .type(ButtonType.Normal)
              .backgroundColor(Color.Gray)
              .globalButtonStyle() //复用样式
              .onClick(() => console.log('取消'))
          }
        }.width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
      }
    }
    
    //全局样式定义
    @Styles function globalButtonStyle() {
      .width(100)
      .height(40)
      .borderRadius(10)
    }

注意 1. 组件内的@Styles方法只能在当前组件中使用,全局的@Styles方法目前只允许在当前的.ets文件中使用 2. 组件内定义@Styles方法时不需要使用function关键字,全局的@Styles方法需要使用function关键字 3. @Styles方法中只能包含通用属性方法和通用事件方法 4. @Styles方法不支持参数

4.1.2 @Extend方法

@Extend装饰的方法同样可用于组件样式的复用,与@Styles不同的是,@Extend方法只能定义在全局。并且@Extend方法只能用于指定类型的组件,例如以下方法只能用于Button组件(可以理解为是Button组件的扩展样式)

ts 复制代码
@Extend(Button) function buttonStyle(){
  ...
}

由于@Extend方法只能用于指定类型的组件,因此方法中可包含指定组件的专有属性方法专有事件方法 。另外,@Extend方法还支持参数,具体语法如下

ts 复制代码
@Entry
@Component
struct ExtendPage {
  build() {
    Column() {
      Row({ space: 50 }) {
        Button('确认')
          .buttonExtendStyle(Color.Green, () => console.log('确认')) //复用样式
        Button('取消')
          .buttonExtendStyle(Color.Gray, () => console.log('取消')) //复用样式
      }
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

//样式定义
@Extend(Button) function buttonExtendStyle(color: Color, callback: () => void) {
  .width(100)
  .height(40)
  .borderRadius(10)
  .type(ButtonType.Normal)
  .backgroundColor(color)
  .onClick(callback)
}

总结 1. @Extend方法只能定义在全局,使用范围目前只限于当前的.ets文件 2. @Extend方法用于特定类型的组件,因此可包含该组件的专有属性方法和专有事件方法 3. @Extend方法支持参数

4.2 UI结构复用

4.2.1 概述

当页面有多个相同的UI结构时,若每个都单独声明,同样会有大量重复的代码。为避免重复代码,可以将相同的UI结构提炼为一个自定义组件,完成UI结构的复用。 除此之外,ArkTS还提供了一种更轻量的UI结构复用机制@Builder方法,开发者可以将重复使用的UI元素抽象成一个@Builder方法,该方法可在build()方法中调用多次,以完成UI结构的复用。

4.2.2 语法说明

@Builder方法同样可以定义在组件内或者全局,具体语法如下

  • 组件内

    ts 复制代码
    @Entry
    @Component
    struct BuilderPage {
      build() {
        Column() {
          Row({ space: 50 }) {
            //复用UI结构
            this.compButtonBuilder($r('app.media.icon_edit'), '编辑', () => console.log('编辑'))
            this.compButtonBuilder($r('app.media.icon_send'), '发送', () => console.log('发送'))
          }
        }.width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
      }
    
      //定义UI结构
      @Builder compButtonBuilder(icon: Resource, text: string, callback: () => void) {
        Button() {
          Row({ space: 10 }) {
            Image(icon)
              .width(25)
              .height(25)
            Text(text)
              .fontColor(Color.White)
              .fontSize(25)
          }
        }.width(120)
        .height(50)
        .onClick(callback)
      }
    }
  • 全局

    ts 复制代码
    @Entry
    @Component
    struct BuilderPage {
      build() {
        Column() {
          Row({ space: 50 }) {
            //复用UI结构
            globalButtonBuilder($r('app.media.icon_edit'), '编辑', () => console.log('编辑'))
            globalButtonBuilder($r('app.media.icon_send'), '发送', () => console.log('发送'))
          }
        }.width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
      }
    }
    
    //定义UI结构
    @Builder function globalButtonBuilder(icon: Resource, text: string, callback: () => void) {
        Button() {
          Row({ space: 10 }) {
            Image(icon)
              .width(25)
              .height(25)
            Text(text)
              .fontColor(Color.White)
              .fontSize(25)
          }
        }.width(120)
        .height(50)
        .onClick(callback)
    }

注意 1. 组件内的@Builder方法可通过this访问当前组件的属性和方法,而全局的@Builder方法则不能 2. 组件内的@Builder方法只能用于当前组件,全局的@Builder方法导出(export)后,可用于整个应用。

4.2.3 @Builder方法参数传递规则

@Builder方法具有两种参数传递机制------按值传递按引用传递 。当只有一个参数且参数为对象字面量 时为按引用传递,其余情况均为按值传递。 按引用传递时,若传递的参数为状态变量,则状态变量的变化将会触发@Builder方法内部UI的刷新;按值传递时则不会。

4.2.4 @Builder方法和自定义组件的区别

@Builder方法和自定义组件虽然都可以实现UI复用的效果,但是两者还是有着本质的区别的,其中最为显著的一个区别就是自定义组件可以定义自己的状态变量,而@Builder方法则不能。以下案例中,每个待办事项的UI结构都相同,因此可考虑将其提炼为一个自定义组件或者@Builder方法,但是由于每个待办事项均有已完成未完成 两种状态,因此需要为每个待办事项都定义一个状态变量,所以此时就只能使用自定义组件而不能使用@Builder方法。

总结 若复用的UI结构没有状态,推荐使用@Builder方法,否则使用自定义组件。

4.2.5 @BuilderParam

@BuilderParam用于装饰自定义组件(struct)中的属性,其装饰的属性可作为一个UI结构的占位符,待创建该组件时,可通过参数为其传入具体的内容。(其作用类似于Vue框架中的slot)。

组件定义

ts 复制代码
@Component
struct Container {
   //@BuilderParam属性
  @BuilderParam content: () => void

  build() {
    Column() {
      Text('其他内容') //其他内容
      this.content(); //占位符
      Button('其他内容') //其他内容
    }
  }
}

UI结构定义

ts 复制代码
@Builder function contentBuilder1() {
  ...
}

@Builder function contentBuilder2() {
  ...
}

@Builder function contentBuilder3() {
  ...
}

组件创建

ts 复制代码
Container({ content: contentBuilder1 })

Container({ content: contentBuilder2 })

Container({ content: contentBuilder3 })

例子:

ts 复制代码
@Entry
@Component
struct BuilderParamPage {
  build() {
    Column({ space: 50 }) {
      //创建卡片组件(传参)
      Card({ content: imageBuilder })

      //创建卡片组件("子组件")
      Card() {
        Column({ space: 10 }) {
          Text('鸿蒙操作系统')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
          Text('鸿蒙操作系统是一款由华为公司开发的多设备统一操作系统,致力于实现无缝连接和协同工作。其采用分布式架构,支持多终端智能互联,提供高效、安全、流畅的用户体验。')
        }
      }
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

//卡片内容
@Builder function imageBuilder() {
  Column({ space: 10 }) {
    Image($r('app.media.img_harmony'))
      .width(300)
      .height(150)
    Text('鸿蒙操作系统')
  }
}

//卡片组件
@Component
struct Card {
  @BuilderParam content: () => void; //@BuilderParam属性

  build() {
    Column() {
      this.content(); //占位符
    }.width('90%')
    .padding(10)
    .borderRadius(10)
    .shadow({ radius: 20 })
  }
}
相关推荐
SameX4 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX4 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index11 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室15 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu717 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
zhangjr057520 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟4641 天前
初识ArkUI
harmonyos
SameX1 天前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠1 天前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤2 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙