首页 文章

如何使用QML将ListView与FolderListModel集成？

提问于
浏览 次
1

我正在使用QML开发文件浏览器界面 . 但是，我发现我无法点击任何文件夹，列表覆盖了顶部按钮 . 我不知道我做错了什么 .

我在开发过程中使用了ListView和FolderListModel . 我打算将界面设置如下，并像文件浏览器一样工作

预期的界面：
enter image description here

Source Code:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Dialogs 1.1
import Qt.labs.folderlistmodel 2.1
import QtMultimedia 5.0
import QtQuick.Controls.Styles 1.4
import Qt.labs.platform 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    property int index: 0
    property bool isActive: true

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Page1 {
            Rectangle {
                id:root;
                state:"hidden";
                color: "#212126";

                property string folderPathName: "file:///C:/";
                property bool rootPath:false;
                signal message(string msg);
                property int lineHeight: 90;
                signal selectedFolder(string folderPath);

                Button{
                    id:topLine;
                    text: "...";
                    width: root.width;
                    height: root.lineHeight;

                    onClicked: {
                        if (folderModel.parentFolder != ""){
                            root.folderPathName = folderModel.parentFolder;
                        }
                        else{
                            root.state = "hidden";
                        }
                    }
                }

                ListView{
                    id:listFileView;
                    anchors{
                        bottom: rectangleButton.top;
                        bottomMargin: 4;
                        right: root.right;
                        rightMargin: 0;
                        left: root.left;
                        leftMargin: 0;
                        top: topLine.bottom;
                        topMargin: 0;
                    }
                    clip:true;

                    delegate:Button{
                        text: fileName;
                        height:root.lineHeight;
                        width:root.width;

                        onClicked: {
                            if(folderModel.isFolder(index)){
                                root.folderPathName = folderModel.get(index, "fileURL");
                            }
                        }
                    }
                    model: FolderListModel{
                        id:folderModel;
                        objectName: "folderModel";
                        showDirs: true;
                        showFiles: true;
                        showDirsFirst: true;
                        nameFilters: ["*.mp3", "*.flac"];
                        folder:root.folderPathName;
                    }
                }

                  Rectangle {
                    id: rectangleButton;
                    height: 20;
                    color: "#212126";
                    anchors{
                        left: root.left;
                        leftMargin: 0;
                        right: root.right;
                        rightMargin: 0;
                        bottom: root.bottom;
                        bottomMargin: 0;
                    }

                    Rectangle{
                        id:rectWhiteLine;
                        anchors{
                            left:parent.left;
                            right: parent.right;
                            top:parent.top;
                        }
                        height: 2;
                        color:"white";
                    }
                }
            }
        }

        Page {

        }
    }

    footer: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex
        TabButton {
            text: qsTr("Main")
        }
        TabButton {
            text: qsTr("View")
        }
    }
}

更改锚点后{bottom：rectangleButton.top; bottomMargin：4;对：root.right; rightMargin：0; left：root.left; leftMargin：0; top：topLine.bottom; topMargin：0;宽度：200;高度：600，界面变为：

enter image description here

无法单击文件夹，并且它们未正确对齐 .

qt qml

1 回答

  • 1

    也许这个例子对你有用 . 我添加了一个文件夹上升的"back"按钮，而 ListView 中代表文件夹的按钮颜色为橙色 .

    import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.2
import Qt.labs.folderlistmodel 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: mainRect
        x: 20
        y: 20
        width: 300
        height: 450
        border.color: "black"
        radius: 30
        ListView {
            y: 30
            width: parent.width
            height: parent.height - 60
            clip: true
            model: FolderListModel {
                id: folderListModel
                showDirsFirst: true
//                nameFilters: ["*.mp3", "*.flac"]
            }

            delegate: Button {
                width: parent.width
                height: 50
                text: fileName
                onClicked: {
                    if (fileIsDir) {
                        folderListModel.folder = fileURL
                    }
                }
                background: Rectangle {
                    color: fileIsDir ? "orange" : "gray"
                    border.color: "black"
                }
            }
        }
    }
    Button {
        anchors.left: mainRect.right
        anchors.leftMargin: 5
        text: "back"
        onClicked: folderListModel.folder = folderListModel.parentFolder
    }
}

    preview

    要使用“...”获取可点击的顶部区域，我会在那里添加文本和鼠标区域来处理点击：

    Text {
    width: parent.width
    height: 30
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
    text: "..."
    MouseArea {
        anchors.fill: parent
        onClicked: folderListModel.folder = folderListModel.parentFolder
    }
}

    在 mainRect 中添加此代码，即在 radius: 30 行之后 .

    回复于

相关问题