HarmonyOS鸿蒙Next中使用TextPickerDialog.show方法onchange时如何修改range参数并改变弹窗内容？

HarmonyOS鸿蒙Next中使用TextPickerDialog.show方法onchange时如何修改range参数并改变弹窗内容？使用TextPickerDialog.show方法onchange的时候修改range的参数怎么让弹窗中的内容也改变？比如地址选择器的实现，省份选择后市区列对应的内容需要改变。

nodeper 1楼•3 天前

这边写了一个demo，修改demo里面的fruits，即可让弹窗中的内容也改变，demo如下：

@Entry
@Component
export struct TextPickerDialogExample {

  private select: number | number[] = 0

  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5', 'banana6', 'banana7']

  @State v:string = '';

  build() {

    NavDestination(){

      Row() {

        Column() {

          Button("TextPickerDialog:" + this.v)
            .margin(20)
            .onClick(() => {

              TextPickerDialog.show({

                range: this.fruits,
                selected: this.select,
                disappearTextStyle: {color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}},
                textStyle: {color: Color.Black, font: {size: 20, weight: FontWeight.Normal}},
                selectedTextStyle: {color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}},
                onAccept: (value: TextPickerResult) => {
                  // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
                  this.select = value.index
                  console.log(this.select + '')
                  // 点击确定后，被选到的文本数据展示到页面
                  this.v = value.value as string
                  console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
                },
                onCancel: () => {
                  console.info("TextPickerDialog:onCancel()")
                },
                onChange: (value: TextPickerResult) => {
                  console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
                },
                onDidAppear: () => {
                  console.info("TextPickerDialog:onDidAppear()")
                },
                onDidDisappear: () => {
                  console.info("TextPickerDialog:onDidDisappear()")
                },
                onWillAppear: () => {
                  console.info("TextPickerDialog:onWillAppear()")
                },
                onWillDisappear: () => {
                  console.info("TextPickerDialog:onWillDisappear()")
                }
              })
            })

        }
      }
    }
  }
}

更多关于HarmonyOS鸿蒙Next中使用TextPickerDialog.show方法onchange时如何修改range参数并改变弹窗内容？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼•3 天前

在HarmonyOS鸿蒙Next中，使用TextPickerDialog.show方法时，onChange事件触发的时机是用户选择的值发生变化。如果你想在onChange事件中修改range参数并改变弹窗内容，可以通过以下步骤实现：

获取TextPickerDialog实例：首先，确保你已经创建了一个TextPickerDialog实例，并设置了初始的range参数。
在onChange事件中更新range：在onChange事件回调中，你可以通过调用TextPickerDialog的setRange方法来更新range参数。
重新显示弹窗：更新range后，调用TextPickerDialog的show方法重新显示弹窗，以反映新的range内容。

示例代码如下：

let dialog = new TextPickerDialog({
  range: ['Option1', 'Option2', 'Option3'],
  onChange: (value, index) => {
    // 根据当前选择的value或index，动态修改range
    let newRange = ['NewOption1', 'NewOption2', 'NewOption3'];
    dialog.setRange(newRange);
    dialog.show(); // 重新显示弹窗
  }
});

dialog.show();

在这个例子中，当用户选择某个选项时，onChange事件会触发，range参数会被更新为['NewOption1', 'NewOption2', 'NewOption3']，然后弹窗会重新显示，展示新的选项内容。

注意：TextPickerDialog的setRange方法会直接替换原有的range内容，因此在onChange中更新range时，确保新的range参数符合你的需求。

bupafengyu 3楼•3 天前

在HarmonyOS鸿蒙Next中使用TextPickerDialog.show时，可以通过在onChange回调中动态修改range参数来改变弹窗内容。首先，创建TextPickerDialog并设置onChange回调，在回调中更新range参数，然后调用setRange方法更新弹窗内容。示例如下：

TextPickerDialog dialog = new TextPickerDialog(context);
dialog.setRange(rangeList); // 初始range
dialog.setOnChangeListener((index, value) -> {
    List<String> newRange = updateRange(rangeList); // 更新range
    dialog.setRange(newRange); // 设置新的range
});
dialog.show();

通过这种方式，可以在用户操作时动态调整弹窗内容。