在 Maui 中使用 DialogX 展示底部菜单

DialogX Android Sdk

DialogX 是一个开源的 Android 对话框组件库，方便易用，扩展性强，轻松实现各种对话框、菜单和提示效果。 DialogX 项目在 github 上开源，地址：https://github.com/kongzue/DialogX。

DialogX 绑定库

在 MauiBinding 项目中已为 DialogX 创建好了绑定类库，并可在 Nuget 下载。通过 Nuget 包管理器或 CLI 安装 Chi.MauiBinding.Android.DialogX 即可使用 DialogX。

初始化

创建一个新的 Maui 项目，并添加Nuget包 Chi.MauiBinding.Android.DialogX 引用。

打开并编辑 DialogXMaui/Platforms/Android/MainApplication.cs, 重写 OnCreate 方法，对 DialogX 进行初始化。

public override void OnCreate() {
    base.OnCreate();

    Com.Kongzue.Dialogx.DialogX.Init(this);
}

展示底部菜单

通过查阅 DialogX Wiki 可知，调用 BottomDialog.Show() 可弹出底部菜单。

打开并编辑 MainPage.xaml.cs，修改 OnCounterClicked 方法如下：

private void OnCounterClicked(object sender, EventArgs e)
{
    BottomMenu.Show("菜单", new[] { "菜单1", "菜单2", "菜单3" });
}

运行项目并点击按钮，将弹出底部菜单。

菜单项选中回调

根据 DialogX Wiki 所描述，可通过 SetOnMenuItemClickListener() 方法来设置菜单项点击的回调处理。

在 Visual Studio 中转到 SetOnMenuItemClickListener 方法的定义，可以发现 SetOnMenuItemClickListener 方法接受类型为 IOnMenuItemClickListener 的参数。在 C# 中不支持匿名类的创建，因此需要先创建一个继承 IOnMenuItemClickListener 接口的类，在调用 SetOnMenuItemClickListener 的时候实例化并传入。

创建名为 MenuItemClickListener 的类：

public class MenuItemClickListener : Java.Lang.Object, IOnMenuItemClickListener
{
    public Func<BottomMenu, string, int, bool> OnMenuItemClick;

    public bool OnClick(Object p0, ICharSequence p1, int p2) {
        if (p0 is BottomMenu bm) {
            return OnMenuItemClick?.Invoke(bm, p1.ToString(), p2) ?? false;
        }

        return false;
    }
}

OnClick 是定义在 IOnMenuItemClickListener 接口中的方法，在点击某个菜单项时被调用。当 OnClick 被调用时，将执行 OnMenuItemClick。OnMenuItemClick 在实例化 MenuItemClickListener 时赋值。

修改 OnCounterClicked 方法，设置菜单项点击回调，并在回调方法中调用 DialogX 的 PopTip 弹出文本提示，展示选中菜单名称及其索引：

private void OnCounterClicked(object sender, EventArgs e) {

    BottomMenu.Show("菜单", new[] { "菜单1", "菜单2", "菜单3" })?
        .SetOnMenuItemClickListener(new MenuItemClickListener() {
            OnMenuItemClick = (menu, menuName, menuIndex) => {
                PopTip.Show($"{menuName} has been clicked! index: {menuIndex}");
                return false;
            }
        });
}

运行项目并点击按钮，点击底部菜单中的某一菜单项后，将关闭底部菜单并弹出 PopTip 提示，展示选中菜单名称及其索引。

推荐内容

• 在 Maui 中使用 DialogX 展示输入对话框
• 在 Maui 中使用 DialogX 展示消息对话框

请查阅 DialogX Wiki 获取主题设置、自定义布局、自定义动画等更多用法。

源码获取

扫描下方二维码，关注公众号捕获异常，回复 maui 获取源码。