Duilib – 点击按钮弹出模态对话框

1 模态对话框

是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击确定或取消按钮等将该对话框关闭。模态对话框垄断了用户的输入。当一个模态对话框打开时，用户只能与该对话框进行交互，而其他用户界面对象收不到输入信息。模态对话框下，用户需要操作目标对话框就必须先操作模态对话框。

2 在Duilib中实现模态对话框

2.1 需求示例

实现以下需求，在主页面中点击一个按钮弹出一个模态对话框，这里以下列例子为例：

点击添加任务，弹出添加任务子模态对话框：

，

整体界面如下：

2.2 界面设计

2.2.1 主界面xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="800,600" roundcorner="0,0" sizebox="6,6,6,6" caption="0,0,0,90" mininfo="800,600" >
    <Font id="0" name="微软雅黑" size="36" bold="true"/>
    <Font id="1" name="微软雅黑" size="28" bold="false"/>
    <Font id="2" name="微软雅黑" size="24" bold="false"/>
    <Font id="3" name="微软雅黑" size="72" bold="true"/>

    <VerticalLayout bkcolor="0xFFFFFFFF">
        <!-- 标题栏 -->
        <HorizontalLayout height="32" >
            <Control />
            <HorizontalLayout width="80">
                <Button name="Btn_Min" width="24" height="24" padding="0,0,0,0" normalimage="file='最小化.png'" hotimage="file='最小化悬停.png'"/>
                <Button name="Btn_Max" width="24" height="24" padding="0,0,0,0" normalimage="file='最大化.png'" hotimage="file='最大化悬停.png'"/>
                <Button name="Btn_Close" width="24" height="24" padding="0,0,0,0" normalimage="file='关闭.png'" hotimage="file='关闭悬停.png'"/>
            </HorizontalLayout>
        </HorizontalLayout>

        <!-- 主要功能区 -->
        <VerticalLayout >
            <!-- 功能按钮区 -->
            <HorizontalLayout height="80">
                <Control width="20"/>
                <VerticalLayout width="39" height="80">
                    <Button name="Btn_AddConversionTask" width="39" height="32" padding="0,6,0,0" normalimage="file='添加任务.png'" hotimage="file='添加任务悬停.png'" />
                    <Control height="5" />
                    <Text text="添加任务" />
                </VerticalLayout>
                <Control width="20"/>
                <VerticalLayout width="32">
                    <Button name="Btn_StartConvertTask" width="32" height="32" padding="0,6,0,0" normalimage="file='开始处理任务.png'" hotimage="file='开始处理任务悬停.png'" />
                    <Control height="5" />
                    <Text text="运行任务" />
                </VerticalLayout>   
                <Control />
            </HorizontalLayout>


        </VerticalLayout>

        <!-- 状态栏 -->
        <HorizontalLayout height="30">
        </HorizontalLayout>

    </VerticalLayout>
</Window>

2.2.1 子模态对话框xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="640,260" roundcorner="0,0" sizebox="0,0,0,0" caption="0,0,0,90" mininfo="640,260" maxinfo="640,260">
    <VerticalLayout bkcolor="0xFFFFFFFF">
        <!-- 标题栏 -->
        <HorizontalLayout height="32" >
            <Control />
            <HorizontalLayout width="32">
                <Button name="Btn_Close" width="24" height="24" padding="0,0,0,0" normalimage="file='关闭.png'" hotimage="file='关闭悬停.png'"/>
            </HorizontalLayout>
        </HorizontalLayout>

        <!-- 主要功能区 -->
        <VerticalLayout height="140">
            <HorizontalLayout height="60">
                <Text text="选择输入文件夹" width="90" padding="10,8,0,0"/>
                <Button name="Btn_Open_Input_Folder" width="24" height="24" padding="10,0,0,0" normalimage="file='打开文件夹.png'" hotimage="file='打开文件夹悬停.png'"/>   
                <Text name="Text_Input_Folder" height="50" bordercolor="0xFF000000" bordersize="1" padding="20,0,10,0" />
            </HorizontalLayout>
            <Control />
            <HorizontalLayout height="60" >
                <Text text="选择输出文件夹" width="90" padding="10,8,0,0"/>
                <Button name="Btn_Open_Output_Folder" width="24" height="24" padding="10,0,0,0" normalimage="file='打开文件夹.png'" hotimage="file='打开文件夹悬停.png'"/>
                <Text name="Text_Output_Folder" height="50" bordercolor="0xFF000000" bordersize="1" padding="20,0,10,0" />
            </HorizontalLayout>         
        </VerticalLayout>

        <HorizontalLayout height="60" >
            <Control />
            <Button name="Btn_AddTask" width="60" height="40" bkcolor="#0xFF333303" text="添加任务" textcolor="0xFFFFFFFF" hottextcolor="0xFF1ECC94" borderround="3,3"/>
            <Control width="20"/>
            <Button name="Btn_CancelAdd" width="60" height="40" bkcolor="#0xFF333303" text="取消添加" textcolor="0xFFFFFFFF" hottextcolor="0xFF1ECC94" borderround="3,3"/>
            <Control />
        </HorizontalLayout>

        <Control height="10" />
    </VerticalLayout>
</Window>

2.3 代码实现

2.3.1 主界面点击添加任务按钮弹出模态对话框

    // 添加任务按钮
    else if (_tcsicmp(msg.pSender->GetName(), MainWnd_Btn_AddConversionTask_Name) == 0)
    {
        AddTaskDialog addTaskDialog;
        addTaskDialog.Create(this->m_hWnd, _T("添加任务"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
        addTaskDialog.CenterWindow();
        if (addTaskDialog.ShowModal() == 0)
        {
            if (addTaskDialog.IsAddTask())
            {
                MessageBox(NULL, "a", NULL, NULL);
            }
        }
    }

这里需要注意的是，子模态对话框在创建是需要设置父窗口为主界面，也就是：

addTaskDialog.Create(this->m_hWnd, _T("添加任务"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);

然后通过ShowModel()函数弹出模态对话框。

2.3.2 子模态对话框添加任务与取消添加按钮的实现

在子模态对话框中，不管是点击添加任务按钮或者是点击取消添加按钮，都需要主动关闭子模态对话框

    // 添加任务
    else if (_tcsicmp(msg.pSender->GetName(), AddTaskWnd_Btn_AddTask_Name) == 0)
    {
        m_bIsAddTask = true;
        ::SendMessage(this->GetHWND(), WM_CLOSE, NULL, NULL);
    }
    // 取消添加任务
    else if (_tcsicmp(msg.pSender->GetName(), AddTaskWnd_Btn_CancelAdd_Name) == 0)
    {
        m_bIsAddTask = false;
        ::SendMessage(this->GetHWND(), WM_CLOSE, NULL, NULL);
    }

在模态对话框中的添加任务按钮中增加相关成员变量保存需要在主界面中获取的数据，然后通过成员函数调用访问数据。