HarmonyOS鸿蒙Next中在弹出框内如何更新UI

HarmonyOS鸿蒙Next中在弹出框内如何更新UI 目前练习时想实现一个筛选功能，点击按钮显示弹出框，然后在弹出框内展示筛选内容。弹框使用了一个三方库，自定义弹出框用@Builder修饰了，筛选内容为列表，但是数据接口有三层，目前想点击item后，可以更新item的样式。

以下是部分代码

//实体类
@Observed
export class SiftBeanDataAreaListList {
  title?: string = "";
  content?: number = 0;
  type?: number = 0;
  param1?: string = "";
  isSelect?: boolean = false;
}

@Observed
export class SiftBeanDataAreaList {
  title?: string = "";
  list?: SiftBeanDataAreaListList[] = [];
}

@Observed
export class SiftBeanDataArea {
  topTitle?: string = "";
  list?: SiftBeanDataAreaList[] = [];
}

@Observed
export class SiftBeanData {
  area?: SiftBeanDataArea = new SiftBeanDataArea();
}

//弹框
SmartDialog.showAttach({
  targetId: "region",
  builder: customLoading,
  builderArgs: this.areaListList,
  alignment: Alignment.Bottom,
  maskBuilder: dialogCustomMask,
  clickMaskDismiss: true,
})

//自定义弹框样式

[@Builder](/user/Builder)
export function customLoading(areaList:SiftBeanDataAreaListList[]) {
  Column() {
    Text('区域选择')
      .fontSize(16)
      .fontColor($r('app.color.color_ff323233'))
      .fontWeight(700)
      .padding({ top: 10, bottom: 10 })

    List() {
      ForEach(areaList, (item: SiftBeanDataAreaListList,index:number) => {
        ListItem() {
          Text(item.title)
            .fontColor(item.isSelect ? $r('app.color.color_ff2A6EEB') : $r('app.color.color_ff323233'))
            .padding({ top: 10, bottom: 10 })
            .onClick(() => {
              for (let i = 0; i < areaList.length; i++) {
                areaList[i].isSelect = false;
              }
              item.isSelect = !item.isSelect;
              areaList[index] = item;
            })
        }
      }, (item: SiftBeanDataAreaListList, index: number) => json.stringify(item))
    }
    .scrollBar(BarState.Off)
    .width('100%')
  }
  .alignItems(HorizontalAlign.Start)
  .backgroundColor(Color.White)
  .padding({ left: 16, right: 16 })
  .width('100%')
}

更多关于HarmonyOS鸿蒙Next中在弹出框内如何更新UI的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

点击item后，使用@state 装饰的变量来刷新UI。

更多关于HarmonyOS鸿蒙Next中在弹出框内如何更新UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，若需在弹出框内更新UI，可以使用UIAbility和Window的相关机制。首先，通过UIAbility启动弹出框，然后在弹出框的Window中动态更新UI。具体步骤如下：

  1. 创建弹出框的UI页面：在resources/base/layout目录下定义弹出框的XML布局文件。

  2. 启动弹出框：在UIAbility中使用startAbility方法启动弹出框，传入相应的Want对象。

  3. 更新UI：在弹出框的Window中，通过findComponentById获取UI组件，并调用setText、setVisibility等方法更新UI。

  4. 处理异步操作：若更新UI涉及异步操作，可以使用TaskDispatcher或EventHandler确保UI更新在主线程执行。

例如，更新弹出框中的文本：

// 获取UI组件
let textComponent = this.findComponentById('text_id') as Text;
// 更新文本
textComponent.setText('更新后的文本');

通过上述步骤，可以在HarmonyOS鸿蒙Next的弹出框内动态更新UI，确保界面响应及时且符合预期。

在HarmonyOS鸿蒙Next中，更新弹出框内的UI可以通过以下步骤实现：

  1. 获取UI控件引用：首先，通过findComponentById方法获取弹出框内需要更新的UI控件引用。
  2. 更新UI状态：使用获取的控件引用，调用相应的方法（如setText、setBackgroundColor等）来更新UI的状态。
  3. 刷新UI：在某些情况下，可能需要调用invalidate或requestLayout方法来强制刷新UI，确保更改立即生效。

例如，更新弹出框中的文本内容：

Text text = findComponentById(ResourceTable.Id_text);
text.setText("更新后的文本");

确保这些操作在主线程中执行，以避免UI线程冲突。

回到顶部