HarmonyOS鸿蒙Next中元服务如何实现popupwindow功能

h691938207 1楼•1 天前

可以参考一下代码：

export class PageIndex {

  pageString: string = "";

  pageIndex: number = 0;

  startIndex: number = 0;

  endIndex: number = 0;

}

@Entry
@Component
struct TestPopUp {

  @State pageColorStart: string = '#FF8C6754'

  @State isPopWindowShow: boolean = false

  @State mPageIndex: PageIndex[] = []

  aboutToAppear(): void {
    this.mPageIndex = this.computePagerIndex(50, 1024, true)
  }

  build() {

    Column() {

      Line()
        .width('100%')
        .height('1px')
        .backgroundColor(Color.Red)
        .bindPopup(this.isPopWindowShow, {
          builder: this.popupBuilder, // 气泡的内容
          placement: Placement.Bottom, // 气泡的弹出位置
          backgroundBlurStyle: BlurStyle.NONE,
          enableArrow: false,
          autoCancel: true,
          arrowOffset: 0,
          targetSpace: 0,
          radius: 0,
          width: "100%",
          showInSubWindow: true,
          maskColor: Color.Transparent,
          shadow: { radius: 0, color: Color.Transparent },
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.isPopWindowShow = false
            }
          }
        })

      Button("点击").onClick(() => {
        this.isPopWindowShow = true
      })

    }.justifyContent(FlexAlign.Center).width('100%').height('100%').backgroundColor(Color.White)

  }

  @Builder
  popupBuilder() {

    List() {

      ForEach(this.mPageIndex, (value: PageIndex) => {

        ListItem() {

          Stack({ alignContent: Alignment.TopEnd }) {

            Row() {
              Text(value.pageString).fontSize(13)
            }.justifyContent(FlexAlign.Center).width('100%').height('100%')

          }.backgroundColor('#f8f8fa')
            .borderWidth('1.2px')
            .borderRadius(5)
            .width('100%')
            .height(30)

        }.padding(4).onClick(() => {
          
        })

      }, (value: PageIndex) => {
        return value.pageIndex + "-" + value.pageString
      })

    }.width('100%')
      .height(200)
      .lanes(4)
      .borderRadius({ bottomLeft: 10, bottomRight: 10 })
      .backgroundColor("#ffffff")
      .padding(8)
      .onAreaChange((oldArea: Area, newArea: Area) => {
        
      })

  }

  computePagerIndex(pageSize: number, trackCounts: number, isAsc: boolean): PageIndex[] {

    const mPagerIndexs: PageIndex[] = [];

    const group: number = Math.ceil(trackCounts / pageSize);

    for (let i: number = 0; i < group; i++) {

      const pi: PageIndex = new PageIndex();

      pi.pageIndex = i + 1;

      if (isAsc) {

        pi.startIndex = pageSize * i + 1;
        pi.endIndex = Math.min(pageSize * (i + 1), trackCounts);
        pi.pageString = `${pi.startIndex}~${pi.endIndex}`;

      } else {

        pi.startIndex = trackCounts - pageSize * i;
        pi.endIndex = Math.max(trackCounts - pageSize * (i + 1) + 1, 1);
        pi.pageString = `${pi.startIndex}~${pi.endIndex}`;

      }

      mPagerIndexs.push(pi);

    }

    return mPagerIndexs;

  }

}

更多关于HarmonyOS鸿蒙Next中元服务如何实现popupwindow功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼•1 天前

在HarmonyOS鸿蒙Next中，元服务（Meta Service）实现PopupWindow功能可以通过ArkUI框架中的CustomDialogController来实现。CustomDialogController是用于控制自定义对话框的类，可以实现类似PopupWindow的效果。

首先，创建一个自定义对话框布局，使用@Component装饰器定义组件。然后，在元服务的代码中，实例化CustomDialogController，并通过builder方法设置对话框内容。最后，通过调用CustomDialogController的open和close方法来显示和关闭对话框。

以下是实现步骤的简要代码示例：

import { CustomDialogController } from '@ohos.arkui.advanced.CustomDialog';

@Entry
@Component
struct MyPopupWindow {
  private controller: CustomDialogController = new CustomDialogController({
    builder: this.buildDialog(),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: 0 },
    customStyle: true
  });

  buildDialog() {
    // 定义对话框内容
    return () => {
      Column() {
        Text('This is a PopupWindow')
          .fontSize(20)
          .margin({ top: 10, bottom: 10 });
        Button('Close')
          .onClick(() => {
            this.controller.close();
          });
      }
      .padding(20)
      .backgroundColor(Color.White)
      .borderRadius(10)
      .width('80%');
    };
  }

  build() {
    Column() {
      Button('Show PopupWindow')
        .onClick(() => {
          this.controller.open();
        });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

在这个示例中，CustomDialogController用于控制对话框的显示和关闭，buildDialog方法定义了对话框的内容和样式。通过点击按钮，可以触发对话框的显示和关闭操作。

ionicwang 3楼•1 天前

在HarmonyOS鸿蒙Next中，实现PopupWindow功能可以通过CommonDialog组件来实现。以下是一个简单示例：

创建布局文件：定义一个XML布局文件，用于PopupWindow的内容。

在代码中初始化CommonDialog，并设置布局和属性：

CommonDialog dialog = new CommonDialog(context);
dialog.setContentCustomComponent(layoutId); // 设置自定义布局
dialog.setAutoClosable(true); // 点击外部关闭
dialog.show(); // 显示PopupWindow

通过CommonDialog，你可以轻松实现类似PopupWindow的功能，并自定义其外观和行为。