【鸿蒙应用ArkTS开发系列】-自定义底部菜单列表弹窗

前言

上一篇文章中我们实现了选择图片、选择文件、拍照的功能 。
链接在这里，大家有兴趣可以点击 《【鸿蒙应用ArkTS开发系列】- 选择图片、文件和拍照功能实现》 。

之前的效果

这一节我们要实现的效果

上一节 我们是在页面布局中使用三个按钮来作为入口，但是有些场景，我们希望应用以底部菜单弹窗的形式来与用户进行操作交互。那在鸿蒙原生应用中，一个自定义的底部菜单列表弹窗应该怎么实现呢，这一节，我们来讲下这个基础知识。

创建Demo工程

我们使用Empty Ability 模板创建一个Demo工程。

创建dialog 文件夹

创建ListMenu 接口

在src->main->ets ->dialog 文件夹下创建ListMenu.ets文件,完整代码如下：

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

这里我们对底部菜单列表的菜单选项数据进行抽象，抽取出通用字段：

• id 唯一字段
• text 显示的菜单文本
• icon 文本左侧显示的图标，非必传
• fontColor 文本颜色 非必传
• onItemClick 点击事件

下面我们来看下自定义弹窗类的代码实现。

创建自定义弹窗 ListMenuDialog

在src->main->ets ->dialog 文件夹下创建ListMenuDialog.ets文件,完整代码如下：

/**
 * 自定义底部列表菜单弹窗
 */
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();
      }
    })
  }
}

下面我们对这个自定义弹窗代码进行一些讲解：

1. 首先我们定义一个ListMenuDialog 的结构体；
   export struct ListMenuDialog 。

2. 使用@CustomDialog装饰器
   我们使用@CustomDialog装饰这个ListMenuDialog 结构体，表明我们这个结构体是一个自定义对话框。

3. 定义自定义弹窗控制器CustomDialogController
   通过定义CustomDialogController，在弹窗内部可以触发弹窗的打开跟关闭。

4. title
   弹窗标题，这里定义为Prop, 可以与页面进行状态同步，对于有弹窗标题动态修改的场景，可以使用到。

5. titleVisible
   控制标题是否显示，如果弹窗没有标题，通过传递false进行设置标题不显示。

6. menuArray
   列表菜单数据源 ，通过使用ForEach进行遍历调用 我们MenuItem子项 绘制列表UI。

7. MenuItem
   这个是菜单项UI布局方法，我们使用@Builder装饰。

8. 分隔线
   通过给Item设置 border，绘制底部边框来实现分隔线的效果。

9. 菜单按下点击色
   通过设置 stateStyles，给Item配置两个@Style装饰的样式itemNormalStyle 跟itemPressedStyle，来实现按下Item显示一个点击效果。

这样我们就完成了一个自定义底部菜单列表弹窗，下面我们在页面中来进行实际使用。

使用自定义弹窗

我们在Index.ets 中添加如下代码：

import { ListMenu } from '../dialog/ListMenu';
import { ListMenuDialog } from '../dialog/ListMenuDialog';

@Entry
@Component
struct Index {
  @State message: string = '点击弹窗';
  private customDialogController: CustomDialogController;

  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();
  }
}

我们定义了一个CustomDialogController 弹窗控制器，这里我们对CustomDialogController的一些属性进行下讲解，

• builder:
  这个是设置一个@CustomDialog装饰的弹窗对象，这里使用我们上面创建的ListMenuDialog自定义弹窗。
• cancel:
  这个是弹窗取消时候会触发的回调函数。
• autoCancel:
  true 可以通过触击弹窗外空白处使得弹窗关闭，false ,则不可以。
• alignment:
  这个是弹窗的显示位置，这里我们设置为DialogAlignment.Bottom，在底部弹出。
• customStyle ：
  这个是是否自定义弹窗样式，我们是自定义弹窗，设置为true即可。

我们通过构建一个弹窗控制器来控制弹窗的显示跟关闭，通过构建ListMenuDialog对象来配置弹窗数据源和显示样式，包括标题，标题是否显示，弹窗菜单的样式。 那接下来我们直接运行demo看下效果。

打包测试

打包安装到真机上，需要我们给项目配置签名信息。我们点击File -> Project Structure ->Project ,选择 Signing Configs面板，勾选 Support HarmonyOS 跟Automatically generate signature，自动生成调试签名，生成完毕后，运行安装到手机上。

效果演示

默认效果

const menuList: ListMenu[] = [
      {
        id: '1',
        text: '选择图片',
        fontColor: $r("app.color.blue_089ed9")
      },

菜单带图标效果

const menuList: ListMenu[] = [
      {
        id: '1',
        text: '选择图片',
        icon: $r('app.media.ic_picture'),
        onItemClick: () => {
          console.log('点击了选择图片');
        }
      },
      {
        id: '2',
        text: '选择文件',
        icon: $r('app.media.ic_file'),
        onItemClick: () => {
          console.log('点击了选择文件');
        }
      }
 ]

设置文本颜色效果

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('点击了选择文件');
        }
      }
]

不同文本颜色效果

const menuList: ListMenu[] = [
      {
        id: '1',
        text: '选择图片',
        fontColor: $r("app.color.blue_089ed9"),
        onItemClick: () => {
          console.log('点击了选择图片');
        }
      },
      {
        id: '2',
        text: '选择文件',
        fontColor: $r("app.color.green_2f7e04"),
        onItemClick: () => {
          console.log('点击了选择文件');
        }
      }
]

无标题效果

 builder: ListMenuDialog(
        {
          menuArray: menuList,
          controller: this.customDialogController
        }),

大家也可以 在 ListMenu中增加一些其他的字段属性来拓展弹窗样式，比如图标的大小、文本的对齐方式等等。

那本章内容就到此结束，谢谢大家的阅读！ 有疑问的可以在评论区留言交流。