EasySize - Dialog resizing in no time!

本文介绍了一个名为EasySize的类,用于简化MFC对话框中控件的布局调整。通过几个简单的宏指令即可实现对话框及其控件在不同窗口尺寸下的自适应布局,并提供了设置对话框最小尺寸的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  对话框中控件的布局是个麻烦的事情,因此楼主本人写了个宏简化对控件进行布局,见控件布局通用解决方案。但又从网上找到了类似但功能更全的类EasySize,见EasySize - Dialog resizing in no time!

  现将EasySize的用法及源码摘录于此,备份以方便查找。

  1.首先将EasySize.h拷贝到工程文件夹中,然后在stdafx.h中包含该头文件:

#include "EasySize.h"

  2. 在对话框类声明中添加DECLARE_EASYSIZE宏:

class CEasySizeDemoDlg : public CDialog
{
    DECLARE_EASYSIZE
    ...

  3. 在OnInitDialog()函数中添加INIT_EASYSIZE宏(注意有分号):

BOOL CEasySizeDemoDlg::OnInitDialog()
{
    CDialog::OnInitDialog();
    ...    
    INIT_EASYSIZE;
    return TRUE; // return TRUE unless you set the focus to a control
}

  4. 响应WM_SIZE消息,在响应函数中添加UPDATE_EASYSIZE宏(注意有分号):

void CEasySizeDemoDlg::OnSize(UINT nType, int cx, int cy) 
{
    CDialog::OnSize(nType, cx, cy);
    UPDATE_EASYSIZE;
}

  5. 如果需要限制对话框有一个最小尺寸,首先在资源视图中为对话框添加上最大化最小化按钮,然后Class Wizard中选择Class Info标签,在Message fileter下拉列表中选择Window,然后再点击Message Maps标签,就出现WM_SIZING消息了,添加该消息的响应函数:

void CEasySizeDemoDlg::OnSizing(UINT fwSide, LPRECT pRect) 
{
    CDialog::OnSizing(fwSide, pRect);
    EASYSIZE_MINSIZE(280,250,fwSide,pRect);
}

  这样就把对话框的最小尺寸限制在(280, 250)上了。


  6.添加控件布局映射,放到消息映射之后,基本格式如下:

BEGIN_EASYSIZE_MAP(class_name)
    ...
    EASYSIZE(control,left,top,right,bottom,options)
    ...
END_EASYSIZE_MAP

  class_name就是对话框类的类名

  control是要设置的控件的ID

  left、top、right、bottom分别指的是该控件左、上、右、下方的控件的ID,也可以为以下特殊值:
        ES_BORDER:保持与边框距离不变
        ES_KEEPSIZE:保持大小不变
                所放位置:
                         left -- 表示和right指定的控件右对齐
                         right -- 表示和left指定的控件左对齐
                         top -- 表示和bottom指定的控件上对齐
                         bottom -- 表示和top指定的控件下对齐

  options可指定为0,也可指定为以下值:
        ES_HCENTER:保持宽度不变,水平位置在left和right指定的控件正中间
        ES_VCENTER:保持高度不变,垂直位置在left和right指定的控件正中间


       EasySize.h的源代码如下
/*===================================================*\
|                                                     |
|  EASY-SIZE Macros                                   |
|                                                     |
|  Copyright (c) 2001 - Marc Richarme                 |
|      devix@devix.cjb.net                            |
|      http://devix.cjb.net                           |
|                                                     |
|  License:                                           |
|                                                     |
|  You may use this code in any commersial or non-    |
|  commersial application, and you may redistribute   |
|  this file (and even modify it if you wish) as      |
|  long as you keep this notice untouched in any      |
|  version you redistribute.                          |
|                                                     |
|  Usage:                                             |
|                                                     |
|  - Insert 'DECLARE_EASYSIZE' somewhere in your      |
|    class declaration                                |
|  - Insert an easysize map in the beginning of your  |
|    class implementation (see documentation) and     |
|    outside of any function.                         |
|  - Insert 'INIT_EASYSIZE;' in your                  |
|    OnInitDialog handler.                            |
|  - Insert 'UPDATE_EASYSIZE' in your OnSize handler  |
|  - Optional: Insert 'EASYSIZE_MINSIZE(mx,my);' in   |
|    your OnSizing handler if you want to specify     |
|    a minimum size for your dialog                   |
|                                                     |
|        Check http://devix.cjb.net for the           |
|              docs and new versions                  |
|                                                     |
\*===================================================*/


#ifndef __EASYSIZE_H_
#define __EASYSIZE_H_
#define ES_BORDER 0xffffffff
#define ES_KEEPSIZE 0xfffffffe
#define ES_HCENTER 0x00000001
#define ES_VCENTER 0x00000002
#define DECLARE_EASYSIZE \
void __ES__RepositionControls(BOOL bInit);\
void __ES__CalcBottomRight(CWnd *pThis, BOOL bBottom, int &bottomright, int &topleft, UINT id, UINT br, int es_br, CRect &rect, int clientbottomright);
#define INIT_EASYSIZE __ES__RepositionControls(TRUE); __ES__RepositionControls(FALSE)
#define UPDATE_EASYSIZE if(GetWindow(GW_CHILD)!=NULL) __ES__RepositionControls(FALSE)
#define EASYSIZE_MINSIZE(mx,my,s,r) if(r->right-r->left < mx) { if((s == WMSZ_BOTTOMLEFT)||(s == WMSZ_LEFT)||(s == WMSZ_TOPLEFT)) r->left = r->right-mx; else r->right = r->left+mx; } if(r->bottom-r->top < my) { if((s == WMSZ_TOP)||(s == WMSZ_TOPLEFT)||(s == WMSZ_TOPRIGHT)) r->top = r->bottom-my; else r->bottom = r->top+my; }
#define BEGIN_EASYSIZE_MAP(class) \
void class::__ES__CalcBottomRight(CWnd *pThis, BOOL bBottom, int &bottomright, int &topleft, UINT id, UINT br, int es_br, CRect &rect, int clientbottomright) {\
if(br==ES_BORDER) bottomright = clientbottomright-es_br;\
else if(br==ES_KEEPSIZE) bottomright = topleft+es_br;\
else { CRect rect2;\
pThis->GetDlgItem(br)->GetWindowRect(rect2); pThis->ScreenToClient(rect2);\
bottomright = (bBottom?rect2.top:rect2.left) - es_br;}}\
void class::__ES__RepositionControls(BOOL bInit) { CRect rect,rect2,client; GetClientRect(client);
#define END_EASYSIZE_MAP Invalidate(); UpdateWindow(); }
#define EASYSIZE(id,l,t,r,b,o) \
static int id##_es_l, id##_es_t, id##_es_r, id##_es_b;\
if(bInit) {\
GetDlgItem(id)->GetWindowRect(rect); ScreenToClient(rect);\
if(o & ES_HCENTER) id##_es_l = rect.Width()/2; else {\
if(l==ES_BORDER) id##_es_l = rect.left; else if(l==ES_KEEPSIZE) id##_es_l = rect.Width(); else {\
	GetDlgItem(l)->GetWindowRect(rect2); ScreenToClient(rect2);\
	id##_es_l = rect.left-rect2.right;}}\
if(o & ES_VCENTER) id##_es_t = rect.Height()/2; else {\
if(t==ES_BORDER) id##_es_t = rect.top; else if(t==ES_KEEPSIZE) id##_es_t = rect.Height(); else {\
	GetDlgItem(t)->GetWindowRect(rect2); ScreenToClient(rect2);\
	id##_es_t = rect.top-rect2.bottom;}}\
if(o & ES_HCENTER) id##_es_r = rect.Width(); else { if(r==ES_BORDER) id##_es_r = client.right-rect.right; else if(r==ES_KEEPSIZE) id##_es_r = rect.Width(); else {\
	GetDlgItem(r)->GetWindowRect(rect2); ScreenToClient(rect2);\
	id##_es_r = rect2.left-rect.right;}}\
if(o & ES_VCENTER) id##_es_b = rect.Height(); else  { if(b==ES_BORDER) id##_es_b = client.bottom-rect.bottom; else if(b==ES_KEEPSIZE) id##_es_b = rect.Height(); else {\
	GetDlgItem(b)->GetWindowRect(rect2); ScreenToClient(rect2);\
	id##_es_b = rect2.top-rect.bottom;}}\
} else {\
int left,top,right,bottom; BOOL bR = FALSE,bB = FALSE;\
if(o & ES_HCENTER) { int _a,_b;\
if(l==ES_BORDER) _a = client.left; else { GetDlgItem(l)->GetWindowRect(rect2); ScreenToClient(rect2); _a = rect2.right; }\
if(r==ES_BORDER) _b = client.right; else { GetDlgItem(r)->GetWindowRect(rect2); ScreenToClient(rect2); _b = rect2.left; }\
left = _a+((_b-_a)/2-id##_es_l); right = left + id##_es_r;} else {\
if(l==ES_BORDER) left = id##_es_l;\
else if(l==ES_KEEPSIZE) { __ES__CalcBottomRight(this,FALSE,right,left,id,r,id##_es_r,rect,client.right); left = right-id##_es_l;\
} else { GetDlgItem(l)->GetWindowRect(rect2); ScreenToClient(rect2); left = rect2.right + id##_es_l; }\
if(l != ES_KEEPSIZE) __ES__CalcBottomRight(this,FALSE,right,left,id,r,id##_es_r,rect,client.right);}\
if(o & ES_VCENTER) { int _a,_b;\
if(t==ES_BORDER) _a = client.top; else { GetDlgItem(t)->GetWindowRect(rect2); ScreenToClient(rect2); _a = rect2.bottom; }\
if(b==ES_BORDER) _b = client.bottom; else { GetDlgItem(b)->GetWindowRect(rect2); ScreenToClient(rect2); _b = rect2.top; }\
top = _a+((_b-_a)/2-id##_es_t); bottom = top + id##_es_b;} else {\
if(t==ES_BORDER) top = id##_es_t;\
else if(t==ES_KEEPSIZE) { __ES__CalcBottomRight(this,TRUE,bottom,top,id,b,id##_es_b,rect,client.bottom); top = bottom-id##_es_t;\
} else { GetDlgItem(t)->GetWindowRect(rect2); ScreenToClient(rect2); top = rect2.bottom + id##_es_t; }\
if(t != ES_KEEPSIZE) __ES__CalcBottomRight(this,TRUE,bottom,top,id,b,id##_es_b,rect,client.bottom);}\
GetDlgItem(id)->MoveWindow(left,top,right-left,bottom-top,FALSE);\
}
#endif //__EASYSIZE_H_




### Vue 中 Element-UI 的 `el-dialog` 组件嵌套样式设置 在 Vue 使用 Element-UI 时,如果需要处理多个嵌套的 `el-dialog` 对话框并为其设置特定样式,则可以通过多种方式实现。以下是关于如何为嵌套的 `el-dialog` 设置样式的具体方法。 #### 1. 防止多余遮罩层 当存在嵌套的 `el-dialog` 时,默认情况下可能会出现多余的遮罩层。通过添加 `append-to-body` 属性可以有效解决这一问题[^2]: ```html <el-dialog :visible.sync="outerDialogVisible" title="外层对话框"> 外层内容... <el-dialog :visible.sync="innerDialogVisible" append-to-body> 内层对话框内容... </el-dialog> </el-dialog> ``` 上述代码中,内层 `el-dialog` 添加了 `append-to-body` 属性,使得该对话框挂载到 body 上而不是父级容器上,从而避免额外遮罩层的影响。 --- #### 2. 自定义样式 为了自定义嵌套 `el-dialog` 的样式,可以通过类名或者作用域样式的方式进行调整。例如,在外层和内层分别应用不同的样式: ```html <el-dialog :visible.sync="outerDialogVisible" class="custom-outer-dialog"> 外层内容... <el-dialog :visible.sync="innerDialogVisible" append-to-body class="custom-inner-dialog"> 内层对话框内容... </el-dialog> </el-dialog> ``` 对应的 CSS 样式如下: ```css /* 外层对话框 */ .custom-outer-dialog { border-radius: 8px; } /* 内层对话框 */ .custom-inner-dialog .el-dialog__header { background-color: #f0f0f0; } ``` 这样可以根据实际需求对外层和内层对话框单独定制样式。 --- #### 3. 解决子对话框被遮挡的问题 对于两层 `el-dialog` 是直接父子关系的情况,可能由于默认 z-index 导致子对话框的内容被遮盖。此时除了使用 `append-to-body`,还可以配合 `modal-append-to-body` 来进一步优化[^3]: ```html <el-dialog :visible.sync="outerDialogVisible" title="外层对话框" modal-append-to-body> 外层内容... <el-dialog :visible.sync="innerDialogVisible" append-to-body modal-append-to-body> 内层对话框内容... </el-dialog> </el-dialog> ``` 此配置能够确保内外层对话框都正确渲染于页面顶层,不会互相干扰。 --- #### 4. 动态控制标题栏行为 有时项目需求会涉及修改弹窗标题的行为或外观,比如增加按钮等功能。这可通过插槽 (Slot) 实现[^4]: ```html <el-dialog :visible.sync="dialogVisible" custom-class="title-slot-dialog"> <!-- 插槽用于替换默认标题 --> <template slot="title"> <div style="display: flex; justify-content: space-between;"> <span>自定义标题</span> <button @click.stop="handleDownload">下载</button> </div> </template> 弹窗主体内容... </el-dialog> ``` 在此基础上也可以扩展更多交互逻辑,满足复杂场景下的功能需求。 --- #### 总结 以上介绍了几种针对嵌套 `el-dialog` 的常见样式设置与问题解决方案,包括但不限于防止多余遮罩层、动态控制标题以及解决子对话框被遮挡等问题。每种方案均基于官方推荐的最佳实践,并结合实际开发经验进行了补充说明。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值