开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 35475|回复: 0
收起左侧

[图文教程] 将wxpython的UI组件封装到易函数中

[复制链接]
发表于 2021-7-14 11:05:50 | 显示全部楼层 |阅读模式   广东省广州市
本帖最后由 易函数 于 2021-7-14 11:07 编辑

wxpython ui组件封装教程

wxpython ui组件封装教程

由于wxpython的组件众多 仅以一人之力是难以全部封装成中文函数的

为此我这里将教会大家如何封装wxpython中的组件到易函数中

并且将自己封装好的代码贡献到 pyefun 易函数的代码仓库中

凭借大家的力量让易函数中的ui组件越来越好用

视频讲解

将wxpython的UI组件封装到易函数中 https://www.bilibili.com/video/BV18V411W79X

开始

先了解一下贡献代码的流程

  1. 查看wxpython中标签组件的文档
  2. 参考易语言中组件的方法和属性,作为优先考虑的命名风格
  3. 将pyefun中的代码 fork 到自己的仓库中 然后可到自己仓库的代码到本地开发
  4. 编写用于测试封装ui组件的窗口代码示例
  5. 编写要封装组件的属性和方法
  6. 完成封装测试无误后将代码提交自己的仓库
  7. 到github或码云中,提交贡献代码的请求

例如要封装标签组件

1. 到wxpython中查询标签组件的文档

打开wxpython的文档官网 https://docs.wxpython.org/

wx.StaticText 是标签组件到wxpython的文档中搜索 就可以找到该文档

找到了文档地址打开阅读

https://docs.wxpython.org/wx.StaticText.html

首先我们看到文档中说明的窗口样式

窗口样式
此类支持以下样式:

wx.ALIGN_LEFT: 将文本左对齐。

wx.ALIGN_RIGHT: 将文本向右对齐。

wx.ALIGN_CENTRE_HORIZONTAL: 使文本居中(水平)。

wx.ST_NO_AUTORESIZE:默认情况下,控件将在SetLabel 调用时调整其大小以完全适合文本的大小。如果给出了此样式标志,则控件将不会更改其大小(此样式对于也具有ALIGN_RIGHT 或 ALIGN_CENTRE_HORIZONTAL 样式的控件特别有用, 否则在调用 后它们将不再有意义 SetLabel)。

wx.ST_ELLIPSIZE_START: 如果labeltext宽度超过控件宽度,则将label的开头替换为省略号;使用wx.Control.Ellipsize.

wx.ST_ELLIPSIZE_MIDDLE: 如果标签文字宽度超过控件宽度,则将标签中间替换为省略号;使用wx.Control.Ellipsize.

wx.ST_ELLIPSIZE_END: 如果标签文字宽度超过控件宽度,则将标签末尾替换为省略号;使用wx.Control.Ellipsize.

从这里可以知道 我们可以封装的属性有 7个 我们观察一下样式的类别总结一下

  • 文字对齐方式
  • 省略号位置
  • 自动调整大小

大概可以分析得出可以设置的选项

2. 在易语言中确定封装的命名风格

为了保持简单易用的原则,建议采用先进最先进的的中文编程软件中的命名方式

从这里看到 易语言中标签组件的属性是非常之多的 很多在wxpython并没有 所以我们只需要对wxpython中有的属性和方法进行封装

现在对照wxpython中的文档标签中的方法和可以设置的属性

__init__ 默认构造函数。
Create 创建函数,用于两步构建。
GetClassDefaultAttributes
IsEllipsized 返回True此控件的窗口样式是否包含ST_ELLIPSIZE_STARTST_ELLIPSIZE_MIDDLEST_ELLIPSIZE_END样式之一。
SetLabel 更改控件中显示的标签。
Wrap 此函数包装控件标签,以便其每行最多变为宽度像素(如果可能,行在单词边界处断开,因此如果单词太长则可能不是这种情况)。

可以发现 可以提供给我们设置的熟悉并不多而易语言组件中的属性十分多

接下来,根据可以设置的属性和方法,进行封装

总结一下可以封装的属性和方法

  • 文字对齐方式 文本居左 文本居中 文本居右
  • 省略号位置 省略号在开头 省略号在中间 省略号在结尾
  • 自动调整大小 真则不做处理 假则 设置样式 wx.ST_NO_AUTORESIZE 禁用自动调整大小的功能
  • 标题

3. 开始封装

下载易函数代码 https://gitee.com/duolabmeng666/pyefun 将代码fork到自己的仓库中 克隆自己仓库的代码

git clone https://gitee.com/duolabmeng666/pyefun 

# 这里是主仓库的地址 你们需要换成你自己仓库的地址方便后续贡献代码 不换也没有关系可以写好以后再操作

在易函数中组件代码在目录 pyefun/wxefun/component

这里可以查看到封装的所有的组件 https://gitee.com/duolabmeng666/pyefun/tree/master/pyefun/wxefun/component

找到标签组件的代码 pyefun/wxefun/component/StaticText.py 确定了文件在哪里以后

我们建立一个测试标签组件的窗口代码 可以用易函数视窗编程系统生成一个最简单的窗口

进入 pyefun 的项目

在这里建立测试组件代码的文件 将测试代码添加到文件中

example/wxpython/标签组件封装测试.py
import pyefun.wxefun as wx

class 窗口1(wx.窗口):
    def __init__(self):
        self.初始化界面()

    def 初始化界面(self):
        #########以下是创建的组件代码#########
        wx.窗口.__init__(self, None, title='易函数视窗编程系统', size=(380, 250), name='frame',
                       style=wx.窗口边框.普通可调边框 & ~(wx.MAXIMIZE_BOX))
        self.容器 = wx.容器(self)
        self.Centre()
        self.窗口1 = self

        self.窗口1.播放次数 = wx.播放次数.循环播放
        self.窗口1.位置 = wx.窗口位置.通常
        self.标签1 = wx.标签(self.容器, size=(200, 111), pos=(42, 24),
                         label='标签1111111111111111111111111111111111111111111111111111111111',
                         style=wx.ALIGN_RIGHT | wx.ST_NO_AUTORESIZE | wx.ST_ELLIPSIZE_START)
        self.按钮1 = wx.按钮(self.容器, size=(82, 30), pos=(26, 155), label='按钮')
        self.按钮1.绑定事件(wx.事件.被单击, self.按钮1_被单击)

    #########以上是创建的组件代码##########

    #########以下是组件绑定的事件代码#########

    def 标签1_鼠标左键被按下(self, event):
        print("标签1_鼠标左键被按下")

    def 按钮1_被单击(self, event):
        print("按钮1_被单击")
        # self.标签1.ToggleWindowStyle(wx.标签样式.文字在右边)
        # self.标签1.SetWindowStyle(wx.标签样式.文字在右边)
        # self.标签1.SetWindowStyle(wx.标签样式.省略号在开头)
        # self.标签1.SetWindowStyle(wx.标签样式.省略号在末尾)
        # self.标签1.SetWindowStyle(wx.标签样式.省略号在中间)
        # self.标签1.Refresh()
        self.标签1.标题 = "测试标题属性的设置"
        print("测试获取标题属性", self.标签1.标题)

    #########以上是组件绑定的事件代码#########

class 应用(wx.App):
    def OnInit(self):
        self.窗口1 = 窗口1()
        self.窗口1.Show(True)
        return True

if __name__ == '__main__':
    app = 应用()
    app.MainLoop()

这里呢 画了一个按钮用于测试标签的样式

还有一个标签组件用于测试

接下来找到标签组件的代码文件进行组件的封装 pyefun/wxefun/component/StaticText.py

如果你要封装的组件不在文件列表中那么你可以新建一个文件注意命名风格即可

编写标签组件的代码

pyefun/wxefun/component/StaticText.py

"""
标签组件

"""
import wx
from .wxControl import *
import pyefun.wxefun.evt as evt

class 标签(wx.StaticText, 公用方法):
    pass

    @property
    def 标题(self):
        return self.GetLabel()

    @标题.setter
    def 标题(self, value: str):
        return self.SetLabel(value)

    @property
    def 文字对齐方式(self):
        return ""

    @文字对齐方式.setter
    def 文字对齐方式(self, 标签样式: int):
        """
            wx.标签样式.文字在左边
            wx.标签样式.文字在右边
            wx.标签样式.文字在居中
        """
        self.SetWindowStyle(标签样式)
        self.Refresh()

    @property
    def 省略号位置(self):
        return ""

    @省略号位置.setter
    def 省略号位置(self, 标签样式: int):
        """
            wx.标签样式.省略号在开头
            wx.标签样式.省略号在中间
            wx.标签样式.省略号在末尾
        """
        self.SetWindowStyle(标签样式)
        self.Refresh()

    @property
    def 自动调整大小(self):
        return ""

    @自动调整大小.setter
    def 自动调整大小(self, 是否自动调整大小: bool):
        "默认是自动跳转大小的 如果设置 真 就是默认自动跳转大小 如果设置假就是禁用自动跳转代销"
        if 是否自动调整大小:
            self.ToggleWindowStyle(evt.标签样式.禁用自动调整大小)
        else:
            self.SetWindowStyle(evt.标签样式.禁用自动调整大小)
        self.Refresh()

添加标签样式到组件常量中
pyefun/wxefun/evt.py

class 标签样式:
    文字在左边 = wx.ALIGN_LEFT  # 将文本向左对齐。
    文字在右边 = wx.ALIGN_RIGHT  # 将文本向右对齐。
    文字在居中 = wx.ALIGN_CENTRE_HORIZONTAL  # 将文本居中(水平)。
    禁用自动调整大小 = wx.ST_NO_AUTORESIZE  # :默认情况下,控件将调整其大小以使其完全适合SetLabel 被调用时文本的大小。如果提供了此样式标志,则控件将不会更改其大小(此样式对于也具有ALIGN_RIGHT 或 ALIGN_CENTRE_HORIZONTAL 样式的控件特别有用, 因为否则在调用以后它们将不再有意义 SetLabel)。
    省略号在开头 = wx.ST_ELLIPSIZE_START  # :如果labeltext宽度超过控件宽度,则用省略号替换标签的开头;用途wx.Control.Ellipsize。
    省略号在中间 = wx.ST_ELLIPSIZE_MIDDLE  # :如果标签文本的宽度超过控件的宽度,则用省略号替换标签的中间;用途wx.Control.Ellipsize。
    省略号在末尾 = wx.ST_ELLIPSIZE_END  # :如果标签文本的宽度超过控件的宽度,请用省略号替换标签的末尾;用途wx.Control.Ellipsize。

到这里组件的封装工作已经完成
接下来我们讲解一下如何将代码贡献到代码仓库中

4. 贡献代码

贡献方式

    1. 如果实在不会操作github 将代码发送到 issues 中 https://gitee.com/duolabmeng666/pyefun/issue
    1. 进入 pyefun的qq群传到群共享或者将代码变更发给群主
    1. 正常的 git 贡献代码流程 (如果你能使用 github 贡献就github )如果没有条件使用github,码云贡献代码也没有问题的

接下来我们来讲解一下正常的贡献流程 以码云作为代码贡献的例子

正常来讲我应该以github来讲解 但是国内的网络环境原因 这里易 码云的贡献代码流程来讲解

1.fork 项目到自己仓库

码云 pyefun 仓库 https://gitee.com/duolabmeng666/pyefun

这里大家注册好码云账户以后就可以 fork了 将代码复制到自己的代码仓库中


这边我的地址是 https://gitee.com/duolabmengtest/pyefun.git

将代码用git的工具克隆下来

2. 将封装好的代码放到放到这个目录下面然后提交并且推送

3. 推送完成以后 提交提交合并贡献代码

这里推送了以后看到自己的仓库呢就有了修改记录了

4. 将代码贡献至pyefun

5. 完成后等待 pyefun 的仓库管理员审核你的代码 代码有问题将会合并到pyeufn中

感谢您对国内中文编程事业的热爱和贡献

帮助信息

  • 如果你不知道如何封装可以参考组件目录下已经封装好的组件进行参考 https://gitee.com/duolabmeng666/pyefun/tree/master/pyefun/wxefun
  • 如果你有能力使用github贡献代码,请使用github贡献代码
  • 封装过程中遇到任何问题都可以在pyefun的qq群中提问 qq群 : 1017240979

更多例子

组合框封装例子

上面的标签案例比较简单
这里介绍一下组合框
案例中讲解了 组合框的方法 事件 属性 的封装

组合框组件的封装教程

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表