先看效果，创建一个容器控件，动态在其中创建三个不同大小的标签演示容器控件的自适应布局

开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674

一、开发板简介

二、开发环境搭建 windows

三、基础示例

四、LVGL控件使用示例

    LVGL_Arc_Test                                  圆弧指示器通过触摸动态改变值
    LVGL_Bar_Test                                  通过动画方式动态演示Bar进度条的使用方法
    LVGL_Button_Test                             通过5种不同动态效果的按钮学习按钮的创建与使用
    LVGL_ButtonMatrix_Test                   创建一个计算器布局来演示矩阵按钮控件的使用
    LVGL_Calendar_Test                         日历控件的创建和使用
   LVGL_Canvas_Test                          透明画布和画一个圆角过渡色矩形旋转角度学习画布的使用
    LVGL_Chart_Test                               通过创建三个不同风格的图表来学习图表控件的使用
    LVGL_Checkbox_Test                        学习复选框控件的创建和使用
    LVGL_ColorPicker_Test                     创建一个颜色选择器并动态显示当前颜色的RGB值
    LVGL_Container_Test                        在容器控件上动态创建三个文本标签
    LVGL_Drop_down_List_Test              创建三个不同类型的下拉选择控件
    LVGL_Gauge_Test                             创建一个动态仪表和静态多指针仪表
    LVGL_Image_Test                              通过四个滑动条控制图片颜色的变化学习图像控件的使用
    LVGL_ImageButton_Test                  创建一个图片背景的图像按钮
    LVGL_Keyboard_Test                       通过一个文本输入框控件还学习键盘控件的调用关闭设置
    LVGL_Label_Test                              创建颜色可变，长文本滚动，带阴影3D效果三个标签控件
    LVGL_LED_Test                                创建三个LED，学习LED控件的调光，颜色，开关的设置
    LVGL_Line_Test                                通过二维数组创建一段折线来演示线控件的使用
    LVGL_LineMeter_Test                      创建两个不同的线段弧形指示器动态展示数据
    LVGL_List_Test                                 创建一个带图标的列表控件
    LVGL_MessageBox_Test                  创建一个带按钮的消息框控件
    LVGL_ObjectMask_Test                    创建一个变幻色的文本学习蒙版遮罩效果
    LVGL_Page_Test                            学习页面控件的使用
    LVGL_Roller_Test                           通过示例学习滑动列表选择器控件
    LVGL_Slider_Test                           创建一个单向和一个双向滑动条控件
    LVGL_Spinbox_Test                        学习微调控件的使用
    LVGL_Spinner_Test                        创建三个不同的环形加载器
    LVGL_Switch_Test                          创建两个不同的开关控件
    LVGL_Table_Test                            创建一个简单的表格
    LVGL_Tabview_Test                       实现三页的页面切换学习Tabview控件
    LVGL_Textarea_Test                       长按实现打字机效果的Textarea控件
    LVGL_Tileview_Test                        实现四面环形触摸切换的Tileview控件
    LVGL_Window_Test                        创建一个窗口，带设置子窗口学习窗口控件的使用

容器(lv_cont):

容器本质上是具有布局和自动调整大小功能的 基本对象 。

零件和样式

容器只有一个主要样式称为 LV_CONT_PART_MAIN ，它可以使用所有通常的bacground属性和填充来自动调整布局大小。

用法

布局

可以在容器上应用布局以自动订购其子代。布局间距来自样式的 填充(pad) 属性。可能的布局选项：

• LV_LAYOUT_OFF – 不要对齐子代。
• LV_LAYOUT_CENTER – 将子项与列中的中心对齐，并 padd_inner 在它们之间保持间距。
• LV_LAYOUT_COLUMN_LEFT – 在左对齐的列中对齐子级。请 padd_left 在左边，空间 pad_top 空间的顶部和 pad_inner 孩子之间的空间。
• LV_LAYOUT_COLUMN_MID – 在中心列中对齐子代。 padd_top 在顶部和 pad_inner 孩子之间保持空间。
• LV_LAYOUT_COLUMN_RIGHT – 在右对齐的列中对齐子代。保持 padd_right 右边的 pad_top 空间，顶部的 pad_inner 空间和孩子之间的空间。
• LV_LAYOUT_ROW_TOP – 在顶部对齐的行中对齐子级。请pad_left在左边，空间pad_top空间的顶部和pad_inner“ 孩子之间的空间。
• LV_LAYOUT_ROW_MID – 在居中的行中对齐子级。 pad_left 在左边和 pad_inner 孩子之间保持空间。
• LV_LAYOUT_ROW_BOTTOM – 在底部对齐的行中对齐子级。请 pad_left 在左边，空间 pad_bottom 空间的底部和 pad_inner 孩子之间的空间。
• LV_LAYOUT_PRETTY_TOP – 将作为连续多的对象可能（至少 pad_inner 空间和 pad_left/right 空间两侧）。在孩子之间的每一行中平均分配空间。如果这是连续不同身高的孩子，请对齐其上边缘。
• LV_LAYOUT_PRETTY_MID – 与 LV_LAYOUT_PRETTY_MID 相同，但是如果此处的孩子连续排成不同的高度，则对齐他们的中线。
• LV_LAYOUT_PRETTY_BOTTOM – 与 ··LV_LAYOUT_PRETTY_BOTTOM·· 相同， ··但是如果这是连续高度不同的子项，请对齐其底线。
• LV_LAYOUT_GRID – 类似于 LV_LAYOUT_PRETTY 但不能平均划分水平空间，只是让它们之间的 pad_left/right 边缘和 pad_inner 空间分开。

自动调整

容器具有自动适应功能，可以根据其子代和/或父代自动更改容器的大小。存在以下选项：

• LV_FIT_NONE – 不要自动更改大小。
• LV_FIT_TIGHT – 将容器收缩包装在其所有子容器周围，同时 pad_top/bottom/left/right 在边缘保留空间。
• LV_FIT_PARENT – 将大小设置为父项的大小减去 pad_top/bottom/left/right （来自父项的样式）空间。
• LV_FIT_MAX – 使用 LV_FIT_PARENT 而不是父小， LV_FIT_TIGHT 时大。它将确保该容器至少是其父容器的大小。

要为所有方向设置自动适合模式，请使用。要在水平和垂直方向上使用不同的自动拟合，请使用。要在所有四个方向上使用不同的自动拟合，请使用。lv_cont_set_fit(cont, LV_FIT_…)lv_cont_set_fit2(cont, hor_fit_type, ver_fit_type)lv_cont_set_fit4(cont, left_fit_type, right_fit_type, top_fit_type, bottom_fit_type)

事件

仅 通用事件 是按对象类型发送的。

按键

对象类型不处理任何键。

目录

1、QTabWidget容器控件类

2、QStackedWidget容器控件类

3、QDockWidget容器控件类

有时候我们可能会面临这样一种情况：所开发的程序包含了太多的控件，导致一个窗口装载不下或者装载的控件太多而不美观。

本篇博文就来解决这个问题，即如何在现有的窗口空间中装载更多的控件。

1、QTabWidget容器控件类

QTabWidget控件提供了一个选项卡和一个页面区域，默认显示第一个选项卡的页面。通过单击各选项卡可以查看对应的页面。如果在一个窗口中显示的输入字段很多，则可以对这些字段进行拆分，分别放置在不同页面的选项卡中。

QTabWidget类中的常用方法如下表所示：

QTabWidget类中的常用信号如下表所示：

通过示例，了解QTabWidget容器控件类的使用方法，效果如下所示：

示例中，一个表单的内容分为三组，每一组小控件都显示在不同的选项卡中。顶层窗口是一个QTablWidget控件，将三个选项卡添加进去。

实现代码如下所示：

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
          
class TabDemo(QTabWidget):
	def __init__(self, parent=None):
		super(TabDemo, self).__init__(parent)   
		self.tab1 = QWidget()
		self.tab2 = QWidget()
		self.tab3 = QWidget()
		self.addTab(self.tab1,"Tab 1")
		self.addTab(self.tab2,"Tab 2")
		self.addTab(self.tab3,"Tab 3")
		self.tab1UI()
		self.tab2UI()
		self.tab3UI()
		self.setWindowTitle("Tab 例子")
		
	def tab1UI(self):
		layout = QFormLayout()
		layout.addRow("姓名",QLineEdit())
		layout.addRow("地址",QLineEdit())
		self.setTabText(0,"联系方式")
		self.tab1.setLayout(layout)
		
	def tab2UI(self):
		layout = QFormLayout()
		sex = QHBoxLayout()
		sex.addWidget(QRadioButton("男"))    
		sex.addWidget(QRadioButton("女"))
		layout.addRow(QLabel("性别"),sex)
		layout.addRow("生日",QLineEdit())
		self.setTabText(1,"个人详细信息")
		self.tab2.setLayout(layout)
		
	def tab3UI(self):
		layout=QHBoxLayout()
		layout.addWidget(QLabel("科目"))
		layout.addWidget(QCheckBox("物理"))
		layout.addWidget(QCheckBox("高数"))
		self.setTabText(2,"教育程度")
		self.tab3.setLayout(layout)

if __name__ == '__main__':
	app = QApplication(sys.argv)
	demo = TabDemo()
	demo.show()
	sys.exit(app.exec_())

2、QStackedWidget容器控件类

QStackedWidget是一个堆栈窗口控件，使用QStackedLayout布局，可以填充一些小控件，但同一时间只有一个小控件可以显示。QStackedWidget控件与QTabWidget类似，可以有效地显示窗口中的控件。

通过示例，了解QStackedWidget容器控件类的使用方法，效果如下所示：

示例中，在QStackedWidget对象中填充了三个子控件。每个子控件都可以有自己的布局，包含特定的表单元素。QStackedWidget控件不能在页面之间切换，它与当前选中的QListWidget控件中的选项进行连接。将QListWidget的currentRowChanged信号与display()槽函数相关联，从而改变堆叠控件的视图。

实现代码如下所示：

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
     
class StackedExample(QWidget):
	def __init__(self):
		super(StackedExample, self).__init__()
		self.setGeometry(300, 50, 10,10)
		self.setWindowTitle('StackedWidget 例子')
		
		self.leftlist = QListWidget ()
		self.leftlist.insertItem (0, '联系方式' )
		self.leftlist.insertItem (1, '个人信息' )
		self.leftlist.insertItem (2, '教育程度' )
		self.stack1= QWidget()
		self.stack2= QWidget()
		self.stack3= QWidget()
		self.stack1UI()
		self.stack2UI()
		self.stack3UI()
		self.Stack = QStackedWidget (self)
		self.Stack.addWidget (self.stack1)
		self.Stack.addWidget (self.stack2)
		self.Stack.addWidget (self.stack3)
		hbox = QHBoxLayout(self)
		hbox.addWidget(self.leftlist)
		hbox.addWidget(self.Stack)
		self.setLayout(hbox)
		self.leftlist.currentRowChanged.connect(self.display)

	def stack1UI(self):
		layout=QFormLayout()
		layout.addRow("姓名",QLineEdit())
		layout.addRow("地址",QLineEdit())
		self.stack1.setLayout(layout)

	def stack2UI(self):
		layout=QFormLayout()
		sex=QHBoxLayout()
		sex.addWidget(QRadioButton("男"))
		sex.addWidget(QRadioButton("女"))
		layout.addRow(QLabel("性别"),sex)
		layout.addRow("生日",QLineEdit())   
		self.stack2.setLayout(layout)

	def stack3UI(self):
		layout=QHBoxLayout()
		layout.addWidget(QLabel("科目"))
		layout.addWidget(QCheckBox("物理"))
		layout.addWidget(QCheckBox("高数"))
		self.stack3.setLayout(layout)
	
	def display(self,i):
		self.Stack.setCurrentIndex(i)
	                	
if __name__ == '__main__':
	app = QApplication(sys.argv)
	demo = StackedExample()
	demo.show()
	sys.exit(app.exec_())

3、QDockWidget容器控件类

QDockWidget是一个可以停靠在QMainWindow内的窗口控件，它可以保持在浮动状态或者在指定位置作为子窗口附加到主窗口中。QMainWindow类的主窗口对象保留有一个用于停靠窗口的区域，这个区域在控件的中央周围，如下图所示：

QDockWidget控件在主窗口内可以移动到新的区域。QDockWidget类中的常用方法如下表所示：

通过示例，了解QDockWidget容器控件类的使用方法，效果如下所示：

示例中，顶层窗口是一个QMainWindow对象，QTextEdit对象是它的中央小控件，创建可停靠的窗口items，然后，在停靠窗口items内添加QListWidget对象，最后，将停靠窗口放置在中央小控件的右侧。

实现代码如下所示：

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class DockDemo(QMainWindow):
	def __init__(self, parent=None):
		super(DockDemo, self).__init__(parent)
		layout = QHBoxLayout()
		bar=self.menuBar()
		file=bar.addMenu("File")
		file.addAction("New")
		file.addAction("save")
		file.addAction("quit")
		self.items = QDockWidget("Dockable", self)
		self.listWidget = QListWidget()
		self.listWidget.addItem("item1")
		self.listWidget.addItem("item2")
		self.listWidget.addItem("item3")
		self.items.setWidget(self.listWidget)
		self.items.setFloating(False)
		self.setCentralWidget(QTextEdit())
		self.addDockWidget(Qt.RightDockWidgetArea, self.items)
		self.setLayout(layout)
		self.setWindowTitle("Dock 例子")
					
if __name__ == '__main__':
	app = QApplication(sys.argv)
	demo = DockDemo()
	demo.show()
	sys.exit(app.exec_())