qt - 在 QML 中通过 listview 显示图像列表
问题描述
我正在尝试在大小为 1920x1080 的窗口底部制作列表视图图像。但我不知道如何在 QML 中使用 listview 来显示图像。Uhis 是设计
更新:
import QtQuick 2.5
import QtQuick.Window 2.2
import Qt.labs.folderlistmodel 2.1
import QtQuick.Dialogs 1.0
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
FileDialog {
id: fileDialog // call dialog
visible: true
title: "Choose a file"
property url defaultz: "E:\IMG"
folder: defaultz
selectMultiple: true
nameFilters: [ "Image files (*.jpg *.png *.bmp)", "All files (*)" ]
onAccepted: {
console.log("You chose: " + fileDialog.fileUrls)
console.log(fileDialog.fileUrls.length)
}
onRejected: {
console.log("Canceled")
fileDialog.visible = false
}
}
ListView { // call listview
id: listview
height: 100
anchors{
left: parent.left
right: parent.right
bottom: parent.bottom
}
orientation: Qt.Horizontal
delegate:
Image {
width: 160
height: 90
source: modelData
}
}
Component.onCompleted: {
listview.model = fileDialog.fileUrls // here is caller
}
}
解决方案
您必须使用 aListView
并设置适当的锚点:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ListView {
id: listview
height: 100
anchors{
left: parent.left
right: parent.right
bottom: parent.bottom
}
orientation: Qt.Horizontal
delegate:
Image {
source: modelData
}
}
Component.onCompleted: {
var images = [
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png"
]
listview.model = images
}
}
或使用Repeater
:
Row{
anchors{
left: parent.left
right: parent.right
bottom: parent.bottom
}
Repeater {
id: repeater
delegate:
Image {
source: modelData
}
}
}
Component.onCompleted: {
var images = [
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png",
"http://doc.qt.io/qt-5/images/declarative-qtlogo.png"
]
repeater.model = images
}
更新:
import QtQuick 2.5
import QtQuick.Window 2.2
import Qt.labs.folderlistmodel 2.1
import QtQuick.Dialogs 1.0
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
FileDialog {
id: fileDialog
visible: true
title: "Choose a file"
property url defaultz: "E:\IMG"
folder: defaultz
selectMultiple: true
nameFilters: [ "Image files (*.jpg *.png *.bmp)", "All files (*)" ]
onAccepted: {
var images = [];
for(var i in fileDialog.fileUrls){
images[i] = fileDialog.fileUrls[i]
}
listview.model = images
}
onRejected: fileDialog.visible = false
}
ListView {
id: listview
height: 100
anchors{
left: parent.left
right: parent.right
bottom: parent.bottom
}
orientation: Qt.Horizontal
delegate:
Image {
width: 160
height: 90
source: modelData
}
}
}
推荐阅读
- ios - Swift:使用 UISearchController 取消按钮选择后奇怪的“捕捉”搜索栏动画?
- php - php中的if条件中的for循环
- c# - 更改我的变量会创建无限循环
- go - 为什么使用文本而不是字形会阻止我的神经网络学习?
- django - ImportError:在运行服务器时无法导入名称视图
- deep-learning - 使用语音 ASR 进行机器学习
- python - PyQt5 QTableWidget:右键选择列,并在上下文菜单中显示删除条目
- jquery - 单击 img 标签更改 svg 图像颜色
- java - 解码 BCryptPassword 以在 JavaMailSenderImpl 中设置
- python - 如何从弹性搜索中捕获特定字段并转换为熊猫数据框