QML开发求助：FileDialog异常及ListView不显示问题排查

Let's break down and fix each of your problems step by step:

1. FileDialog pops up automatically on app start #

Root cause: You set visible: true on your FileDialog component. In QML, any component with visible: true will render immediately when the app initializes—this is why it pops up without you clicking the button.

Fix: Change visible: true to visible: false in your FileDialog definition. You already have fileDialog.open() in your button click handler, which is the correct way to trigger the dialog when the button is pressed.

2. "Press Me" button doesn't respond #

Root causes:

• In your FileDialog's onAccepted callback, you referenced dialogFile.folder, but there's no component with the ID dialogFile in your code. You meant to use fileDialog.fileUrl (the current dialog's selected path).
• The automatic dialog pop-up might have been causing console errors that blocked other logic from running. Fixing the first issue will resolve this too.

3. ListView doesn't display any content #

Root causes:

• Your FolderListModel had showDirs: true, which tells the model to display folders instead of files. Since you want to list images, this should be false.
• You bound folderModel.folder to fileDialog.fileUrl initially, but fileUrl is empty until the user selects a folder. Instead, you should set the model's folder path only after the user confirms their selection in the dialog.
• Your ListView was set to fill the entire parent, which meant the top part was hidden behind the RowLayout with your button and text field. We need to adjust its anchors to sit below that layout.

Corrected Code #

Page1.qml

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

Page1Form {
    // Access the RowLayout from the form via the new alias
    rowLayout.id: rowLayout

    FolderListModel {
        id: folderModel
        showDirs: false // Only show files, not folders
        nameFilters: ["Image Files (*.jpg *.png *.gif)"]
        // Leave folder unset initially; we'll set it after user selection
    }

    Component {
        id: fileDelegate
        Text {
            text: fileName
            padding: 5 // Add padding for better readability
        }
    }

    ListView {
        // Position the ListView below the top RowLayout
        anchors.top: rowLayout.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        model: folderModel
        delegate: fileDelegate
        clip: true // Prevent content from spilling outside the ListView bounds
    }

    FileDialog{
        id: fileDialog;
        title: "Please choose a folder"; // Update title to match folder selection
        selectFolder: true
        visible: false // Don't show on startup
        nameFilters: ["Image Files (*.jpg *.png *.gif)"];

        onAccepted: {
            console.log("User selected folder: " + fileDialog.fileUrl);
            folderModel.folder = fileDialog.fileUrl; // Assign the selected path to the model
            fileDialog.close();
        }

        onRejected: {
            fileDialog.close(); // Close dialog if user cancels
        }
    }

    button1.onClicked: {
        fileDialog.open();
        console.log("Button pressed. Entered text: " + textField1.text);
    }
}

Page1Form.ui.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Item {
    property alias textField1: textField1
    property alias button1: button1
    property alias rowLayout: rowLayout // Add alias to access the RowLayout externally

    RowLayout {
        id: rowLayout
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 20
        anchors.top: parent.top

        TextField {
            id: textField1
            placeholderText: qsTr("Text Field")
        }

        Button {
            id: button1
            text: qsTr("Press Me")
        }
    }
}

With these changes:

• The FileDialog will only open when you click the "Press Me" button
• The button will respond correctly and trigger the dialog
• The ListView will display all image files from the selected folder, positioned below your top controls

内容的提问来源于stack exchange，提问作者md612