CODEWITHSUNDEEP
qtqmlqtquick2qt-quick
arennuit
arennuit

Reputation: 927

Custom FileDialog in QML

I was willing to use FileDialog from QML but it turns out not usable for SaveAs situations (because you cannot specify a non-existing file name) and moreover the feel of the dialog is not really modern or mobile.

As a workaround I have decided to build a simple MyFileDialog which looks like this:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3

Popup
{
    implicitWidth: window.width / 3 * 2
    implicitHeight: window.height / 3 * 2
    x: (window.width - width) / 2
    y: 20
    modal: true
    focus: true

    property alias title: popupLabel.text

    contentItem: ColumnLayout
    {
        id: settingsColumn
        spacing: 20

        // Popup title.
        Label
        {
            id: popupLabel
            font.bold: true
            anchors.horizontalCenter: parent.horizontalCenter
        }

        // File path.
        TextField
        {
            id: field
            placeholderText: "File path..."
            implicitWidth: parent.width
        }

        // Buttons.
        RowLayout
        {
            spacing: 10

            Button
            {
                id: okButton
                text: "Ok"
                onClicked: { onOkClicked(); close();}

                Material.foreground: Material.primary
                Material.background: "transparent"
                Material.elevation: 0

                Layout.preferredWidth: 0
                Layout.fillWidth: true
            }

            Button
            {
                id: cancelButton
                text: "Cancel"
                onClicked: { state = false; }

                Material.background: "transparent"
                Material.elevation: 0

                Layout.preferredWidth: 0
                Layout.fillWidth: true
            }
        }
    }
}

Now I would like this dialog to be reusable for several situations, e.g. to open files, to import files, to save files... But then this means that the behavior of okButton.onClicked is different for each of these situations.

I have tried several ways to specify a custom (or say changeable) behavior for okButton.onClicked but with no great luck so far. Here is what I have tried:

  1. Make a property alias of okButton.onClicked in Popup
  2. Define okButton.onClicked where I use the Popup
  3. Define a behavior function outside the Popup and provide it to the Popup

None of these attempts worked and I always have compilation errors.

Any idea of what I could to make my code reusable?

Also I could find no recent and clean example on the internet, any idea of where I could find that?

Thanks,

Antoine.

Upvotes: 1

Views: 3994

Answers (1)

Mitch
Mitch

Reputation: 24386

FileDialog from the QtQuick.Dialogs import has a selectExisting property which you can use to save as:

Whether only existing files or directories can be selected.

By default, this property is true. This property must be set to the desired value before opening the dialog. Setting this property to false implies that the dialog is for naming a file to which to save something, or naming a folder to be created; therefore selectMultiple must be false.

If you want a modern mobile interface, you're better off making your own. I wouldn't go with a dialog, though, as that's more desktop-centric. Dropbox, for example, uses something like a ListView in its mobile UI:

dropbox

Upvotes: 5

Related Questions