主要就是几个py文件。resources文件夹里是放资源原件的，也就两张图片
Cart
│ app_main.py
│
├─conf
│ settings.py
│ __init__.py
│
├─resources
│ bats.ico
│ dragon.jpg
│
└─ui
list_frame.py
list_grid_table.py
login_frame.py
my_frame.py
__init__.py这里也没设置，不过把数据放这里了，主要是搞定做界面，就不连数据库了：
# 登录的用户名和密码
ACCOUNTS = {
‘admin‘: {‘pwd‘: ‘admin‘},
‘root‘: {‘pwd‘: ‘123456‘},
‘user‘: {‘pwd‘: ‘user123‘},
}
# 商品列名
COLUMN_NAMES = ["商品编号", "商品类别", "商品中文名", "商品英文名"]
# 商品类别
CATEGORY = ["食品", "酒类", "男装", "女装", "童装"]
# 商品信息，商品信息有点少，最好多搞几十条
PRODUCTS = [
{‘id‘: "001", ‘category‘: "食品", ‘name_cn‘: "薯片", ‘name_en‘: "ShuPian"},
{‘id‘: "002", ‘category‘: "酒类", ‘name_cn‘: "葡萄酒", ‘name_en‘: "PuTaoJiu"},
{‘id‘: "003", ‘category‘: "男装", ‘name_cn‘: "西装", ‘name_en‘: "XiZhuang"},
{‘id‘: "004", ‘category‘: "女装", ‘name_cn‘: "短裙", ‘name_en‘: "DuanQun"},
{‘id‘: "005", ‘category‘: "童装", ‘name_cn‘: "连衣裙", ‘name_en‘: "LianYiQun"},
]通过启动文件，启动我们的项目，这里主要是调用创建一个登录窗口，然后进入主事件循环
import wx
from ui.login_frame import LoginFrame
from ui.list_frame import ListFrame
class App(wx.App):
"""启动模块"""
def OnInit(self):
"""创建窗口对象"""
frame = LoginFrame()
# frame = ListFrame() # 单独调试商品界面的时候，省的每次都要登录一下
frame.Show()
return True
if __name__ == ‘__main__‘:
app = App() # 实例化
app.MainLoop() # 进入主事件循环先给所有的窗口定义个基类，把所有窗口共有的属性定义在这个基类里。之后各个窗口都基础这个类：
"""定义Frame窗口基类"""
import sys
import wx
class MyFrame(wx.Frame):
session = {} # 模拟Web的session，保留会话的数据
def __init__(self, title, size):
super().__init__(parent=None, title=title, size=size,
style=wx.DEFAULT_FRAME_STYLE ^ wx.MAXIMIZE_BOX)
# style是定义窗口风格，具体看官网。https://docs.wxpython.org/wx.Frame.html#wx-frame
# 上面的DEFAULT就是包含了下面所有的风格的：
# wx.MINIMIZE_BOX | wx.MAXIMIZE_BOX | wx.RESIZE_BORDER |
# wx.SYSTEM_MENU | wx.CAPTION | wx.CLOSE_BOX | wx.CLIP_CHILDREN
# 上面的例子是去掉了其中的一个。官网的例子是这样的：
# style = wx.DEFAULT_FRAME_STYLE & ~(wx.RESIZE_BORDER | wx.MAXIMIZE_BOX) 去掉了2个来固定窗口大小
# 设置窗口居中
self.Center()
# 设置Frame窗口内容面板
self.contentpanel = wx.Panel(parent=self)
# 图标文件
ico = wx.Icon("resources/bats.ico", wx.BITMAP_TYPE_ICO)
# 设置图标
self.SetIcon(ico)
# 设定窗口大小，这里设置了相同的最大和最小值，也就是固定了窗口大小。
# 因为上面的窗口风格了保留了wx.RESIZE_BORDER，所以这里用另外一个放来来保证大小不可调整
# 这样做有一点不好，就是鼠标放在窗口边缘，会变成调整窗口大小的样子，但是拉不动窗口
self.SetSizeHints(size, size)
# 绑定关闭按钮的点击事件
self.Bind(wx.EVT_CLOSE, self.on_close)
def on_close(self, event):
# 退出系统
self.Destroy()
sys.exit()这里设置固定窗口的大小不可调整，不过应该还是官网的方法更好吧。
另外还定义了窗口的图标，和关闭窗口的所调用的方法。self.contentpanel = wx.Panel(parent=self) 这个属性在后面会一直使用
现在开始真正开始做窗口界面了，先做一个简单的登录界面：
"""登录窗口"""
import wx
from ui.my_frame import MyFrame
from ui.list_frame import ListFrame
from conf import settings
class LoginFrame(MyFrame):
accounts = settings.ACCOUNTS
def __init__(self):
super().__init__(title="用户登录", size=(340, 230))
# 创建界面中的控件
username_st = wx.StaticText(self.contentpanel, label="用户名：") # 输入框前面的提示标签
password_st = wx.StaticText(self.contentpanel, label="密码：")
self.username_txt = wx.TextCtrl(self.contentpanel) # 输入框
self.password_txt = wx.TextCtrl(self.contentpanel, style=wx.TE_PASSWORD)
# 创建FlexGrid布局对象
fgs = wx.FlexGridSizer(2, 2, 20, 20) # 2行2列，行间距20，列间距20
fgs.AddMany([
# 下面套用了3个分隔，垂直居中，水平靠右，固定的最小尺寸
(username_st, 1, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_RIGHT | wx.FIXED_MINSIZE),
# 位置居中，尺寸是膨胀
(self.username_txt, 1, wx.CENTER | wx.EXPAND),
(password_st, 1, wx.ALIGN_CENTER_VERTICAL | wx.ALIGN_RIGHT | wx.FIXED_MINSIZE),
(self.password_txt, 1, wx.CENTER | wx.EXPAND),
])
# 设置FlexGrid布局对象
fgs.AddGrowableRow(0, 1) # 第一个0是指第一行，权重1
fgs.AddGrowableRow(1, 1) # 第一个1是指第二行，权重也是1
# 上面一共就2行，用户名和密码，就是2行的空间是一样的
fgs.AddGrowableCol(0, 1) # 第一列，权重1，就是标签的内容
fgs.AddGrowableCol(1, 4) # 第二列，权重4，就是输入框，并且输入框是膨胀的应该会撑满
# 上面2列分成5分，第一列占1/5，第二列占4/5
# 创建按钮对象
ok_btn = wx.Button(parent=self.contentpanel, label="确定")
cancel_btn = wx.Button(parent=self.contentpanel, label="取消")
# 绑定按钮事件：事件类型，绑定的事件，绑定的按钮
self.Bind(wx.EVT_BUTTON, self.ok_btn_onclick, ok_btn)
self.Bind(wx.EVT_BUTTON, self.cancel_btn_onclick, cancel_btn)
# 创建水平Box布局对象，放上面的2个按钮
box_btn = wx.BoxSizer(wx.HORIZONTAL)
# 添加按钮控件：居中，四周都有边框，膨胀。border是设置边框的大小，实际效果没有框，但是占用空间
box_btn.Add(ok_btn, 1, wx.CENTER | wx.ALL | wx.EXPAND, border=10)
box_btn.Add(cancel_btn, 1, wx.CENTER | wx.ALL | wx.EXPAND, border=10)
# 创建垂直Box，把上面的fgs对象和box_btn对象都放进来
box_outer = wx.BoxSizer(wx.VERTICAL)
box_outer.Add(fgs, -1, wx.CENTER | wx.ALL | wx.EXPAND, border=25) # 权重是-1，就是不指定了
# (wx.ALL ^ wx.TOP)这里只加3面的边框，上面就不加了
box_outer.Add(box_btn, -1, wx.CENTER | (wx.ALL ^ wx.TOP) | wx.EXPAND, border=20)
# 上面全部设置完成了，下面是设置Frame窗口内容面板
self.contentpanel.SetSizer(box_outer) # self.contentpanel 是在父类里定义的
def ok_btn_onclick(self, event):
username = self.username_txt.GetValue() # 取出输入框的值
password = self.password_txt.GetValue()
if username in self.accounts:
if self.accounts[username].get(‘pwd‘) == password:
self.session[‘username‘] = username
print("登录成功")
# 接下来要进入下一个Frame
frame = ListFrame()
frame.Show()
self.Hide() # 隐藏登录窗口
return
else:
msg = "用户名或密码错误"
else:
msg = "用户名不存在"
print(msg)
dialog = wx.MessageDialog(self, msg, "登录失败") # 创建对话框
dialog.ShowModal() # 显示对话框
dialog.Destroy() # 销毁对话框
def cancel_btn_onclick(self, event):
self.on_close(event)
这个窗口比较复杂。有下拉列表，可以做筛选，下面有表格有图片，并且点击表格的单元格，窗口的内容会有相应的变化：
"""商品列表窗口"""
import wx, wx.grid
from ui.my_frame import MyFrame
from ui.list_grid_table import ListGridTable
from conf import settings
class ListFrame(MyFrame):
def __init__(self):
super().__init__(title="商品列表", size=(1000, 700))
# 购物车
self.cart = {}
# 商品列表
self.data = settings.PRODUCTS
# 创建分隔窗口
splitter = wx.SplitterWindow(self.contentpanel, style=wx.SP_3DBORDER)
# 分隔窗口的左侧面板
self.left_panel = self.create_left_panel(splitter) # 先准备一个函数，到函数里再去实现
# 分隔窗口的右侧面板
self.right_panel = self.create_right_panel(splitter)
# 设置分隔窗口的布局，调用SplitVertically方法就是左右布局
splitter.SplitVertically(self.left_panel, self.right_panel, 630)
# 设置整个窗口的布局，是一个垂直的Box布局
box_outer = wx.BoxSizer(wx.VERTICAL)
# 下面直接把这个Box放到内容面板里了，也可以最后放。
# 不过这个窗口的内容只有一个垂直Box，所以无所谓了
# 还有其他的控件没有写，不过写完都是往box_splitter里添加
self.contentpanel.SetSizer(box_outer)
# 添加顶部对象
box_outer.Add(self.create_top_box(), 1, flag=wx.EXPAND | wx.ALL, border=20)
# 添加分隔窗口对象
box_outer.Add(splitter, 1, flag=wx.EXPAND | wx.ALL, border=10)
# 创建底部的状态栏
self.CreateStatusBar()
self.SetStatusText("准备就绪，欢迎您：%s" % self.session[‘username‘])
def create_top_box(self):
"""创建顶部的布局管理器"""
# 创建静态文本
label_st = wx.StaticText(parent=self.contentpanel, label="选择商品类别：", style=wx.ALIGN_RIGHT)
# 创建下拉列表对象，这里取了一个name，之后可以通过name找到这个控件获取里面的内容
# 查找的方法用FindWindowByName，另外还可以ById和ByLabel
choice = wx.Choice(self.contentpanel, choices=settings.CATEGORY, name="choice")
# 创建按钮对象
search_btn = wx.Button(parent=self.contentpanel, label="查询")
reset_btn = wx.Button(parent=self.contentpanel, label="重置")
# 绑定事件
self.Bind(wx.EVT_BUTTON, self.search_btn_onclick, search_btn)
self.Bind(wx.EVT_BUTTON, self.reset_btn_onclick, reset_btn)
# 创建一个布局管理器，把上面的控件添加进去
box = wx.BoxSizer(wx.HORIZONTAL)
box.AddSpacer(200) # 添加空白
box.Add(label_st, 1, flag=wx.FIXED_MINSIZE | wx.ALL, border=10)
box.Add(choice, 1, flag=wx.FIXED_MINSIZE | wx.ALL, border=5)
box.Add(search_btn, 1, flag=wx.FIXED_MINSIZE | wx.ALL, border=5)
box.Add(reset_btn, 1, flag=wx.FIXED_MINSIZE | wx.ALL, border=5)
box.AddSpacer(300) # 添加空白
return box
def create_left_panel(self, parent):
"""创建分隔窗口的左侧面板"""
panel = wx.Panel(parent)
# 创建网格对象
grid = wx.grid.Grid(panel, name=‘grid‘)
# 绑定事件
self.Bind(wx.grid.EVT_GRID_LABEL_LEFT_CLICK, self.select_row_handler)
self.Bind(wx.grid.EVT_GRID_CELL_LEFT_CLICK, self.select_row_handler)
# 初始化网格
self.init_grid() # 还是到另一个函数里去实现
# 创建水平Box的布局管理器
box = wx.BoxSizer()
# 设置Box的网格grid
box.Add(grid, 1, flag=wx.ALL, border=5)
panel.SetSizer(box)
return panel
def init_grid(self):
"""初始化网格对象"""
# 通过网格名字获取到对象
grid = self.FindWindowByName(‘grid‘)
# 创建网格中所需要的表格，这里的表格是一个类
table = ListGridTable(settings.COLUMN_NAMES, self.data)
# 设置网格的表格属性
grid.SetTable(table, True)
# 获取网格行的信息对象,40是行高，每一行都是40，后面的列表是单独指定每一行的，这里是空列表
row_size_info = wx.grid.GridSizesInfo(40, [])
# 设置网格的行高
grid.SetRowSizes(row_size_info)
# 指定列宽，前面是0，后面分别指定每一列的列宽
col_size_info = wx.grid.GridSizesInfo(0, [100, 80, 130, 200])
grid.SetColSizes(col_size_info)
# 设置单元格默认字体
grid.SetDefaultCellFont(wx.Font(11, wx.FONTFAMILY_DEFAULT,
wx.FONTSTYLE_NORMAL,
wx.FONTWEIGHT_NORMAL,
faceName="微软雅黑"))
# 设置表格标题的默认字体
grid.SetLabelFont(wx.Font(11, wx.FONTFAMILY_DEFAULT,
wx.FONTSTYLE_NORMAL,
wx.FONTWEIGHT_NORMAL,
faceName="微软雅黑"))
# 设置网格选择模式为行选择模式
grid.SetSelectionMode(grid.wxGridSelectRows)
# 设置网格不能通过拖动改标高度和宽度
grid.DisableDragRowSize()
grid.DisableDragColSize()
def create_right_panel(self, parent):
"""创建分隔窗口的右侧面板"""
panel = wx.Panel(parent, style=wx.TAB_TRAVERSAL | wx.BORDER_DOUBLE)
panel.SetBackgroundColour(wx.WHITE) # 设置背景色，默认不是白色
# 显示图片
img_path = "resources/dragon.jpg"
img = wx.Bitmap(img_path, wx.BITMAP_TYPE_ANY) # 第二个参数设置图片格式可以是任意的
img_bitmap = wx.StaticBitmap(panel, bitmap=img, name=‘img_bitmap‘)
# 商品类别
category = "商品类别：【还未选中商品】"
category_st = wx.StaticText(panel, label=category, name=‘category‘) # 创建控件同时指定label
# 商品名称
name = "商品名称：【还未选中商品】"
name_st = wx.StaticText(panel, label=name, name=‘name‘)
# 商品价格
price = "商品价格：￥{0:.2f}".format(128)
price_st = wx.StaticText(panel, label=price, name=‘price‘)
# 商品描述
description = "商品描述：%s" % "总之很好就是了"
description_st = wx.StaticText(panel, label=description, name=‘description‘)
# 创建按钮对象
add_btn = wx.Button(panel, label="添加到购物车")
see_btn = wx.Button(panel, label="查看购物车")
self.Bind(wx.EVT_BUTTON, self.add_btn_onclick, add_btn)
self.Bind(wx.EVT_BUTTON, self.see_btn_onclick, see_btn)
# 布局，垂直的Box布局管理器
box = wx.BoxSizer(wx.VERTICAL)
box.Add(img_bitmap, 1, flag=wx.CENTER | wx.ALL, border=30)
box.Add(category_st, 1, flag=wx.EXPAND | wx.ALL, border=10)
box.Add(name_st, 1, flag=wx.EXPAND | wx.ALL, border=10)
box.Add(price_st, 1, flag=wx.EXPAND | wx.ALL, border=10)
box.Add(description_st, 1, flag=wx.EXPAND | wx.ALL, border=10)
box.Add(add_btn, 1, flag=wx.EXPAND | wx.ALL, border=10)
box.Add(see_btn, 1, flag=wx.EXPAND | wx.ALL, border=10)
panel.SetSizer(box)
return panel
def search_btn_onclick(self, event):
"""查询按钮可以按商品类别进行筛选"""
choice = self.FindWindowByName(‘choice‘)
selected = choice.GetSelection()
if selected >= 0:
category = settings.CATEGORY[selected]
# 根据商品类别查询商品
products = []
for item in settings.PRODUCTS:
if item.get(‘category‘) == category:
products.append(item)
# 上面已经生成了新了商品列表，将商品列表更新后，重新初始化网格
self.data = products
self.init_grid()
def reset_btn_onclick(self, event):
"""单击重置按钮
查询所有的商品/获取初始的商品列表
然后初始化网格
"""
self.data = settings.PRODUCTS
self.init_grid()
def select_row_handler(self, event):
"""选择的网格的行事件处理
这里会刷新右侧面板的商品类别和名称
"""
row_selected = event.GetRow()
if row_selected >= 0:
selected_data = self.data[row_selected]
# 商品类别
category = "商品类别：%s" % selected_data.get(‘category‘)
category_st = self.FindWindowByName(‘category‘)
category_st.SetLabelText(category) # 先创建好控件，再修改或者设置label
# 商品名称
name = "商品名称：%s" % selected_data.get(‘name_cn‘)
name_st = self.FindWindowByName(‘name‘)
name_st.SetLabelText(name)
# 刷新布局，如果更换了图片应该是要刷新的，没换图片不用刷新
# self.right_panel.Layout()
event.Skip() # 事件跳过，貌似这里没什么用
def add_btn_onclick(self, event):
pass
def see_btn_onclick(self, event):
pass窗口里显示的表格的内容，单独再这里的数据表格类里面实现。这里继承了 GridTableBase 这个类，然后重构其中的几个方法返回表格的行数、列数、单元格的内容，就能在窗口的表格里里显示出来了：
"""自定义数据表格类"""
from wx.grid import GridTableBase
class ListGridTable(GridTableBase):
"""自定义表格类
下面分别重构了4个方法
返回行数、列数、每个单元格的内容、列标题
"""
def __init__(self, column_names, data):
super().__init__()
self.col_labels = column_names
self.data = data
def GetNumberRows(self):
return len(self.data)
def GetNumberCols(self):
return len(self.col_labels)
def GetValue(self, row, col):
products = self.data[row]
return {
0: products.get(‘id‘),
1: products.get(‘category‘),
2: products.get(‘name_cn‘),
3: products.get(‘name_en‘),
}.get(col)
def GetColLabelValue(self, col):
return self.col_labels[col]
登录窗口
商品列表窗口
原文地址：http://blog.51cto.com/steed/2114208
