Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中

杨利霞

0 ]) ?( k. j/ `* l! PPython UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中

0 _1 E5 _: y7 C5 H: e
文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
5 d2 x" v" \: r4 O组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
以下组件部分测试测试参考：

4 R0 B0 v. c) N7 F' }参考的B站视频
3 Z* N! |: W% \" y: Pqtconsole 官方文档：The Qt Console for Jupyter
& d9 p' S4 n" K3 J' i. ^4 u2 h组件1：jupyter qtconsole
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
+ `# A- r& Q6 t0 g    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
. M$ h) Y7 y; d2 V1
2、尝试启动
, P+ h% S5 U1 n   jupyter qtconsole
# [7 x9 \. n, H1

4 k) r3 O7 ]/ s1 h. E) Y% R
  V3 A8 @2 V9 {3、尝试嵌入组件到pyside2 ui中
* m# @' Z: ?5 e( @
3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

% e* \& t8 J8 S4 \: S# r0 {3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
" A* I7 B% v' S
) r: c) k, D' M% x1 N7 q
" n8 C# N8 i* y! ~1 l" g3.3、ui显示样式修改1: widget 样式表
2 N" c- i4 S# b! i, I
/*设置父类窗体，背景边框等属性*/
# x( @" @# v. A, L; }$ ZQWidget {
        background-color: rgb(33, 35, 45);
        padding: 8px;
' w5 s4 V: c$ L        border: 2px solid #c3ccdf;
6 c# E6 c6 N( p8 q4 K6 |- Z7 U        color: rgb(255, 255, 255);
, l6 z% I/ s) c) P, f5 t; w        border-radius: 10px;
2 s$ V: h2 @6 Z4 @4 |) a}
1
5 ?; m0 O" L6 F- z2
: O0 z% {4 v, }& W' L. I3
& V: K! x  @  W9 N% _; h1 U- K4
5
7 k: ?: j$ e: M; H4 j& a- g2 C6
7
8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
/ m- E8 Q! Y. Q, Y+ ~4 B% w    self.set_default_style('linux')
1
! I( l+ B2 l& {% z$ e+ B3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
/ X% ]. w, s6 q+ i    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
5 ^! I- s4 d. ^( G  S+ J- P2
: }. Y& Z  U  s3.6、运行效果
/ U( V! q1 ^/ g8 G! w" N1 A
组件2：matplotlib FigureCanvas for qtwidget
1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
( }3 V2 {' e! B    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
# H0 R& C' |' G, B% `    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
0 L' T% t  |% k7 y( S7 r3 P2 l2
3 @) [$ e- F+ d  ?2 u6 h3
youtube 参考视频
, e0 H! N, d$ k& x网站教程
( o" F& b4 [6 l& @* qyoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time
3 X( t5 O7 V6 r# R
测试方法：plot_live_data()
+ R5 H2 g; ?0 R0 X' w; F# n; a个人理解，animation 应该就是定义了一个与UI同线程的定时器。
组件3：pyqtgraph
参考视频1
5 c5 M8 D- D' [5 T& k+ w' C2 G参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

- Y% J: M% l( u6 ?: y1、安装相关库, 指定清华源
: D0 q7 `9 R) T$ R2 X    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
8 ?' U9 v* ?: t1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
" f; a: J$ a$ G& P3 ~8 b9 h4 a4 b  z定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
$ B# d# i- F0 B还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
. C& ~, d8 `' t" z8 w( _! b6 K- |方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

右键RUN pyqtgraph_test.py，效果如下：
; j1 a2 ^3 Y6 H0 m# }. Z

文章知识点与官方知识档案匹配，可进一步学习相关知识
3 \! v0 ]4 K* B' ~$ y————————————————
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230

- c- A5 @; ~2 F, b