HarmonyOS：利用PopupDialog实现多选效果

一、场景

  点击Button后弹出多个选项，用户选中其中一个选项后将选项内容显示到Button上。

二、实现效果

三、代码

semester = (Button) findComponentById(ResourceTable.Id_semester);
semester.setClickedListener(component -> {
    String []items = {"全部", "1", "2"};
    PopupDialog popupDialog = new PopupDialog(getContext(), component);
    RadioContainer radioContainer = new RadioContainer(getContext());
    for (int i = 0; i < 3; i++) {
        RadioButton radioButton = new RadioButton(getContext());
        radioButton.setText(items[i]);
        radioButton.setWidth(375);
        radioButton.setHeight(75);
        ShapeElement bg = new ShapeElement();
        bg.setRgbColor(RgbColor.fromArgbInt(Color.getIntColor("#85F2DC")));
        bg.setCornerRadius(30);
        radioButton.setBackground(bg);
        radioButton.setTextSize(48);
        radioButton.setTextColorOff(Color.WHITE);
        radioButton.setMarginsLeftAndRight(10, 10);
        radioButton.setMarginsTopAndBottom(10, 10);
        radioButton.setTextAlignment(TextAlignment.LEFT);
        radioButton.setClickedListener(component1 -> {   //关键代码
            semester.setText(radioButton.getText());
            popupDialog.destroy();
        });
        radioContainer.addComponent(radioButton);
    }
    radioContainer.setPadding(10, 10, 10, 10);
    popupDialog.setCustomComponent(radioContainer);   //添加组件
    popupDialog.setHasArrow(true);
    popupDialog.setArrowOffset(25);
    popupDialog.setMode(LayoutAlignment.LEFT | LayoutAlignment.BOTTOM);
    popupDialog.setBackColor(new Color(Color.getIntColor("#EEEEFF")));
    popupDialog.show();
});

  semester为Button，点击semester就弹出一个PopupDialog。由于要实现多选，所以PopupDialog的Component是一个自定义的RadioContainer，RadioContainer中包含三个选项，需要对其添加点击事件监听器：

radioButton.setClickedListener(component1 -> {
    semester.setText(radioButton.getText());
    popupDialog.destroy();
});

  当我们点击一个RadioButton时，Button会将自己的Text设置为RadioButton的Text，然后退出PopupDialog，达到选择的效果。