Question

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

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

预期的界面：

源代码：

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，界面变为：

无法单击文件夹，也无法正确对齐文件夹。

Answer 1

也许这个例子对你有用。我添加了＆＃34;返回＆＃34;上升到一个文件夹的按钮，代表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
    }
}

使用＆＃34; ...＆＃34;获取可点击的顶部区域我会在那里添加Text和Mouse Area来处理点击：

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之后。

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

1 个答案: