使用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企服之家，中国第一个企服评测及商务社交产业平台。