docs(pypi-package): update pyside6

Author: Sun-ZhenXing

docs/pypi-package/pyside6/chapter04/index.md

@@ -2,6 +2,10 @@
 
 [[TOC]]
 
+## 窗口置顶
+
+@[code python](./src/stay_top.py)
+
 ## QButtonGroup
 
 在 Qt Designer 中，选择多个 `RadioButton` 对象右键，选择分配给按钮组，新建按钮组即可创建一个 `QButtonGroup`。
@@ -60,3 +64,13 @@
 | `>AAAAA-AAAAA-AAAAA-AAAAA-AAAAA;#` | 许可证号码，大写，空白为 `#` |
 
 如果我需要设计一个输入 4 字节十六进制数字的输入框，可以使用 `>HH-HH-HH-HH;_` 来表示。
+
+## 创建文件浏览器
+
+可以参考 [`QFileSystemModel`](https://doc.qt.io/qtforpython-6/PySide6/QtWidgets/QFileSystemModel.html) 来了解详细信息。
+
+@[code python](./src/file_explorer.py)
+
+## 简单浏览器
+
+@[code python](./src/simple_brower.py)

docs/pypi-package/pyside6/chapter04/src/file_explorer.py

@@ -0,0 +1,70 @@
+import os
+import sys
+
+from PySide6.QtCore import QDir, QModelIndex
+from PySide6.QtGui import QStandardItem, QStandardItemModel
+from PySide6.QtWidgets import (
+    QApplication,
+    QFileSystemModel,
+    QHBoxLayout,
+    QTreeView,
+    QWidget,
+)
+
+
+class MainWidget(QWidget):
+    def __init__(self, parent=None):
+        super().__init__(parent)
+        self.setWindowTitle("文件浏览器")
+
+        # 文件系统模型，只显示文件夹
+        self._file_model = QFileSystemModel()
+        self._file_model.setFilter(QDir.Dirs | QDir.NoDotAndDotDot)  # type: ignore
+        self._file_model.setRootPath("")
+
+        # 创建目录树视图
+        self._tree_view = QTreeView(self)
+        self._tree_view.setModel(self._file_model)
+        self._tree_view.setHeaderHidden(True)
+
+        # 隐藏：文件大小、类型、修改时间
+        for col in range(1, 4):
+            self._tree_view.setColumnHidden(col, True)
+
+        # 设置双击为展开文件到列表
+        self._tree_view.doubleClicked.connect(self.flush_filelist)
+
+        # 文件列表模型
+        self._filelist_model = QStandardItemModel()
+
+        # 创建文件列表视图
+        self._filelist_view = QTreeView(self)
+        self._filelist_view.setModel(self._filelist_model)
+        self._filelist_view.setEditTriggers(QTreeView.NoEditTriggers)
+
+        # 添加布局
+        layout = QHBoxLayout()
+        layout.addWidget(self._tree_view)
+        layout.addWidget(self._filelist_view)
+        self.setLayout(layout)
+
+    def flush_filelist(self, index: QModelIndex):
+        """刷新文件列表"""
+        self._filelist_model.clear()
+        path = self._file_model.filePath(index)
+        # 设置列表头
+        self._filelist_model.setHorizontalHeaderLabels([path])
+
+        # 遍历文件夹下的文件
+        for file in os.listdir(path):
+            if os.path.isfile(os.path.join(path, file)):
+                item = QStandardItem(file)
+                self._filelist_model.appendRow(item)
+
+
+if __name__ == "__main__":
+    app = QApplication(sys.argv)
+    window = MainWidget()
+    window.resize(600, 400)
+    window.show()
+    sys.exit(app.exec())

docs/pypi-package/pyside6/chapter04/src/simple_brower.py

@@ -0,0 +1,20 @@
+import sys
+
+from PySide6.QtWebEngineWidgets import QWebEngineView
+from PySide6.QtWidgets import QApplication, QMainWindow
+
+
+class MainWindow(QMainWindow):
+    def __init__(self):
+        super().__init__()
+        self.setWindowTitle("Web View")
+        self._browser = QWebEngineView()
+        self._browser.load("https://www.bing.com/")
+        self.setCentralWidget(self._browser)
+
+
+if __name__ == "__main__":
+    app = QApplication(sys.argv)
+    window = MainWindow()
+    window.showMaximized()
+    app.exit(app.exec())

docs/pypi-package/pyside6/chapter04/src/stay_top.py

@@ -0,0 +1,11 @@
+import sys
+
+from PySide6.QtCore import Qt
+from PySide6.QtWidgets import QApplication, QWidget
+
+if __name__ == "__main__":
+    app = QApplication(sys.argv)
+    window = QWidget()
+    window.setWindowFlags(Qt.WindowStaysOnTopHint)
+    window.show()
+    sys.exit(app.exec())

docs/pypi-package/pyside6/chapter07/index.md

@@ -1,3 +1,42 @@
-# 7. PySide6 样式和 QSS
+# 7. PySide6 样式和动画
 
 [[TOC]]
+
+## QSS 基本语法
+
+::: tip 参考文档
+
+- [QSS 可用属性：官方文档](https://doc.qt.io/qt-6/stylesheet-reference.html#list-of-properties)
+- [QSS 官方示例](https://doc.qt.io/qt-6/stylesheet-examples.html)
+
+:::
+
+类似 CSS，QSS 每一条都是由一个选择器和一组声明构成：
+
+- 选择器选出要对哪种控件进行样式修改
+- 每个声明都是键值对，键为属性，值为属性值
+
+```css
+QWidget {
+    color: #000;
+    background-color: #fff;
+}
+```
+
+## 使用方式
+
+为降低耦合，往往把 QSS 写在一个单独的 `style.qss` 文件中，然后在 `main.py` 的 `QMainWindow` 中加载样式。
+
+新建一个扩展名为 `.qss` 的文件，如 `style.qss`，编辑内容。
+
+@[code css](./src/style.qss)
+
+在 `main.py` 中加载样式：
+
+@[code python](./src/qss_demo.py)
+
+## 动态修改
+
+部分参考了 [hektorprofe/curso-qt-pyside-udemy](https://github.com/hektorprofe/curso-qt-pyside-udemy) 的代码。
+
+@[code python](./src/qss_editor.py)

docs/pypi-package/pyside6/chapter07/src/qss_demo.py

@@ -0,0 +1,34 @@
+import sys
+
+from PySide6.QtCore import QFile, Qt
+from PySide6.QtWidgets import QApplication, QLabel, QMainWindow
+
+
+class QSSLoader:
+    def __init__(self, path: str) -> None:
+        self._path = path
+
+    def load(self) -> str:
+        f = QFile(self._path)
+        f.open(QFile.ReadOnly | QFile.Text)
+        stylesheet = f.readAll()
+        return stylesheet.data().decode("utf-8")
+
+
+class MainWindow(QMainWindow):
+    def __init__(self):
+        super().__init__()
+        self.setWindowTitle("QSS Demo")
+        self.resize(400, 300)
+
+        label = QLabel("Hello World")
+        label.setAlignment(Qt.AlignCenter)
+        self.setCentralWidget(label)
+
+
+if __name__ == "__main__":
+    app = QApplication(sys.argv)
+    window = MainWindow()
+    window.setStyleSheet(QSSLoader("style.qss").load())
+    window.show()
+    sys.exit(app.exec())

docs/pypi-package/pyside6/chapter07/src/qss_editor.py

@@ -0,0 +1,92 @@
+import sys
+
+from PySide6.QtWidgets import (
+    QApplication,
+    QCheckBox,
+    QFormLayout,
+    QLabel,
+    QLineEdit,
+    QMainWindow,
+    QPlainTextEdit,
+    QPushButton,
+    QRadioButton,
+    QSpinBox,
+    QVBoxLayout,
+    QWidget,
+)
+
+STYLE = """QMainWindow {
+    background-color: #212121;
+}
+QLabel {
+    color: #e9e9e9;
+}
+QPushButton {
+    background-color: orange;
+    font-family: 'Arial';
+    font-size: 14px;
+    font-weight: bold;
+}
+"""
+
+
+class QSSEditor(QWidget):
+    def __init__(self, parent: QWidget | None = None):
+        super().__init__()
+
+        self._parent = parent
+        self.resize(480, 320)
+        self.setWindowTitle("QSS Editor")
+
+        self._editor = QPlainTextEdit()
+        self._editor.setStyleSheet(
+            "background-color: #212121;color: #e9e9e9;"
+            "font-family: Consolas; font-size: 16px; "
+        )
+        self._editor.setFont("Consolas")
+        self._editor.setPlainText(STYLE)
+        self._editor.textChanged.connect(self.update_style)
+
+        layout = QVBoxLayout()
+        layout.addWidget(self._editor)
+        self.setLayout(layout)
+
+        self.show()
+
+    def update_style(self):
+        qss = self._editor.toPlainText()
+        try:
+            self._parent.setStyleSheet(qss)
+        except:
+            pass
+
+
+class MainWindow(QMainWindow):
+    def __init__(self):
+        super().__init__()
+
+        layout = QFormLayout()
+        layout.addRow("QCheckBox", QCheckBox())
+        layout.addRow("QRadioButton", QRadioButton())
+        layout.addRow("QLabel", QLabel("QLabel"))
+        layout.addRow("QPushButton", QPushButton("QPushButton"))
+        layout.addRow("QLineEdit", QLineEdit("QLineEdit"))
+        layout.addRow("QSpinBox", QSpinBox())
+
+        widget = QWidget()
+        widget.setLayout(layout)
+        self.setCentralWidget(widget)
+
+        label = QLabel("QLabel")
+        label.setObjectName("label")
+        layout.addRow(label)
+
+        self._qss_editor = QSSEditor(self)
+        self.setStyleSheet(STYLE)
+
+
+if __name__ == "__main__":
+    app = QApplication(sys.argv)
+    window = MainWindow()
+    window.show()
+    sys.exit(app.exec())

docs/pypi-package/pyside6/chapter07/src/style.qss

@@ -0,0 +1,4 @@
+QWidget {
+    color: #e34fff;
+    background-color: #000;
+}

docs/pypi-package/pyside6/chapter08/src/hello.py

@@ -2,19 +2,17 @@
 import sys
 
 from PySide6.QtCore import Qt, Slot
-from PySide6.QtWidgets import (QApplication, QLabel, QPushButton, QVBoxLayout,
-                               QWidget)
+from PySide6.QtWidgets import QApplication, QLabel, QPushButton, QVBoxLayout, QWidget
 
 
 class MyWidget(QWidget):
     def __init__(self):
         QWidget.__init__(self)
 
-        self.hello = ['Hallo Welt', '你好，世界', 'Hei maailma',
-                      'Hola Mundo', 'Привет мир']
+        self.hello = ["Hallo Welt", "你好，世界", "Hei maailma", "Hola Mundo", "Привет мир"]
 
-        self.button = QPushButton('Click me!')
-        self.text = QLabel('Hello World')
+        self.button = QPushButton("Click me!")
+        self.text = QLabel("Hello World")
         self.text.setAlignment(Qt.AlignCenter)
 
         self.layout = QVBoxLayout()
@@ -30,11 +28,9 @@ def magic(self):
         self.text.setText(random.choice(self.hello))
 
 
-if __name__ == '__main__':
+if __name__ == "__main__":
     app = QApplication(sys.argv)
-
     widget = MyWidget()
     widget.resize(800, 600)
     widget.show()
-
     sys.exit(app.exec())

docs/pypi-package/pyside6/chapter09/index.md

@@ -0,0 +1,15 @@
+# 9. 使用 PySide6 构建高级应用
+
+[[TOC]]
+
+## 9.1 使用 OpenCV
+
+如果没有安装 OpenCV，可以使用下面的命令安装：
+
+```bash
+pip install opencv-python
+```
+
+下面我们来看一个使用 OpenCV 的例子，使用 OpenCV 读取摄像头的图像，并显示在窗口中。
+
+@[code python](./src/opencv_read_camera.py)