How to correctly use filedialog in QML (QT)?

Question

I am developing an app using QML and am a beginner of using QML.

I want to click the "Press me" button and then open a filedialog and then choose a folder. After then clicking 'OK', a listview will list all images in that folder on the UI. However, my program immediately shows a filedialog at the startup without clicking any buttons. Besides, the "Press me" button gives no responses when clicking on it. And the listview does not even show up. Can anyone point out my mistakes?

main.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

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

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

        Page1 {
        }

        Page {
            Label {
                text: qsTr("Second page")
                anchors.centerIn: parent
            }
        }
    }

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


}

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 {
    FolderListModel
    {
        id: folderModel
        showDirs: true
        showDirsFirst: true
        folder: fileDialog.fileUrl
        nameFilters: ["Image Files (*.jpg *.png *.gif)"];
    //nameFilters: ["*.jpg"]
    }

    Component {
        id: fileDelegate
        Text { text: fileName }
    }

    ListView {
        anchors.fill: parent
        model: folderModel
        delegate: fileDelegate
    }

    FileDialog{
        id: fileDialog;
        title: "Please choose a file";
        nameFilters: ["Image Files (*.jpg *.png *.gif)"];
        selectFolder:true
        visible: true
        onAccepted: {
            console.log("User has selected " + dialogFile.folder);
            fileDialog.close()
        }
    }

    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

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

Answer 1

setting Dialog.visible: true is the same as calling to Dialog.open(). Just remove this line. Here is a sample code to show selected folder, just in case you will find it useful:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.2
import Qt.labs.folderlistmodel 2.1
import Qt.labs.platform 1.0

Window {
    id: window
    title: "Folder dialog test"
    visible: true
    width: 600
    height: 400

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 10
        RowLayout {
            Layout.preferredHeight: 40
            Layout.fillWidth: true
            TextField {
                id: path
                enabled: false
                text: folderModel.folder
                Layout.fillWidth: true
            }
            Button {
                text: "..."
                onClicked: folderDialog.open();
            }
        }

        ListView {
            Layout.fillHeight: true
            Layout.fillWidth: true
            model: FolderListModel {
                id: folderModel
                folder: ""
            }
            delegate: Text { text: fileName }
        }
    }

    FolderDialog {
        id: folderDialog
        currentFolder: ""
        folder: StandardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
        onFolderChanged: {
            folderModel.folder = folder;
        }
    }
}