ToB企服应用市场:ToB评测及商务社交产业平台

标题: 使用wxpython开发跨平台桌面应用，设计系统的登录界面 [打印本页]
作者: 风雨同行    时间: 2024-11-20 08:16
标题: 使用wxpython开发跨平台桌面应用，设计系统的登录界面
一般的系统登统界面，设计好看一些，系统会增色不少，而常规的桌面程序，包括Web上的很多界面，都借助于配景图片的效果来增色添彩，本篇随笔介绍基于WxPython来做一个登录界面效果，并对系统登录界面在差别系统上（WIndows和MacOS) 进行测试对比，调整最佳的处理方案。
1、登录界面的设计

如前面所讲，我们在登录界面上放置一个图片占位全部，并在符合的位置上添加用户的登录账号和密码输入即可，剩下的就是对登录的请求和响应处理了。
我们基于WxPython来处理，放置图片一般就是用 wx.StaticBitmap，图片我们可以预先把他转换为嵌入的图片对象即可，如我们可以通过 img2py 下令来进行添加，把图片文件天生嵌入图片的对象。
如下令：
  1. img2py -a -F -n quit public/images/quit.ico testimage.py
复制代码
会在对应的地方天生大概最佳对应的图片内容，如下所示：

我们把它整合在对应的文件中使用即可。
创建一个继承 wx.Frame 但是没有常规对话框的标题框，默认的样式是 style=wx.DEFAULT_FRAME_STYLE
我们不必要标题框，让对话框界面自定义关闭按钮，让它更加好看，因此设置样式 style=wx.FRAME_NO_TASKBAR。下面是对话框的界面效果，我们先看一下。

其中关闭按钮，配景按钮、登录按钮，都是我们使用图片来处理的，按钮采用 wx.BitmapButton 来处理即可。
登录界面的窗体如下所示。
  1. import testimage as testimage
  2. import wx
  4. class LoginFrame(wx.Frame):
  5.     def __init__(self, parent, title):
  6.         super(LoginFrame, self).__init__(parent, title=title, size=(600, 375),
  7.             style=wx.FRAME_NO_TASKBAR)
  8.         self.InitUI()
  10.     def InitUI(self):
  11.         panel = wx.Panel(self)
  12.         <strong>wx.StaticBitmap(panel, </strong><strong>-1, testimage.login_backimg.Bitmap,
  13.             pos= (0, 0), size=(-1, -1), style=</strong><strong>wx.BORDER_NONE)</strong>
  14.         font = wx.Font(16, wx.FONTFAMILY_DEFAULT, wx.FONTSTYLE_NORMAL, wx.FONTWEIGHT_BOLD)
  15.         
  16.         self.userInput = wx.TextCtrl(panel, -1, value="admin", style=wx.TE_PROCESS_ENTER|wx.TE_CENTER|wx.CENTER, pos=(80, 330), size=(120, 28))
  17.         self.userInput.SetHint("输入账号")
  18.         self.userInput.SetFont(font)
  20.         self.passwordInput = wx.TextCtrl(panel, -1, pos =(280, 330), size=(120, 28), style=wx.TE_PASSWORD| wx.TE_PROCESS_ENTER|wx.TE_CENTER)
  21.         self.passwordInput.SetHint("输入密码")
  22.         self.passwordInput.SetFont(font)
  24.         loginButton =wx.BitmapButton(panel, -1, testimage.login_btn.Bitmap, pos= (410, 328),size= (92, 30))
  25.         self.Bind(wx.EVT_BUTTON, self.OnLogin, loginButton)
  27.         quitButton = wx.BitmapButton(panel, -1, testimage.quit.Bitmap, pos= (560, 10),size= (32, 30))
  28.         self.Bind(wx.EVT_BUTTON, self.OnQuit, quitButton)
  30.         self.Centre()
复制代码
上面代码，在MacOS上运行界面，还算不错，不过在WIndows上，输入框和标签都无法正常显示，必要主动鼠标单击的时间，才出现，输入核心也不太正常，后来搜刮解决方案才发现是系统界面革新的题目，不能使用 wx.StaticBitmap ，而必要使用革新绘制配景图片的方式才可以正常，因此改动一下，使用 EVT_ERASE_BACKGROUND 事件处理的方式绘制配景方式。
在 wxPython 中，EVT_ERASE_BACKGROUND 是一个事件，用于在控件或窗口的配景被擦除（重绘）时触发。通常，这个事件发生在窗口必要重新绘制其配景，例如窗口大小调整或显式调用 Refresh 方法时。
使用场景

如果目的是简单地显示静态图像或快速实现 UI，StaticBitmap 是更便捷的选择。而如果必要复杂的配景效果或图像融合，则 EVT_ERASE_BACKGROUND 提供了更大的灵活性。
在初始化界面的时间，绑定该 EVT_ERASE_BACKGROUND 事件，如下代码所示。
  1. self.Bind(wx.EVT_ERASE_BACKGROUND, self.OnEraseBack)
复制代码
  1.     def OnEraseBack(self, event: wx.EraseEvent):
  2.         dc = event.GetDC()
  3.         if not dc:
  4.             dc = wx.ClientDC(self)
  5.             rect = self.GetUpdateRegion().GetBox()
  6.             dc.SetClippingRect(rect)
  7.         dc.Clear()
  8.         dc.DrawBitmap(<strong>testimage.login_backimg.Bitmap</strong>, 0, 0)
复制代码
如许测试MacOS和WIndows均正常显示。
 
2、登录界面的优化及对接登录处理

稍作调整，在启动配景上添加一些文字显示，最终界面效果如下所示。

详细就是在绘制配景获得ClientDC 对象后绘制文本即可，如下代码所示。
  1.     def OnEraseBack(self, event: wx.EraseEvent):
  2.         dc = event.GetDC()
  3.         if not dc:
  4.             dc = wx.ClientDC(self)
  5.             rect = self.GetUpdateRegion().GetBox()
  6.             dc.SetClippingRect(rect)
  7.         dc.Clear()
  8.         dc.DrawBitmap(images.login_backimg.Bitmap, 0, 0)
  10.         colour = wx.Colour(52, 94, 150)
  11.         dc.SetTextForeground(colour)
  12.         dc.SetFont(
  13.             wx.Font(16, wx.FONTFAMILY_SWISS, wx.FONTSTYLE_NORMAL, wx.FONTWEIGHT_BOLD)
  14.         )
  15.         rect = wx.Rect(10, 210, 580, 30)
  16. <strong>        dc.DrawLabel(
  17.             </strong><strong>"基于 wxPython 开发的 GUI 应用", rect, wx.ALIGN_CENTER | wx.ALIGN_TOP
  18.         )
  19.         rect = wx.Rect(10, 240, 580, 30)
  20.         dc.DrawLabel(
  21.             "COPYRIGHT © 2024 广州爱奇迪软件科技有限公司",
  22.             rect,
  23.             wx.ALIGN_CENTER | wx.ALIGN_TOP,
  24.         )</strong>
复制代码
为了对接实际的Python开发的FastApi后端，我们对增长一个login.py的API对接类，如下代码所示。
  1. from .base_api import BaseApi
  2. from entity.common import AjaxResponse, AuthenticateResult
  3. import requests
  5. class Login(BaseApi):
  6.     """登录处理--API接口类"""
  8.     api_name = "login"
  10.     def __init__(self):
  11.         super().__init__(self.api_name)
  13.     def authenticate2(self, json) -> AuthenticateResult:
  14.         """同步登录接口
  16.         :param json: 登录参数
  17.             {
  18.             "loginname": "string",
  19.             "password": "string",
  20.             "systemtype": "string",
  21.             }
  22.         :return: 登录结果
  23.         """
  25.         url = f"{self.base_url}/authenticate"
  26.         data = requests.post(url, json=json).json()
  28.         result = AjaxResponse[AuthenticateResult].model_validate(data)
  29.         return result.result
复制代码
增长登录过程的提示处理，代码如下所示。
  1.     def on_login(self, event):
  2.         self.LoginSync()
  4.     def LoginSync(self):
  5.         # print("开始同步登录")
  6.         login_name = self.txtLoginName.GetValue()
  7.         login_pwd = self.txtLoginPwd.GetValue()
  8.         if login_name == "":
  9.             MessageUtil.show_tips(self, "请输入用户名！")
  10.             return
  12.         json_data = {
  13.             "loginname": f"{login_name}",
  14.             "password": f"{login_pwd}",
  15.             "systemtype": "WareMis",
  16.         }
  18.         message = "正在尝试登陆获取令牌，请等待..."
  19.         icon = get_bitmap("appIcon", 16)
  20.         busy = PBI.PyBusyInfo(message, parent=self, title="登陆处理中...", icon=icon)
  21.         try:
  22.             wx.Yield()  # 刷新界面
  24.             result = api_login.authenticate2(json_data)
  25.             if result.success:
  26.                 # print("登录成功", result)
  27.                 self._accesstoken = result.accesstoken
  28.                 ApiClient.set_access_token(result.accesstoken)
  29.                 self.is_login = True
  30.                 self.Close()
  31.             else:
  32.                 MessageUtil.show_tips(self, "用户名或密码错误！")
  33.         except Exception as e:
  34.             # print(e)
  35.             MessageUtil.show_tips(
  36.                 self, "登录失败！错误信息如下：", extended_message=str(e)
  37.             )
  38.         finally:
  39.             # 关闭提示框
  40.             del busy
复制代码
运行登录后，界面提示获取令牌的信息

成功后跳转到主界面窗体上。

 以上就是实际使用wxpython开发跨平台桌面应用的登录界面，对接了后端FastAPI的WebAPI项目，该项目使用 FastAPI, SQLAlchemy, Pydantic, Pydantic-settings, Redis, JWT 构建的项目,数据库访问采用异步方式。 数据库操作和控制器操作，采用基类继承的方式减少重复代码，进步代码复用性。 支持Mysql、Mssql、Postgresql、Sqlite等多种数据库接入，通过配置可以指定命据库连接方式。。

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4