如何在 QT (PyQT) 中实现类似于 Google 图片搜索的布局？

Question

我是 QT 的新手。我在我的项目中使用 PyQT 进行 GUI 开发。我想在我的应用程序中实现这种布局。此应用程序从图像数据库中搜索图像。 Google 图片搜索布局非常适合我的目的。

我正在关注“使用 Python 和 Qt 进行快速 GUI 编程”一书，并且我熟悉布局。我想我需要对每个网格框中的每个结果图像使用网格布局。 & 对每个网格框内的 (image,Qlabel,Qlabel) 使用垂直布局。

这些是我面临的一些问题。

1. 重要的是，我无法显示图像。我需要什么控件/小部件？我找不到类似 .NET 的 PictureBox 的东西

2. 如何通过图像中的固定间隙来分隔这些图像结果？我正在使用水平和垂直垫片，但这不起作用？

3. 如何将 QLabel 设置为可点击（如超链接）。我不想打开一个 URL。只是文本应该是可点击的。所以，当用户点击链接时。我可以显示更多信息（例如，当他单击下一页编号时显示下一组结果，或者当用户单击“查看”时显示全尺寸图像的新窗口）我们对此是否有一些新的控制？

4. 这是另一个重要问题。我将显示结果的页码（如图所示）并假设它们是可点击的。如何加载新的page 结果？我的意思是 QT 中 page 的等价物是什么？

5. 如您所料。这绝对不会是 GUI 的第一页。第一页将与http://google.com 完全相同（一个大徽标和文本框，下方有按钮）。当用户单击搜索按钮时。将显示此页面。同样的问题又出现了。如何换页？

请列出我为此需要的控件。如果我不知道什么，请告诉我。

Answer 1

1/2。 要显示图像和标签，请使用 QListWidget 并将视图模式设置为 QListView::IconMode。但是，如果您需要自定义显示超出 QListWidget/QListWidgetItem api 可以提供的范围，则需要创建自己的 QAbstractListModel 并使用标准 QListView。 请务必阅读Qt's primer on model/view。

至于图片间距，请查看列表视图中的spacing property。

这是一个来自 KDE 的 Dolphin 文件管理器的示例：

3.使用常规的QLabel，但将内容设置为href。

例子：

编辑：糟糕，我从您的标签中看到您正在使用 PyQt，以下是 C++，但应该类似于您在 python 中所做的。

  QLabel *linkLabel = new QLabel;
  linkLabel->setTextFormat( Qt::RichText )
  linkLabel->setText( "<a href=\"someurl\"> Click me! </a>" );
  connect( linkLabel, SIGNAL( linkActivated ( const QString & link ) ), .... )

4. 好吧，既然您使用的是模型/视图，为什么还要麻烦页码呢？用户将能够滚动视图并显示更多图片。这是迄今为止最简单的解决方案，因为一旦您完成了 M/V 设置，您就无需执行任何操作！

但是，如果您真的想显示页码，则需要在模型中进行更多工作。例如，在模型中跟踪“当前页面”并只允许访问“当前页面”上的图像。然后在连接到 linkActivated() 信号的插槽中告诉模型更改页面。我不会详细介绍，因为这严重违反了模型/视图背后的整个想法。这样做的“正确方法”是继承 QListView 并添加分页支持，但就像我说的为什么不使用滚动条？这样做不会影响性能。

5.使用QStackedWidget，将所有“页面”添加到它，然后根据需要调用 setCurrentIndex/Widget() 来切换页面。

想法： 您似乎非常致力于克隆 Google 图片搜索的外观、感觉和行为，这很好，但 Google 图片搜索是一个使用与普通桌面应用程序（链接、页面、等等）。您可能正在开发一个桌面应用程序，并且通过尝试模拟 Web 应用程序的行为，您会发现这很困难，因为 API 并非旨在支持这些类型的交互。无论如何，这是可行的，但你会为你完成你的工作。

如果您非常想坚持基于 Web 的交互风格，为什么不使用 javascript 和 HTML 编写您的应用程序并将其扔进QWebView？

Answer 2

尝试使用 ViewMode 设置为 IconMode 的 QListWidget。它应该为你做一切。但是，如果您需要自定义数据显示，请使用 QListView 与您自己的/标准模型和自己的绘画委托