选择器在OpenHarmony中如何应用

OpenHarmony选择器的应用场景与实现方式
OpenHarmony提供了多种类型的选择器组件，覆盖文本、日期、文件、物联网设备等场景，帮助开发者实现高效的UI交互。以下是具体应用及实现细节：

1. 文本列表选择器（TextPicker）

核心功能：用于从预定义的文本列表中选择单项或多项（支持多列联动），适用于选项固定且数量较少的场景。
适用场景：性别选择、学历选择、满意度评级、省市区多列联动选择等。
代码示例：
通过TextPicker组件的range属性设置选项列表，selected属性绑定选中项索引，通过onChange回调监听选择变化。

@Entry
@Component
struct TextPickerDemo {
  @State selectedFruitIndex: number = 0;
  private fruits: string[] = ['苹果', '香蕉', '橙子', '葡萄'];
  build() {
    Column() {
      Text(`你选择了: ${this.fruits[this.selectedFruitIndex]}`)
        .fontSize(20)
        .margin(20);
      TextPicker({
        range: this.fruits,
        selected: this.selectedFruitIndex
      })
        .onChange((value: number) => {
          this.selectedFruitIndex = value;
          console.info(`当前选择: ${this.fruits[value]}`);
        })
    }
  }
}

2. 日期时间选择器（DatePicker/TimePicker/DateTimePicker）

核心功能：提供标准化的日期（年月日）、时间（时分秒）选择界面，DateTimePicker为两者的组合，避免手动输入格式错误。
适用场景：生日设置、预约日期选择、闹钟时间设置、日程提醒（精确到分钟）等。
代码示例：
通过DatePicker和TimePicker组件分别设置日期和时间，useMilitaryTime属性控制是否使用24小时制。

@Entry
@Component
struct DateTimePickerDemo {
  @State selectedDate: string = '2025-12-25';
  @State selectedTime: string = '14:30';
  build() {
    Column() {
      Text(`选择的日期: ${this.selectedDate}`)
      DatePicker({
        selected: this.selectedDate
      })
        .onChange((date: string) => {
          this.selectedDate = date;
        })
      Divider()
      Text(`选择的时间: ${this.selectedTime}`)
      TimePicker({
        selected: this.selectedTime,
        useMilitaryTime: true // 24小时制
      })
        .onChange((time: string) => {
          this.selectedTime = time;
        })
    }
  }
}

3. 日历视图选择器（CalendarPicker）

核心功能：以月历网格形式展示日期，支持查看星期分布、选择连续日期或查看特定日期标记（如节假日）。
适用场景：酒店/机票预订（选择入住/离店日期）、日程管理（查看整月安排）、打卡签到（标记已打卡日期）等。
特点：相比DatePicker的滚轮模式，CalendarPicker提供更宏观的时间视图，便于用户直观操作。

4. 文件选择器（FilePicker/DocumentViewPicker/PhotoViewPicker/AudioViewPicker）

核心功能：拉起系统文件选择界面，支持选择图片、文档、音频等文件类型，可配置多选、文件后缀过滤等功能。
适用场景：表单上传（选择本地文件）、文件查看（读取文本内容）、音频播放（选择音频文件）、图片编辑（选择本地图片）等。
权限与实现：

• 需在config.json中申请ohos.permission.READ_USER_STORAGE权限；
• 使用DocumentViewPicker选择文档（支持多选、后缀过滤），PhotoViewPicker选择图片/视频（后续版本不再演进，建议使用PhotoAccessHelper替代），AudioViewPicker选择音频文件。
  代码示例（文档选择）：

import { picker } from '@kit.CoreFileKit';
import { fs } from '@kit.CoreFileKit';
import { common } from '@kit.AbilityKit';

async openDocumentPicker() {
  const documentSelectOptions = new picker.DocumentSelectOptions();
  documentSelectOptions.fileSuffixFilters = ['.txt', '.json', '.csv']; // 过滤文件后缀
  documentSelectOptions.maxSelectNumber = 5; // 最多选择5个文件

  const context = getContext(this) as common.Context;
  const documentViewPicker = new picker.DocumentViewPicker(context);
  try {
    const uris = await documentViewPicker.select(documentSelectOptions);
    if (uris && uris.length > 0) {
      const filePath = uris[0];
      const file = fs.openSync(filePath, fs.OpenMode.READ_ONLY);
      const buffer = new Uint8Array(file.length);
      fs.readSync(file.fd, buffer);
      fs.closeSync(file);
      const content = new TextDecoder().decode(buffer);
      console.info('文件内容:', content);
    }
  } catch (err) {
    console.error('选择文件失败:', err);
  }
}

5. 第三方Picker组件（TimePickerView/OptionsPickerView）

核心功能：通过HAR（HarmonyOS Archive）包提供的选择器组件，支持时间选择（年月日时分、年月日等格式）、多级选项选择（一/二/三级联动），可自定义布局（如循环模式、分隔线、间距）。
适用场景：复杂时间选择（如出生日期）、多级联动选择（如省市区、分类筛选）等。
实现步骤：

1. 在应用模块中添加HAR包依赖（将pickerview.har复制到entry/libs目录）；
2. 初始化PickerOptions配置项（设置选中项、联动模式、循环模式等）；
3. 调用TimePickerView或OptionsPickerView的build方法显示选择器。
   特点：支持实时回调（如选项变化时更新UI），适用于需要高度自定义的场景。

6. 物联网设备选择器

核心功能：作为OpenHarmony选择器模块的扩展应用，帮助用户选择物联网设备（如智能家居中的家电设备），实现设备间的互联互通。
应用场景：智能家居控制（选择空调、灯光等设备进行操作）、工业物联网设备监控（选择传感器设备查看数据）等。
优势：依托OpenHarmony的跨设备协同能力，选择器可实现设备间的数据传递与联动，提升用户体验。

以上选择器组件覆盖了OpenHarmony开发中常见的交互需求，开发者可根据具体场景选择合适的组件，并结合权限配置、自定义布局等实现优化。