权重高的博客网站网站做前端

以下是一个使用PyQt5实现的界面切换程序，通过点击不同的按钮可以在主窗口中切换显示不同的界面。程序包含一个侧边栏和主内容区域，点击侧边栏按钮会在主区域显示对应的界面。

功能说明

这个应用实现了以下功能：

1. 侧边栏导航：

   • 左侧有一个固定宽度的侧边栏，包含多个导航按钮
   • 按钮有悬停和点击效果，当前选中的按钮会高亮显示

2. 多界面切换：

   • 使用QStackedWidget管理多个界面
   • 点击不同按钮时，主区域会显示对应的界面
   • 每个界面都有独特的标题和内容区域

3. 美观的UI设计：

   • 使用CSS样式美化按钮和界面
   • 采用深色侧边栏与浅色主区域的对比设计
   • 文字使用"SimHei"字体确保中文显示正常

4. 可扩展性：

   • 可以轻松添加新的界面和按钮
   • 每个界面的内容可以根据需求扩展

使用方法

1. 运行程序后，默认显示首页
2. 点击左侧的按钮（如"用户管理"、"设置"等）
3. 主区域会切换显示对应的界面
4. 当前选中的按钮会变为绿色背景

扩展建议

1. 添加真实功能：

   • 在各个页面的布局中添加实际的控件（如表格、表单、图表等）

2. 优化导航逻辑：

   • 可以添加子菜单或分层导航结构
   • 支持快捷键或标签页导航

3. 增强视觉效果：

   • 添加页面切换动画
   • 实现响应式布局以适应不同屏幕尺寸

4. 数据交互：

   • 在页面之间共享数据
   • 添加保存设置或提交表单的功能

这个框架可以作为大多数应用程序的基础，你可以根据具体需求扩展各个页面的功能。

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 = Noneself.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 datetimetimestamp = 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_())