所见即所得,跨平台快速GUI界面RAD设计

Linux一路走来,界面组件很多,TK、gtk、Qt、wxWidget等。Tk古老而又厚重,不失motif风格,gtk+glade别具特色,Qt轻快时尚,许多语言本身没有gui可用,于是做接口加wrapper就成了一种流行的解决方法,比如perl、python、ruby、tclsh+wish、D language、nim,连古老的cobol也被gnu翻建一新。

以deepin 20.5 平台Linux为基础,今天说一说基于wxWidget的RAD设计。

安装 wxglade

sudo apt install wxglade
安装完成后,在全部程序项和编程开发分类中自动加上wxglade

程序并进入程序

左上侧是toolbox,右侧是设计树,左下侧是要生成的代码,可生成Python的,Perl的,C++的(g++)、XRC和Lisp的。

拖拽组件、摆个程序界面

  • 1、点1,选2 wxFrame,建MyFrame类,可以改其它名字,我简化写就不改了。

确认后是这样的:Application - frame - sizer - slot

Application 是应用程序, frame是窗体框架,sizer是布局器,SLOT是个盒子/槽子 - 用于放置 toolbox 里面的组件,sizer随frame缩放、上面的槽子装着组件随着窗体缩放而相应的摆放,就不会因为窗体变而布局不变造成界面很难看了。

  • 选中frame,设定它的大小,比如 800 x 350

Widget 页是设定窗口样式的,比如要不要最小化钮、要不要最大化钮、要不要关闭窗口钮、是不是总在其它窗口上面等等,自己按需要点选。

  • 选sizer,在默认一个槽子的基础上我们右键选 Add slot ,再加2个槽子,共三个槽子。设计是窗体分成三栏,每个栏即是一个槽子,每个槽子里面放一个日历组件(或其它组件,自己在左上侧工具面板上选)

此时布局器已经摆放了三条横向的。

看左下侧红框的地方,把它改成纵向的。

下面是分别选中槽子,然后从左上侧的工具面板上选组件放上来。方法是先选中SLOT,然后,点一下左侧组件光标变成十字叉、移到选中的SLOT上按左键就放到SLOT里了。

接下来选中带日历组件的SLOT,左下侧换到它的Layout布局页,然后选中wxEXPAND和wxALIGN_CENTER_HORIZONTAL,对三个槽子同样进行设置。

  • 设置成三栏式自动布局

回点sizer,左下侧的布局器改成wxGridSizer,右面的窗体布局就自动被设置成为三等分均匀布局。点一下窗体的最大化钮,组件随窗体缩放自动摆放得整整齐齐。

如果想看实际效果,按F5,即显示实际效果。

  • 生成代码,以Python3为例

先保存一下设计,默认是保存在 home 目录下。给它放到另外的地方,不要都堆到 home中,具体保存省略了。

点选Python 1 , 2的地方点了就不冲掉原来的代码,不选它就冲掉旧的换新的,写了代码又回头修改窗体设计时注意它。

  • 运行Python代码

点击Generate Source后,会显示成功生成代码

找到保存原设计的目录,发现有个Python文件如下

wxglade_out.py 就是刚才生成的文件

在deepin-terminal终端上cd到文件目录, 执行 python3 wxglade_out.py ,刚才设计的窗口就显示到桌面了。

  • 生成的代码是这个样子的
#!/usr/bin/env python
# -*- coding: UTF-8 -*-
#
# generated by wxGlade 0.8.3 on Fri Apr 15 20:17:28 2022
#

import wx
import wx.adv

# begin wxGlade: dependencies
# end wxGlade

# begin wxGlade: extracode
# end wxGlade


class MyFrame(wx.Frame):
    def __init__(self, *args, **kwds):
        # begin wxGlade: MyFrame.__init__
        kwds["style"] = kwds.get("style", 0) | wx.DEFAULT_FRAME_STYLE
        wx.Frame.__init__(self, *args, **kwds)
        self.SetSize((800, 350))
        self.calendar_ctrl_1 = wx.adv.CalendarCtrl(self, wx.ID_ANY)
        self.calendar_ctrl_2 = wx.adv.CalendarCtrl(self, wx.ID_ANY)
        self.calendar_ctrl_3 = wx.adv.CalendarCtrl(self, wx.ID_ANY)

        self.__set_properties()
        self.__do_layout()
        # end wxGlade

    def __set_properties(self):
        # begin wxGlade: MyFrame.__set_properties
        self.SetTitle("frame")
        # end wxGlade

    def __do_layout(self):
        # begin wxGlade: MyFrame.__do_layout
        sizer_1 = wx.GridSizer(1, 3, 0, 0)
        sizer_1.Add(self.calendar_ctrl_1, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.EXPAND, 0)
        sizer_1.Add(self.calendar_ctrl_2, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.EXPAND, 0)
        sizer_1.Add(self.calendar_ctrl_3, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.EXPAND, 0)
        self.SetSizer(sizer_1)
        self.Layout()
        # end wxGlade

# end of class MyFrame

class MyApp(wx.App):
    def OnInit(self):
        self.frame = MyFrame(None, wx.ID_ANY, "")
        self.SetTopWindow(self.frame)
        self.frame.Show()
        return True

# end of class MyApp

if __name__ == "__main__":
    app = MyApp(0)
    app.MainLoop()
  • 其它

这个版本的wxglade比较低,新版更好用的,要想安装的话要 git clone 下来,然后 ./configure, make && sudo make install 就安上了,但用法基本类似。不妨用新版,添加个button,然后写个类似onclicked的event 名字,在Python里对着onclicked编写代码。

生成的C代码要用 g++编译后运行,在生成的cpp文件头中标有编译参数,按参数编译即可。生成的perl 代码要 wxPerl 支持才能运行。XRC和Lisp平时不用,生成的代码没测试,尚不清楚效果如何。

原文链接:,转发请注明来源!