wxFormBuilder布局.docxVIP

WxFormBuilder布局 wxWidgets布局简单方便，布局完调整界面大小时，控件可自动调整，（使用MFC时需要先获得父控件位置及大小，然后计算相应子控件位置即大小，然后MoveWindow），wxWidgets中的sizer完成了计算过程，我们只需做一些设置即可。 图1.wxFormBuilder界面 图1中1区为各个独立项目，上面已经建立了三个；2区为控件区，主要从这里拖控件；3区为可视化编辑区；4区为属性区。 【设计】设计如下界面，需先分解界面。 除上菜单栏，下状态栏之外，分为1工具栏区；2先不管什么区，就是想放些列表信息而已，上面是标签，下面是一块区域；3用来放些缩略图，上面是一个标签，下面是六个大小一样的区域；4是工具区，暂时不管它干什么的，就这么设计而已；5是主视图区。 【开始设计】 1.点击Forms控件中的Frame,项目中即多出一个项目，设计区出现一个窗口，去掉边框，窗体属性中wxDEFAULT_FRAME_STYLE的钩去掉，名字可知是默认窗体样式，去掉之后右上角的按钮就没了，当然也可以不去，随意，去掉之后关闭程序的按钮需要自己写。 2.大框架分为上下两部分，上面是工具栏，下面是其他部分，就需要一个竖着的boxSizer 点一下之后项目管理上就出现一个boxSizer，需要设置其为垂直布局，因为它里面的内容是上下排列的。 这个sizer就是主窗体的里面内容的容器，其他内容都要放在这个里面。 3.把框架划分开，1.主sizer下面分两部分，所以就加两个boxSizer,两个都是水平的。 2.bSizer19是放一堆工具按钮的，布局很简单，不需要再划分了； 3.bSizer20是下面部分，需要放很多东西，分为2、3、4、5四个部分，应该放4 个boxSizer,当然也可以放3个，这个回头再说，我先放三个，因为4区域的 工具是操作5区域的。 4.按第三步的分析，放三个并列的boxSizer,因为bSizer20是水平的，所以它下面 的三个sizer是水平分布的。 5.继续分解最左边的2区域是上下分布的，上面是标签，下面是一个大的列表区域，所以bSizer21的方向要设置为垂直（默认垂直）；3区域也是垂直，对应bSizer22; bSizer23对应4、5区域，水平分布，所以设置方向为水平；4区域还得继续分，因为放了好多按钮，方向和bSizer23的方向不一样，是垂直的，所以继续加个垂直的sizer,这样就大致划分完了。 4.往sizer里面放东西。 放完东西后是这个样子的（为方便看，改了wxPanel的背景色），大小比例不是想要的那样，按F5可预览效果；修改个内容的比例，上面工具栏部分太大了，设置上下比例为1:20；设置bSizer19的proportion为1，bSizer20的proportion为20 设置完之后界面就这样了： 然后左中右三个sizer（bSizer21,bSizer22,bSizer23）的比例分别为1:2:10 然后bSizer23里面的bSizer24和panel31的比例为1:10，设置完之后就达到了上面的设计效果，只是颜色不同而已，之后是在其上进行了opengl绘制