如何在QT(PyQT)中实现类似谷歌图片搜索的布局?
我刚开始接触QT,正在用PyQT来开发我项目的图形界面。我想在我的应用程序中实现这种布局。这个应用程序是用来从图片数据库中搜索图片的。谷歌图片搜索的布局非常适合我的需求。
我在看一本叫《用Python和Qt快速编写图形界面》的书,对布局有一些了解。我想我需要使用网格布局,把每个结果图片放在网格的每个框里。然后在每个网格框里使用垂直布局,放置(图片,QLabel,QLabel)。
我现在遇到了一些问题。
首先,我无法显示图片。我需要用什么控件或小部件呢?我找不到类似于.NET中的PictureBox的东西。
我该如何像图片中那样,用固定的间隔来分隔这些图片结果?我在使用水平和垂直的间隔器,但效果不好。
如何让QLabel变得可点击(像超链接那样)?我不想打开一个网址,只希望文本可以点击。这样,当用户点击链接时,我可以显示更多信息(比如当他点击下一页的数字时显示下一组结果,或者当用户点击“查看”时显示全尺寸的图片)。我们有这种新的控件吗?
这是另一个重要的问题。我会显示结果的页码(如图所示),假设它们是可点击的。我该如何加载新的
page
结果?在QT中,page
的对应物是什么?如你所猜,这绝对不是图形界面的第一页。第一页会和http://google.com一模一样(一个大logo和下面的文本框及按钮)。当用户点击搜索按钮时,这一页会显示出来。再次出现同样的问题,如何切换页面?
请给我一个我需要的控件列表。如果我遗漏了什么,请告诉我。
2 个回答
试试用QListWidget,并把视图模式设置为图标模式。这样应该就能满足你的需求了。但是,如果你想要自定义数据的显示方式,就需要用QListView,并且自己定义模型和绘制的方式。
1/2。要显示图片和标签,可以使用一个叫做 QListWidget 的组件,并把视图模式设置为 QListView::IconMode。不过,如果你想要的显示效果超出了 QListWidget/QListWidgetItem 提供的功能,那你就需要自己创建一个 QAbstractListModel,然后用一个标准的 QListView 来配合它。记得看看 Qt 的模型/视图入门。
至于图片之间的间距,可以查看一下列表视图的 spacing 属性。
这里有一个来自 KDE 的 Dolphin 文件管理器的例子:
3. 使用普通的 QLabel,但把内容设置为一个链接。
例子:
补充:哦,我看到你的标签是用 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. 嗯,既然你在使用模型/视图,那为什么还要搞页码呢?用户可以直接滚动视图,更多的图片就会显示出来。这是最简单的解决方案,因为一旦你设置好了模型/视图,就不需要再做其他事情了!
不过,如果你真的想显示页码,那就需要在你的模型中做更多的工作。例如,跟踪“当前页”的信息,只允许访问“当前页”的图片。然后在连接到 linkActivated() 信号的槽中告诉模型切换页面。我就不详细说了,因为这会严重违背模型/视图的设计理念。正确的做法是子类化 QListView,添加分页支持,但如我所说,为什么不直接用滚动条呢?这样做不会影响性能。
5. 使用一个 QStackedWidget,把所有的“页面”都加进去,然后根据需要调用 setCurrentIndex/Widget() 来切换页面。
想法:看起来你非常想要复制 Google 图片搜索的外观、感觉和行为,这没问题,但 Google 图片搜索是一个网页应用,使用的交互方式和普通桌面应用非常不同(链接、页面等)。你大概是在开发一个桌面应用,而试图模仿网页应用的行为会让你觉得很困难,因为 API 并不是为了支持那种交互方式而设计的。虽然这样做是可行的,但你会发现工作量很大。
如果你非常坚持要使用基于网页的交互风格,为什么不直接用 JavaScript 和 HTML 编写你的应用,然后放到一个 QWebView 中呢?