如何使用OpenHarmony选择器

OpenHarmony选择器使用指南
OpenHarmony提供了多种选择器组件（如TextPicker、DatePicker、TimePicker、CalendarPicker、FilePicker等），覆盖文本、日期、时间、文件等常见选择场景。以下是具体使用方法及注意事项：

一、基础准备

1. 权限配置：
   若需访问本地文件（如FilePicker），需在config.json中添加存储权限：

   "reqPermissions": [
     { "name": "ohos.permission.READ_USER_STORAGE" }
   ]
   

2. 模块导入：
   根据选择器类型导入对应模块（如文件选择器需导入@ohos.file.picker，文本/日期选择器无需额外导入）：

   import picker from '@ohos.file.picker'; // 文件选择器
   

二、常见选择器类型及使用方法

1. 文本选择器（TextPicker）

适用于单列/多列文本选择（如性别、省市区）。

• 单列选择（性别）：

  @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]}`);
          })
      }
    }
  }
  

• 多列联动（省市区）：
  需配置多列range（如provinceList、cityList、districtList），并通过onChange动态更新后续列数据。

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

• DatePicker（日期选择）：
  用于选择年、月、日，支持设置日期范围：

  @State selectedDate: string = '2025-12-25';
  build() {
    DatePicker({
      selected: this.selectedDate,  // 默认选中日期
      start: '2000-01-01',          // 起始日期
      end: '2030-12-31'             // 结束日期
    })
      .onChange((date: string) => {
        this.selectedDate = date;
      })
  }
  

• TimePicker（时间选择）：
  用于选择时、分，支持12/24小时制：

  @State selectedTime: string = '14:30';
  build() {
    TimePicker({
      selected: this.selectedTime,
      useMilitaryTime: true         // 24小时制（false为12小时制）
    })
      .onChange((time: string) => {
        this.selectedTime = time;
      })
  }
  

• DateTimePicker（日期时间组合）：
  结合DatePicker和TimePicker，一次性选择日期和时间。

3. 日历选择器（CalendarPicker）

以月历网格形式展示日期，适用于选择连续日期（如酒店预订、日程管理）：

@State selectedDate: string = '2025-12-25';
build() {
  CalendarPicker({
    selected: this.selectedDate,
    multiple: true                // 支持多选
  })
    .onChange((date: string) => {
      this.selectedDate = date;
    })
}

4. 文件选择器（FilePicker）

用于选择本地文件（如TXT、图片），需处理权限和结果：

async openFilePicker() {
  const filePicker = new picker.FilePicker();
  filePicker.suffixFilter = ['txt', 'json', 'csv']; // 文件类型过滤
  const uri = await filePicker.show();              // 拉起选择界面
  
  if (uri && uri.length > 0) {
    try {
      const filePath = uri[0];
      const content = await this.readFileContent(filePath);
      this.fileContent = content;
    } catch (err) {
      console.error('读取文件失败:', err);
    }
  } else {
    this.fileContent = '用户未选择文件';
  }
}

private async readFileContent(filePath: string): Promise<string> {
  const file = await fs.open(filePath, fs.OpenMode.READ_ONLY);
  const buffer = new Uint8Array(await fs.stat(filePath).then(stat => stat.length));
  await fs.read(file.fd, buffer);
  await fs.close(file.fd);
  return new TextDecoder().decode(buffer);
}

三、注意事项

1. 临时权限处理：
   FilePicker返回的文件URI为临时授权，若需长期保存，需使用photoAccessHelper.createAsset接口保存到图库。
2. 结果错误处理：
   所有选择器操作需用try-catch捕获异常（如用户取消选择、权限不足），避免应用崩溃。
3. API兼容性：
   不同OpenHarmony版本的Picker参数可能有差异（如TextPickerDialogOptions），需参考对应版本的SDK文档。
4. 用户体验优化：
   • 设置合理的maxSelectNumber（如图片选择最多9张）；
   • 自定义确认/取消按钮样式（如acceptButtonStyle、cancelButtonStyle）；
   • 支持循环滚动（如cyclic1: true）。