基础ArkTS组件：垂直列表菜单组件，图案密码锁组件，搜索框（HarmonyOS学习第三课【3.7】）

最新推荐文章于 2024-05-19 21:11:24 发布

chenchen-IT

最新推荐文章于 2024-05-19 21:11:24 发布

阅读量1.3k

点赞数 35

分类专栏： HarmonyOS 文章标签：学习华为 harmonyos typescript

本文链接：https://blog.csdn.net/qq_58213084/article/details/138601284

版权

HarmonyOS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

垂直列表菜单组件

子组件

MenuItem

用来展示菜单Menu中具体的item菜单项。

说明

该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

MenuItem(value?: MenuItemOptions| CustomBuilder)

参数：

参数	类型	必填	参数描述
value	MenuItemOptions \| CustomBuilder	否	包含设置MenuItem的各项信息。

MenuItemOptions类型说明

名称	类型	必填	描述
startIcon	ResourceStr	否	item中显示在左侧的图标信息路径。
content	ResourceStr	是	item的内容信息。
endIcon	ResourceStr	否	item中显示在右侧的图标信息路径。
labelInfo	ResourceStr	否	定义结束标签信息，如快捷方式Ctrl+C等。
builder	CustomBuilder	否	用于构建二级菜单。

MenultemGroup

该组件用来展示菜单MenuItem的分组。

说明

该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

包含MenuItem子组件。

接口

MenuItemGroup(value?: MenuItemGroupOptions)

参数：

参数	类型	必填	参数描述
value	MenuItemGroupOptions	否	包含设置MenuItemGroup的标题和尾部显示信息。

MenuItemGroupOptions类型说明

名称	类型	必填	描述
header	ResourceStr \| CustomBuilder	否	设置对应group的标题显示信息。
footer	ResourceStr \| CustomBuilder	否	设置对应group的尾部显示信息。

属性

除支持通用属性外，还支持以下属性:

名称	参数类型	描述
selected	boolean	设置菜单项是否选中。默认值：false
selectIcon	boolean	当菜单项被选中时，是否显示被选中的图标。

名称

参数类型

描述

selected

boolean

设置菜单项是否选中。

默认值：false

selectIcon

boolean

当菜单项被选中时，是否显示被选中的图标。

事件

名称	参数类型	描述
onChange	(selected: boolean) => void	当选中状态发生变化时，触发该回调。只有手动触发且MenuItem状态改变时才会触发onChange回调。 - value为true时，表示已选中。 - value为false时，表示未选中。

名称

参数类型

描述

onChange

(selected: boolean) => void

当选中状态发生变化时，触发该回调。只有手动触发且MenuItem状态改变时才会触发onChange回调。

- value为true时，表示已选中。

- value为false时，表示未选中。

接口

Menu()

作为菜单的固定容器，无参数。

属性

除支持通用属性外，还支持以下属性:

名称	参数类型	描述
fontSize	Length	统一设置Menu中所有文本的尺寸，Length为number类型时，使用fp单位。

官方示例：

@Entry
@Component
struct Index {
  @State select: boolean = true
  private iconStr: ResourceStr = $r("app.media.view_list_filled")
  private iconStr2: ResourceStr = $r("app.media.view_list_filled")

  @Builder
  SubMenu() {
    Menu() {
      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
    }
  }

  @Builder
  MyMenu(){
    Menu() {
      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
        .enabled(false)
      MenuItem({
        startIcon: this.iconStr,
        content: "菜单选项",
        endIcon: $r("app.media.arrow_right_filled"),
        builder: this.SubMenu.bind(this)
      })
      MenuItemGroup({ header: '小标题' }) {
        MenuItem({ content: "菜单选项" })
          .selectIcon(true)
          .selected(this.select)
          .onChange((selected) => {
            console.info("menuItem select" + selected);
            this.iconStr2 = $r("app.media.icon");
          })
        MenuItem({
          startIcon: $r("app.media.view_list_filled"),
          content: "菜单选项",
          endIcon: $r("app.media.arrow_right_filled"),
          builder: this.SubMenu.bind(this)
        })
      }
      MenuItem({
        startIcon: this.iconStr2,
        content: "菜单选项",
        endIcon: $r("app.media.arrow_right_filled")
      })
    }
  }

  build() {
    Row() {
      Column() {
        Text('click to show menu')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .bindMenu(this.MyMenu)
      .width('100%')
    }
    .height('100%')
  }
}

图案密码锁组件

图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态，手指离开屏幕时结束输入状态完成密码输入。

说明

该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

PatternLock(controller?: PatternLockController)

参数:

参数名	参数类型	必填	描述
controller	PatternLockController	否	设置PatternLock组件控制器，可用于控制组件状态重置。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
sideLength	Length	设置组件的宽度和高度（宽高相同）。设置为0或负数等非法值时组件不显示。默认值：300vp
circleRadius	Length	设置宫格中圆点的半径。默认值：14vp
regularColor	ResourceColor	设置宫格圆点在“未选中”状态的填充颜色。默认值：Color.Black
selectedColor	ResourceColor	设置宫格圆点在“选中”状态的填充颜色。默认值：Color.Black
activeColor	ResourceColor	设置宫格圆点在“激活”状态的填充颜色（“激活”状态为手指经过圆点但还未选中的状态）。默认值：Color.Black
pathColor	ResourceColor	设置连线的颜色。默认值：Color.Blue
pathStrokeWidth	number \| string	设置连线的宽度。设置为0或负数等非法值时连线不显示。默认值：34vp
autoReset	boolean	设置在完成密码输入后再次在组件区域按下时是否重置组件状态。设置为true，完成密码输入后再次在组件区域按下时会重置组件状态（即清除之前输入的密码）；反之若设置为false，则不会重置组件状态。默认值：true

事件

除支持通用事件外，还支持以下事件：

名称	描述
onPatternComplete(callback: (input: Array<number>) => void)	密码输入结束时触发该回调。 input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0,1,2，第二行圆点依次为3,4,5，第三行圆点依次为6,7,8）。

名称

描述

onPatternComplete(callback: (input: Array<number>) => void)

密码输入结束时触发该回调。

input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0,1,2，第二行圆点依次为3,4,5，第三行圆点依次为6,7,8）。

PatternLockController

PatternLock组件的控制器，可以通过它进行组件状态重置。

导入对象

patternLockController: PatternLockController = new PatternLockController()

reset

reset(): void

重置组件状态。

PatternLock定义介绍

interface PatternLockInterface {
  (controller?: PatternLockController): PatternLockAttribute;
}

declare class PatternLockController {
  constructor();
  reset();
}

PatternLock 在使用的时候，接收一个 PatternLockController 类型的控制器，该控制器用来控制组件的状态，比如重置解锁状态。

简单样例如下所示：

@Entry @Component struct PatternLockTest {
  patternLockController: PatternLockController = new PatternLockController()
  build() {
    Column({space: 10}) {
      PatternLock(this.patternLockController)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

样例运行结果如下图所示：

PatternLock属性介绍

declare class PatternLockAttribute extends CommonMethod<PatternLockAttribute> {
  sideLength(value: Length): PatternLockAttribute;
  circleRadius(value: Length): PatternLockAttribute;
  backgroundColor(value: ResourceColor): PatternLockAttribute;
  regularColor(value: ResourceColor): PatternLockAttribute;
  selectedColor(value: ResourceColor): PatternLockAttribute;
  activeColor(value: ResourceColor): PatternLockAttribute;
  pathColor(value: ResourceColor): PatternLockAttribute;
  pathStrokeWidth(value: number | string): PatternLockAttribute;
  onPatternComplete(callback: (input: Array<number>) => void): PatternLockAttribute;
  autoReset(value: boolean): PatternLockAttribute;
}

sideLength：设置组件的宽度和高度，默认值为 300vp ，最小可以设置为 0。
circleRadius：设置宫格圆点的半径，默认值为 14vp 。
regularColor：设置宫格圆点在 “未选中” 状态的填充颜色，默认值为黑色。
selectedColor：设置宫格圆点在 “选中” 状态的填充颜色，默认值为黑色。
activeColor：设置宫格圆点在 “激活” 状态的填充颜色，默认值为黑色。
pathColor：设置连线的颜色，默认值为蓝色。
pathStrokeWidth：设置连线的宽度，默认值为 34vp ，最小可以设置为0。
autoReset：设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为 true ，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为 false ，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。

PatternLock属性介绍

declare class PatternLockAttribute extends CommonMethod<PatternLockAttribute> {
  onPatternComplete(callback: (input: Array<number>) => void): PatternLockAttribute;
}

onPatternComplete：密码输入结束时被调用的回调函数，input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0 到 8）。

PatternLock完整样例：

@Entry @Component struct PatternLockTest {

  @State passwords: Number[] = []
  @State message: string = '请验证密码'
  private patternLockController: PatternLockController = new PatternLockController()

  build() {
    Column({space: 10}) {
      Text(this.message)
        .textAlign(TextAlign.Center)
        .fontSize(22)

      PatternLock(this.patternLockController)
        .sideLength(200)            // 设置宽高
        .circleRadius(7)            // 设置圆点半径
        .regularColor(Color.Red)    // 设置圆点颜色
        .pathStrokeWidth(10)        // 设置连线粗细
        .backgroundColor(Color.Pink)// 设置背景色
        .autoReset(true)            // 支持用户在完成输入后再次触屏重置组件状态
        .onPatternComplete((input: Array<number>) => {
          if (input == null || input == undefined || input.length < 5) {
            this.message = "密码长度至少为5位数。";
            return;
          }
          if (this.passwords.length > 0) {
            if (this.passwords.toString() == input.toString()) {
              this.passwords = input
              this.message = "密码设置成功"
            } else {
              this.message = '密码输入错误'
            }
          } else {
            this.passwords = input
            this.message = "密码输入错误"
          }
        })
      Button('重置密码')
        .onClick(() => {
          this.passwords = [];
          this.message = '请验证手势密码';
          this.patternLockController.reset();
        })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

样例运行结果如下图所示：

官方案例：

// xxx.ets
@Entry
@Component
struct PatternLockExample {
  @State passwords: Number[] = []
  @State message: string = 'please input password!'
  private patternLockController: PatternLockController = new PatternLockController()

  build() {
    Column() {
      Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
      PatternLock(this.patternLockController)
        .sideLength(200)
        .circleRadius(9)
        .pathStrokeWidth(18)
        .activeColor('#B0C4DE')
        .selectedColor('#228B22')
        .pathColor('#90EE90')
        .backgroundColor('#F5F5F5')
        .autoReset(true)
        .onPatternComplete((input: Array<number>) => {
          // 输入的密码长度小于5时，提示重新输入
          if (input === null || input === undefined || input.length < 5) {
            this.message = 'The password length needs to be greater than 5, please enter again.'
            return
          }
          // 判断密码长度是否大于0
          if (this.passwords.length > 0) {
            // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入
            if (this.passwords.toString() === input.toString()) {
              this.passwords = input
              this.message = 'Set password successfully: ' + this.passwords.toString()
            } else {
              this.message = 'Inconsistent passwords, please enter again.'
            }
          } else {
            // 提示第二次输入密码
            this.passwords = input
            this.message = "Please enter again."
          }
        })
      Button('Reset PatternLock').margin(30).onClick(() => {
        // 重置密码锁
        this.patternLockController.reset()
        this.passwords = []
        this.message = 'Please input password'
      })
    }.width('100%').height('100%')
  }
}

搜索框组件

搜索框组件，适用于浏览器的搜索内容输入框等应用场景。

说明

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

Search(options?: { value?: string, placeholder?: string, icon?: string, controller?: SearchController })

参数:

参数名	参数类型	必填	参数描述
value	string	否	设置当前显示的搜索文本内容。
placeholder	string	否	设置无输入时的提示文本。
icon	string	否	设置搜索图标路径，默认使用系统搜索图标。说明： icon的数据源，支持本地图片和网络图片。 - 支持的图片格式包括png、jpg、bmp、svg、gif和pixelmap。 - 支持Base64字符串。格式data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], 其中[base64 data]为Base64字符串数据。
controller	SearchController	否	设置Search组件控制器。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
searchButton	string	搜索框末尾搜索按钮文本内容，默认无搜索按钮。
placeholderColor	ResourceColor	设置placeholder文本颜色。
placeholderFont	Font	设置placeholder文本样式，包括字体大小，字体粗细，字体族，字体风格。目前仅支持默认字体族。
textFont	Font	设置搜索框内输入文本样式，包括字体大小，字体粗细，字体族，字体风格。目前仅支持默认字体族。
textAlign	TextAlign	设置文本在搜索框中的对齐方式。默认值：TextAlign.Start
copyOption9+	CopyOptions	设置输入的文本是否可复制。

事件

除支持通用事件外，还支持以下事件：

名称	功能描述
onSubmit(callback: (value: string) => void)	点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。 -value: 当前搜索框中输入的文本内容。
onChange(callback: (value: string) => void)	输入内容发生变化时，触发该回调。 -value: 当前搜索框中输入的文本内容。
onCopy(callback: (value: string) => void)	长按搜索框弹出剪切板之后，点击剪切板的复制按钮触发该回调。 -value: 复制的文本内容。
onCut(callback: (value: string) => void)	长按搜索框弹出剪切板之后，点击剪切板的剪切按钮触发该回调。 -value: 剪切的文本内容。
onPaste(callback: (value: string) => void)	长按搜索框弹出剪切板之后，点击剪切板的粘贴按钮触发该回调。 -value: 粘贴的文本内容。

SearchController

Search组件的控制器，目前通过它可控制Search组件的光标位置。

导入对象

controller: SearchController = new SearchController()

caretPosition

caretPosition(value: number): void

设置输入光标的位置。

参数:

参数名	参数类型	必填	参数描述
value	number	是	从字符串开始到光标所在位置的长度。

示例

// xxx.ets
@Entry
@Component
struct SearchExample {
  @State changeValue: string = ''
  @State submitValue: string = ''
  controller: SearchController = new SearchController()

  build() {
    Column() {
      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
      Text('onChange:' + this.changeValue).fontSize(18).margin(15)
      Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
        .searchButton('SEARCH')
        .width(400)
        .height(40)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
          this.submitValue = value
        })
        .onChange((value: string) => {
          this.changeValue = value
        })
        .margin(20)
      Button('Set caretPosition 1')
        .onClick(() => {
          // 设置光标位置到输入的第一个字符后
          this.controller.caretPosition(1)
        })
    }.width('100%')
  }
}

chenchen-IT

关注

35
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
基础ArkTS组件：垂直列表菜单组件，图案密码锁组件，搜索框（HarmonyOS学习第三课【3.7】）

reset();在使用的时候，接收一个类型的控制器，该控制器用来控制组件的状态，比如重置解锁状态。build() {sideLength：设置组件的宽度和高度，默认值为 300vp ，最小可以设置为 0。：设置宫格圆点的半径，默认值为 14vp。：设置宫格圆点在 “未选中” 状态的填充颜色，默认值为黑色。：设置宫格圆点在 “选中” 状态的填充颜色，默认值为黑色。：设置宫格圆点在 “激活” 状态的填充颜色，默认值为黑色。pathColor：设置连线的颜色，默认值为蓝色。
复制链接

扫一扫