以下是一个使用PyQt5实现的界面切换程序，通过点击不同的按钮可以在主窗口中切换显示不同的界面。程序包含一个侧边栏和主内容区域，点击侧边栏按钮会在主区域显示对应的界面。
功能说明
这个应用实现了以下功能：
-
侧边栏导航：
- 左侧有一个固定宽度的侧边栏，包含多个导航按钮
- 按钮有悬停和点击效果，当前选中的按钮会高亮显示
-
多界面切换：
- 使用
QStackedWidget管理多个界面 - 点击不同按钮时，主区域会显示对应的界面
- 每个界面都有独特的标题和内容区域
- 使用
-
美观的UI设计：
- 使用CSS样式美化按钮和界面
- 采用深色侧边栏与浅色主区域的对比设计
- 文字使用"SimHei"字体确保中文显示正常
-
可扩展性：
- 可以轻松添加新的界面和按钮
- 每个界面的内容可以根据需求扩展
使用方法
- 运行程序后，默认显示首页
- 点击左侧的按钮（如"用户管理"、"设置"等）
- 主区域会切换显示对应的界面
- 当前选中的按钮会变为绿色背景
扩展建议
-
添加真实功能：
- 在各个页面的布局中添加实际的控件（如表格、表单、图表等）
-
优化导航逻辑：
- 可以添加子菜单或分层导航结构
- 支持快捷键或标签页导航
-
增强视觉效果：
- 添加页面切换动画
- 实现响应式布局以适应不同屏幕尺寸
-
数据交互：
- 在页面之间共享数据
- 添加保存设置或提交表单的功能
这个框架可以作为大多数应用程序的基础，你可以根据具体需求扩展各个页面的功能。
import sys
import random
from PyQt5.QtWidgets import (QApplication, QDialog, QPushButton, QWidget,
QVBoxLayout, QHBoxLayout, QLabel, QStackedWidget,
QTextEdit, QSplitter, QTableWidget, QTableWidgetItem,
QHeaderView)
from PyQt5.QtCore import Qt, QPropertyAnimation, QEasingCurve, QPoint
from PyQt5.QtGui import QFont
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from matplotlib.figure import Figure
import matplotlib.pyplot as plt
# 设置matplotlib支持中文显示
plt.rcParams["font.family"] = ["SimHei", "WenQuanYi Micro Hei", "Heiti TC"]
class MainDialog(QDialog):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
# 设置窗口标题和大小
self.setWindowTitle('多界面切换示例')
self.setGeometry(100, 100, 1200, 800)
self.setWindowFlags(self.windowFlags() | Qt.WindowMinMaxButtonsHint)
# 创建主布局
main_layout = QVBoxLayout(self)
# 创建顶部水平分割器（用于侧边栏和页面内容）
top_splitter = QSplitter(Qt.Horizontal)
# 创建侧边栏
sidebar = QWidget()
sidebar.setFixedWidth(250)
sidebar.setStyleSheet("background-color: #333; color: white;")
sidebar_layout = QVBoxLayout(sidebar)
sidebar_layout.setContentsMargins(10, 20, 10, 20)
# 创建侧边栏按钮
self.buttons = []
for i, text in enumerate(['首页', '用户管理', '设置', '数据统计', '帮助']):
btn = QPushButton(text)
btn.setFixedHeight(60)
btn.setStyleSheet("""
QPushButton {
background-color: #555;
color: white;
border: none;
border-radius: 15px;
text-align: left;
padding-left: 25px;
font-size: 30px;
}
QPushButton:hover {
background-color: #777;
}
QPushButton:pressed {
background-color: #4CAF50;
}
""")
btn.clicked.connect(lambda checked, idx=i: self.switch_page(idx))
sidebar_layout.addWidget(btn)
self.buttons.append(btn)
sidebar_layout.addStretch(1) # 添加伸缩项，使按钮居上
# 创建堆叠窗口部件，用于显示不同的界面
self.stacked_widget = QStackedWidget()
# 创建各个页面并添加到堆叠窗口
self.create_pages()
# 将侧边栏和堆叠窗口添加到顶部分割器
top_splitter.addWidget(sidebar)
top_splitter.addWidget(self.stacked_widget)
top_splitter.setSizes([220, 980]) # 初始大小分配
# 创建日志显示区域
self.log_area = QTextEdit()
self.log_area.setReadOnly(True)
self.log_area.setStyleSheet("background-color: #f5f5f5; font-family: Consolas;")
self.log_area.setPlaceholderText("日志信息将显示在这里...")
# 创建底部水平分割器（用于内容和日志区域）
bottom_splitter = QSplitter(Qt.Vertical)
bottom_splitter.addWidget(top_splitter)
bottom_splitter.addWidget(self.log_area)
bottom_splitter.setSizes([650, 150]) # 初始大小分配
# 将底部分割器添加到主布局
main_layout.addWidget(bottom_splitter)
# 设置界面切换动画
self.animation = None
self.animation_duration = 300 # 动画持续时间（毫秒）
self.animation_type = QEasingCurve.InOutQuad # 动画曲线类型
# 初始显示首页
self.switch_page(0)
self.log("系统已启动")
def create_pages(self):
"""创建各个页面并添加到堆叠窗口"""
page_titles = ["首页", "用户管理", "设置", "数据统计", "帮助"]
for i, title in enumerate(page_titles):
# 创建页面主部件
page = QWidget()
page_layout = QVBoxLayout(page)
# 添加页面标题
title_label = QLabel(f"{title}界面")
title_label.setAlignment(Qt.AlignCenter)
title_label.setFont(QFont("SimHei", 24))
page_layout.addWidget(title_label)
# 根据页面类型添加不同内容
if title == "数据统计":
# 数据统计页面 - 添加表格和饼状图
stats_widget = QWidget()
stats_layout = QVBoxLayout(stats_widget)
# 添加表格
table_group = QWidget()
table_layout = QVBoxLayout(table_group)
table_label = QLabel("数据表格")
table_label.setFont(QFont("SimHei", 16))
table_layout.addWidget(table_label)
self.data_table = QTableWidget(10, 5) # 10行5列
self.data_table.setHorizontalHeaderLabels(["产品", "销量", "增长率", "利润率", "库存"])
self.data_table.horizontalHeader().setSectionResizeMode(QHeaderView.Stretch)
self.populate_table() # 填充表格数据
table_layout.addWidget(self.data_table)
# 添加饼状图
chart_group = QWidget()
chart_layout = QVBoxLayout(chart_group)
chart_label = QLabel("销售占比饼图")
chart_label.setFont(QFont("SimHei", 16))
chart_layout.addWidget(chart_label)
self.chart_canvas = FigureCanvas(Figure(figsize=(5, 4), dpi=100))
self.axes = self.chart_canvas.figure.add_subplot(111)
self.update_chart() # 更新图表数据
chart_layout.addWidget(self.chart_canvas)
# 使用水平分割器放置表格和图表
stats_splitter = QSplitter(Qt.Horizontal)
stats_splitter.addWidget(table_group)
stats_splitter.addWidget(chart_group)
stats_splitter.setSizes([500, 500]) # 初始大小分配
stats_layout.addWidget(stats_splitter)
page_layout.addWidget(stats_widget, 1)
else:
# 其他页面 - 添加普通内容区域
content_area = QLabel(f"{title}内容将显示在这里")
content_area.setAlignment(Qt.AlignCenter)
content_area.setStyleSheet("background-color: #f0f0f0; padding: 20px;")
page_layout.addWidget(content_area, 1)
# 添加按钮区域
button_layout = QHBoxLayout()
button_names = [f"{title}按钮{i + 1}" for i in range(5)]
for btn_name in button_names:
btn = QPushButton(btn_name)
btn.setFixedSize(120, 40)
btn.setStyleSheet("""
QPushButton {
background-color: #4CAF50;
color: white;
border-radius: 15px;
}
QPushButton:hover {
background-color: #45a049;
}
""")
btn.clicked.connect(lambda checked, name=btn_name: self.log(f"点击了{name}"))
button_layout.addWidget(btn)
page_layout.addLayout(button_layout)
# 将页面添加到堆叠窗口
self.stacked_widget.addWidget(page)
def populate_table(self):
"""填充数据表格"""
products = ["手机", "电脑", "平板", "耳机", "相机", "手表", "电视", "音箱", "路由器", "充电器"]
for row in range(10):
# 产品名称
product_item = QTableWidgetItem(products[row])
self.data_table.setItem(row, 0, product_item)
# 销量
sales = random.randint(1000, 10000)
sales_item = QTableWidgetItem(f"{sales}")
sales_item.setTextAlignment(Qt.AlignCenter)
self.data_table.setItem(row, 1, sales_item)
# 增长率
growth = random.uniform(-5, 20)
growth_item = QTableWidgetItem(f"{growth:.1f}%")
growth_item.setTextAlignment(Qt.AlignCenter)
if growth >= 0:
growth_item.setForeground(Qt.darkGreen)
else:
growth_item.setForeground(Qt.red)
self.data_table.setItem(row, 2, growth_item)
# 利润率
profit = random.uniform(10, 50)
profit_item = QTableWidgetItem(f"{profit:.1f}%")
profit_item.setTextAlignment(Qt.AlignCenter)
self.data_table.setItem(row, 3, profit_item)
# 库存
stock = random.randint(100, 1000)
stock_item = QTableWidgetItem(f"{stock}")
stock_item.setTextAlignment(Qt.AlignCenter)
self.data_table.setItem(row, 4, stock_item)
def update_chart(self):
"""更新饼状图数据"""
# 清除旧图表
self.axes.clear()
# 生成随机数据
labels = ["手机", "电脑", "平板", "耳机", "其他"]
sizes = [random.randint(10, 40) for _ in range(5)]
colors = ['#ff9999', '#66b3ff', '#99ff99', '#ffcc99', '#c2c2f0']
explode = (0.1, 0, 0, 0, 0) # 突出显示第一个部分
# 绘制饼状图
self.axes.pie(sizes, explode=explode, labels=labels, colors=colors,
autopct='%1.1f%%', shadow=True, startangle=90)
self.axes.axis('equal') # 使饼图为正圆形
self.axes.set_title('产品销售占比')
# 更新画布
self.chart_canvas.draw()
def switch_page(self, index):
"""切换到指定页面，并添加动画效果"""
# 如果动画正在进行，直接返回
if self.animation and self.animation.state() == QPropertyAnimation.Running:
return
# 记录当前页面索引
current_index = self.stacked_widget.currentIndex()
# 如果点击当前页面按钮，不执行切换
if current_index == index:
return
# 记录日志
page_names = ["首页", "用户管理", "设置", "数据统计", "帮助"]
self.log(f"切换到{page_names[index]}")
# 高亮当前按钮
for i, btn in enumerate(self.buttons):
if i == index:
btn.setStyleSheet("""
QPushButton {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 15px;
text-align: left;
padding-left: 25px;
font-size: 25px;
}
""")
else:
btn.setStyleSheet("""
QPushButton {
background-color: #555;
color: white;
border: none;
border-radius: 15px;
text-align: left;
padding-left: 25px;
font-size: 25px;
}
QPushButton:hover {
background-color: #777;
}
""")
# 如果是数据统计页面，更新图表
if index == 3:
self.update_chart()
# 创建并启动动画
self.animation = QPropertyAnimation(self.stacked_widget, b"currentIndex")
self.animation.setDuration(self.animation_duration)
self.animation.setEasingCurve(self.animation_type)
self.animation.setStartValue(current_index)
self.animation.setEndValue(index)
self.animation.start()
def log(self, message):
"""添加日志信息到日志区域"""
from datetime import datetime
timestamp = datetime.now().strftime("%H:%M:%S")
self.log_area.append(f"[{timestamp}] {message}")
# 自动滚动到底部
self.log_area.verticalScrollBar().setValue(
self.log_area.verticalScrollBar().maximum()
)
if __name__ == '__main__':
app = QApplication(sys.argv)
# 确保中文显示正常
font = QFont("SimHei")
app.setFont(font)
dialog = MainDialog()
dialog.show()
sys.exit(app.exec_())
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
