HarmonyOS中自定义半模态弹窗

鸿蒙 ArkUI 中自定义弹出框可以使用openCustomDialog，本篇文章简称为 Dialog,我这里选择使用半模态弹窗，而没有使用Dialog，是因为Dialog的动画效果中感觉差点意思，给Dialog设置动画效果，蒙层也跟着一起实现了动画，感觉效果不太好，不符合预期效果。

DialogHelper.showDatePickerDialog({
  dateType:DateType.Hm,
  transition:TransitionEffect.translate({y:300}).animation({duration:300}),
  onAction:(date)=>{

  }
})

经过测试，半模态弹窗的动画效果比较符合预期，动画效果只针对视图，不针对蒙层，这是主要选中半模态弹窗的原因；如果要是用底部弹出框，我个人觉得使用半模态弹窗效果更好。

/**
   * 显示底部单列选中弹框
   * @param tittle  自定义标题
   * @param items   列表数据
   * @param callBack 选中回调
   * @param selectItem 默认选中项
   */
static showBottomList(tittle: string, items: Array<WorkItem>,
                      callBack: (item: WorkItem) => void, selectItem?: WorkItem) {
  let menuOptions: BottomListOptions = {
    tittle: tittle,
    items: items,
    dialogId: DialogHelper.generateId(),
    height: SheetSize.FIT_CONTENT,
    mode: SheetMode.EMBEDDED,
    preferType: SheetType.BOTTOM,
    blurStyle: BlurStyle.BACKGROUND_ULTRA_THICK,
    dragBar: false,
    radius: { topLeft: 16, topRight: 16 },
    selectItem: selectItem,
    onSelected: (item) => {
      callBack(item)
    }
  };
  DialogHelper.showBindSheet(wrapBuilder(BottomListBuild), menuOptions);
}

这里用到了harmony-dialog 三方库，DialogHelper类是三方库中的类，里面还有很多弹出框的方法，想了解的自己可以去三方库查看。

BottomListOptions继承自BottomListOptions类，可以自己定义一些属性。

/**
 * 底部列表选择配置参数
 */
export interface  BottomListOptions extends  BaseSheetOptions{
  tittle:string  // 标题
  selectItem?: WorkItem // 默认选中项
  items: Array<WorkItem>  // 数据
  listScroller: Scroller
  onSelected:  (item:WorkItem) => void  //选择的数据回调
}

这些属性可以传递到自定义组件，比如这里定义了标题、数据等，可以在自定义组件中直接使用

import { DialogHelper } from '@pura/harmony-dialog';
import { BottomListOptions } from '../model/BottomListOptions';
import { WorkItem } from '../model/OutTypeBean';

/**
 * 底部列表弹窗构建
 * @param options
 */
@Builder
export function BottomListBuild(options: BottomListOptions) {

  Column() {
    Stack() {
      Text(options.tittle)
        .fontSize(20)
        .fontColor(Color.Black)
        .fontWeight(600)
        .width("100%")
        .textAlign(TextAlign.Center)
      Image($r("app.media.icon_close")).width(22).height(22)
        .onClick(() => {
          DialogHelper.closeBindSheet(options.dialogId || "")
        })
    }.padding(15).alignContent(Alignment.End)
    .backgroundColor($r("app.color.bg_color"))

    List({scroller: options.listScroller}) {
      ForEach(options.items, (item: WorkItem) => {
        ListItem() {
          Text(item.V).fontSize(16).fontColor(item.V == options.selectItem?.V ? "#1482DC" : Color.Gray)
        }.width("100%").height(40)
        .onClick(() => {
          options.onSelected(item)
          DialogHelper.closeBindSheet(options.dialogId || "")
        })
      })
    }.width("100%")
    .height(250)
    .scrollBar(BarState.Off)
  }.backgroundColor(Color.White)
  .safeAreaPadding({ bottom: 20 })
}

将参数放在BottomListOptions中，传递到自己定义组件中，这样可以保证半模态数据及时刷新。