Python 如何使用PySide2实现快速响应的库视图_Python_Image Gallery_Pyside2

Python 如何使用PySide2实现快速响应的库视图

python

Python 如何使用PySide2实现快速响应的库视图,python,image-gallery,pyside2,Python,Image Gallery,Pyside2,我正在为我们公司开发一个资产管理应用程序。它是一个独立的Python3应用程序，使用PySide2与我们的数据库后端进行对话。我正在写的其中一个视图应该是HTML5风格的响应库：资产以缩略图的形式显示，鼠标悬停在资产上会显示额外的信息，单击资产会启动一个操作（例如在适当的应用程序中打开资产）在PySide2/PyQt5中实现这一点的最佳方法是什么因为我觉得在HTML5中实现和设计这样的东西很舒服，所以我倾向于使用QWebEngineView并在python中动态生成HTML和CSS，然后使用

我正在为我们公司开发一个资产管理应用程序。它是一个独立的Python3应用程序，使用PySide2与我们的数据库后端进行对话。我正在写的其中一个视图应该是HTML5风格的响应库：资产以缩略图的形式显示，鼠标悬停在资产上会显示额外的信息，单击资产会启动一个操作（例如在适当的应用程序中打开资产）

在PySide2/PyQt5中实现这一点的最佳方法是什么

因为我觉得在HTML5中实现和设计这样的东西很舒服，所以我倾向于使用QWebEngineView并在python中动态生成HTML和CSS，然后使用QWebEngineView.setHtml（）来显示它

这是在PySide2应用程序中实现的一种好方法吗，而PySide2应用程序不使用HTML？是否有更多的方式来实现一个动态的、反应灵敏的、风格鲜明的画廊

如果我使用QWebEngineView，我将如何拦截用户单击其中一个HTML元素？我发现了这个问题，听起来它可以解决这个问题：。有更简单的解决方案吗？

Qt为您提供了许多备选方案（它们不是完整的解决方案，因为您没有明确指出您需要什么）：

Qt小部件：
Qt QML:
或者QWebEngineView，它关注我当前的答案

不会实施鼠标悬停效应，因为我不是前端专家，但我将专注于双方之间的沟通

要将Python信息传递给JS，可以使用QWebEnginePage的runJavaScript（）方法和/或QWebChannel，使用QWebChannel的相反部分（我不排除QWebEngineUrlRequestInterceptor可能是另一种解决方案，但在本例中，以前的解决方案更简单）。所以在本例中，我将使用QWebChannel

我们的想法是注册一个QObject，它通过信号（在本例中为JSON）发送信息，通过javascript解析JSON并创建动态HTML，然后在任何事件（如单击调用）之前，注册一个QObject的插槽

考虑到上述情况，解决方案是：

├── index.html
├── index.js
└── main.py

导入json
从PySide2导入QtCore、QtGui、QtWidgets、QtWebEngineWidgets、QtWebChannel
类GalleryManager（QtCore.QObject）：
dataChanged=QtCore.Signal（str）
def uuu init uuu（self，parent=None）：
super（）。\uuuu init\uuuu（父级）
self._data=[]
self.\u已加载=False
@QtCore.Slot（str）
def make_动作（自身、标识符）：
打印（标识符）
@QtCore.Slot（）
def初始化（自）：
self.\u已加载=真
self.send_data（）
def发送_数据（自身）：
如果加载了self.\u：
self.dataChanged.emit（json.dumps（self.\u数据））
@财产
def数据（自身）：
返回自身数据
@数据设置器
def数据（自身，d）：
自。_数据=d
self.send_data（）
如果名称=“\uuuuu main\uuuuuuuu”：
导入操作系统
导入系统
#sys.argv.append（“--远程调试端口=8000”）
app=qtwidts.QApplication（sys.argv）
current_dir=os.path.dirname（os.path.realpath（uu文件_uu））
view=QtWebEngineWidgets.QWebEngineView（）
通道=QtWebChannel.QWebChannel（视图）
画廊管理器=画廊管理器（视图）
channel.registerObject（“库管理器”，库管理器）
view.page（）.setWebChannel（频道）
def加载完毕（正常）：
如果不正常：
返回
数据=[]
对于i，枚举中的路径(
(
"https://source.unsplash.com/pWkk7iiCoDM/400x300",
"https://source.unsplash.com/aob0ukAYfuI/400x300",
"https://source.unsplash.com/EUfxH-pze7s/400x300",
"https://source.unsplash.com/M185_qYH8vg/400x300",
"https://source.unsplash.com/sesveuG_rNo/400x300",
"https://source.unsplash.com/AvhMzHwiE_0/400x300",
"https://source.unsplash.com/2gYsZUmockw/400x300",
"https://source.unsplash.com/EMSDtjVHdQ8/400x300",
"https://source.unsplash.com/8mUEy0ABdNE/400x300",
"https://source.unsplash.com/G9Rfc1qccH4/400x300",
"https://source.unsplash.com/aJeH0KcFkuc/400x300",
"https://source.unsplash.com/p2TQ-3Bh3Oo/400x300",
)
):
d={“url”：路径，“标识符”：“id-{}”。格式（i）}
数据追加（d）
gallery_manager.data=数据
view.loadFinished.connect（加载完成时）
filename=os.path.join（当前目录，“index.html”）
view.load（QtCore.QUrl.fromLocalFile（文件名））
查看。调整大小（640480）
view.show（）
sys.exit（app.exec_（））


缩略图库

var库管理器=null；
新的QWebChannel（qt.WebChannel传输，功能（通道）{
gallery\u manager=channel.objects.gallery\u manager；
库管理器。数据更改。连接（填充库）；
gallery_manager.initialize（）；
});
函数库（数据）{
const container=document.getElementById（'container'）；
//清楚的
while（container.firstChild）{
container.removeChild（container.firstChild）；
}
//解析json
var d=JSON.parse（数据）；
//填充数据
用于（常数d）{
var标识符=e[“标识符”]；
var url=e[“url”]；
var div_元素=创建_div（标识符、url）
container.appendChild（div_元素）；
}
}
函数create_div（标识符、url）{
变量html=`
`
var div_element=document.createElement（“div”）；
div_element.className=“col-lg-3 col-md-4 col-6”
div_element.innerHTML=html；
div_元素。addEventListener（'click'，函数（事件）{
画廊管理者。采取行动（标识符）；
});
返回
from PySide2.QtWebEngineWidgets import QWebEngineView, QWebEnginePage



class MyPage(QWebEnginePage):
    def acceptNavigationRequest(self, url, type, isMainFrame):
        print(url, type, isMainFrame)
        if url.toString().startswith('app://'):
            print('intercepted click, do stuff')
            return False
        return True



def createHtml():
    html = """
    <html>
        <head>
            <style>
            .item {
                position: relative;
            }
            .animgif {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
            }
            .item:hover .animgif {
                display: block;
            }
            </style>
        </head>
        <body>
            <a href="app://action/click?id=1234">
                <div class="item">
                    <img class="thumb" src="file://server01/path/to/thumbnail.png">
                    <img class="animgif" src="file://server/path/to/thumbnail.gif">
                </div>
            </a>
        </body>
    </html>
    """
    return html




if __name__ == '__main__':
    import sys
    from PySide2 import QtWidgets

    app = QtWidgets.QApplication(sys.argv)

    page = MyPage()

    view = QWebEngineView()
    view.setPage(page)

    html = createHtml()
    baseUrl = "file://server01/"
    page.setHtml(html, baseUrl=baseUrl)

    view.show()

    sys.exit(app.exec_())

html = createHtml()
baseUrl = "file://server01/"
page.setHtml(html, baseUrl=baseUrl)