HarmonyOS 鸿蒙Next 自定义底部弹窗

/
 * 菜单
 */
export interface ListMenu {
  id: string;
  text: string | Resource;
  icon?: Resource;
  fontColor?: ResourceColor;
  onItemClick?: () => void;
}

/
 * 自定义底部列表菜单弹窗
 */
import { ListMenu } from ‘./ListMenu’;

@CustomDialog
export struct ListMenuDialog {
  @Prop title: string = ‘’;
  @State titleVisible: boolean = true;
  @State menuArray: ListMenu[] = [];
  controller: CustomDialogController;
  onCancel?: () => void;

  @Styles
  itemPressedStyle() {
    .backgroundColor(’#e2e2e2’)
  }

  @Styles
  itemNormalStyle() {
    .backgroundColor(Color.White)
  }

  build() {
    Column() {
      Text(this.title)
        .fontColor(’#999999’)
        .fontSize(14)
        .margin({ top: 10 })
        .maxLines(1)
        .visibility(this.titleVisible ? Visibility.Visible : Visibility.None)

      if (this.menuArray.length > 0) {

        Scroll() {
          Column() {
            ForEach(this.menuArray, (item: ListMenu, index: number) => {

              this.MenuItem(item, index)

            }, (index: number) => {
              return index.toString();
            })
          }
        }
        .backgroundColor(Color.White)
        .borderRadius(8)
        .margin({ top: 10 })
        .constraintSize({
          maxHeight: ‘40%’
        })
      }

      Text(‘取消’)
        .width(‘100%’)
        .height(50)
        .fontColor(Color.Black)
        .fontSize(16)
        .margin({ top: 15 })
        .backgroundColor(Color.White)
        .textAlign(TextAlign.Center)
        .borderRadius(8)
        .stateStyles({
          normal: this.itemNormalStyle,
          pressed: this.itemPressedStyle
        })
        .onClick(() => {
          if (this.controller) {
            this.controller.close();
          }
          if (this.onCancel) {
            this.onCancel();
          }
        })
    }
    .padding(10)
    .alignItems(HorizontalAlign.Center)
    .width(‘100%’)
    .backgroundColor(’#f8f8f8’)
    .borderRadius({
      topLeft: 15,
      topRight: 15
    })

  }

  @Builder
  MenuItem(item: ListMenu, index: number) {
    Row() {

      Image(item.icon)
        .width(30)
        .height(30)
        .visibility(item.icon ? Visibility.Visible : Visibility.None)

      Text(item.text)
        .fontColor(item.fontColor ? item.fontColor : Color.Black)
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .margin({ left: 5 })
    }
    .width(‘100%’)
    .height(50)
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .borderStyle({ bottom: BorderStyle.Solid })
    .borderColor(’#f8f8f8’)
    .borderWidth({
      bottom: index === this.menuArray.length - 1 ? 0 : 1
    })
    .stateStyles({
      normal: this.itemNormalStyle,
      pressed: this.itemPressedStyle
    })
    .onClick(() => {
      if (this.controller) {
        this.controller.close();
      }
      if (item.onItemClick) {
        item.onItemClick();
      }
    })
  }
}

调用

import { ListMenu } from ‘…/dialog/ListMenu’;
import { ListMenuDialog } from ‘…/dialog/ListMenuDialog’;

@Entry
@Component
struct Index {
  @State message: string = ‘点击弹窗’;
  private customDialogController:CustomDialogController= new CustomDialogController({
    builder: this.showBottomDialog()
});

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(this.showBottomDialog.bind(this))
      }
      .width(‘100%’)
    }
    .height(‘100%’)
  }

  showBottomDialog() {
    const menuList: ListMenu[] = [
      {
        id: ‘1’,
        text: ‘选择图片’,
        // fontColor: $r(“app.color.blue_089ed9”),
        onItemClick: () => {
          console.log(‘点击了选择图片’);
        }
      },
      {
        id: ‘2’,
        text: ‘选择文件’,
        // fontColor: $r(“app.color.blue_089ed9”),
        onItemClick: () => {
          console.log(‘点击了选择文件’);
        }
      },
      {
        id: ‘3’,
        text: ‘拍照’,
        // fontColor: $r(“app.color.blue_089ed9”),
        onItemClick: () => {
          console.log(‘点击了拍照’);
        }
      },
    ];

    this.customDialogController = new CustomDialogController({
      builder: ListMenuDialog(
        {
          title: ‘多媒体操作’,
          menuArray: menuList,
          controller: this.customDialogController
        }),
      cancel: () => {
        console.log(‘点击了取消’);
      },
      autoCancel: true,
      alignment: DialogAlignment.Bottom,
      customStyle: true
    });
    this.customDialogController.open();
  }

  hideBottomDialog() {
    this.customDialogController.close();
  }
}