在QML中按列表视图显示图像列表

Question

我正在尝试在尺寸为1920x1080的Windows底部制作一个列表视图图像。但是我不知道如何在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
    }
}

Answer 1

您必须使用ListView并设置适当的锚点：

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
        }
    }
}