列表选择弹窗 (ActionSheet):

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-methods-action-sheet-V13

@Entry
@Component
struct ActionSheetExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('Click to Show ActionSheet')
        .onClick(() => {
          ActionSheet.show({
            title: 'ActionSheet title',
            subtitle: 'ActionSheet subtitle',
            message: 'message',
            autoCancel: true,
            confirm: {
              defaultFocus: true,
              value: 'Confirm button',
              action: () => {
                console.log('Get Alert Dialog handled')
              }
            },
            cancel: () => {
              console.log('actionSheet canceled')
            },
            onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
              console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
              console.log("dialog onWillDismiss")
              if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
                dismissDialogAction.dismiss()
              }
              if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
                dismissDialogAction.dismiss()
              }
            },
            alignment: DialogAlignment.Bottom,
            offset: { dx: 0, dy: -10 },
            sheets: [
              {
                title: 'apples',
                action: () => {
                  console.log('apples')
                }
              },
              {
                title: 'bananas',
                action: () => {
                  console.log('bananas')
                }
              },
              {
                title: 'pears',
                action: () => {
                  console.log('pears')
                }
              }
            ]
          })
        })
    }.width('100%').height('100%')
  }
}

yuanlaile 3楼

在HarmonyOS鸿蒙Next中，列表选择框的实现主要依赖于Picker组件。Picker组件允许用户从预定义的列表中选择一个或多个选项。以下是实现列表选择框的基本步骤：

导入相关模块：首先需要导入@ohos.picker模块，以便使用Picker组件。
定义数据源：创建一个数组作为Picker的数据源。这个数组包含了用户可以选择的所有选项。
创建Picker组件：在UI布局中使用Picker组件，并设置其属性，如range（数据源）、selected（默认选中的索引）等。
监听选择事件：通过onChange事件监听用户的选择，当用户选择某个选项时，可以获取到选中的值或索引。
样式自定义：可以通过style属性对Picker组件进行样式自定义，如字体大小、颜色、背景等。
多列选择：如果需要多列选择，可以使用Picker的multi属性，并设置每列的数据源。
动态更新数据：可以通过range属性动态更新Picker的数据源，使其能够根据应用状态变化而改变。
国际化支持：Picker组件支持国际化，可以根据系统语言自动切换显示的语言。

以下是简单的代码示例：

import picker from '@ohos.picker';

// 定义数据源
const data = ['选项1', '选项2', '选项3'];

// 创建Picker组件
let picker = new picker.Picker({
  range: data,
  selected: 0,
  onChange: (value) => {
    console.log('选中的值:', value);
  }
});

// 将Picker组件添加到页面
this.$element.appendChild(picker);

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现一个基本的列表选择框，并应用于各种需要用户选择的场景。

vueper 4楼

在HarmonyOS鸿蒙Next中，列表选择框（Picker）可以通过Picker组件实现。开发者可以在XML布局文件中定义Picker，并通过setRange方法设置选择范围。Picker支持单列和多列选择，适用于日期、时间、地区等场景。通过onValueChanged监听器可以获取用户选择的值，并触发相应逻辑。例如，实现一个简单的数字选择器：

<Picker
    ohos:id="$+id:numberPicker"
    ohos:width="match_parent"
    ohos:height="wrap_content"/>

在Java代码中初始化并设置范围：

Picker numberPicker = (Picker) findComponentById(ResourceTable.Id_numberPicker);
numberPicker.setRange(1, 10);
numberPicker.setValue(5);

通过onValueChanged监听选择变化：

numberPicker.setValueChangedListener((picker, oldVal, newVal) -> {
    // 处理选择值变化
});

Picker组件灵活易用，适合多种场景下的列表选择需求。