FileDialog rendering broken on Android?

[Violet Giraffe]

Here's what I'm trying to do:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Material 2.0

ApplicationWindow {
	Material.theme: Material.Dark
	property bool toolBarsVisible: true
	id: window
	visible: true
	header: toolBarsVisible ? toolBarLoader : null

	Loader {
		id: toolBarLoader
		sourceComponent: toolbarComponent
	}

	Component {
		id: toolbarComponent

		ToolBar {

			RowLayout {
				anchors.fill: parent

				Slider {
					Layout.fillWidth: true
				}

				ToolButton {
					id: mainMenuButton
					anchors.leftMargin: 10
					font.pointSize: 26
					text: "≡"

					onClicked: mainMenu.open()
				}

				Menu {
						id: mainMenu
						y: mainMenuButton.height
						x: mainMenuButton.x

						MenuItem {
							FileDialog {
								id: openFileDIalog
								title: "Pick a text file"
								folder: shortcuts.home
								onAccepted: {
									Qt.quit()
								}
								onRejected: {
									Qt.quit()
								}
							}

							text: "Open..."
							onClicked: openFileDIalog.open()
						}

						MenuItem {
							text: "Settings..."
						}
					}
			}
		}
	}
}

And here's what I get when I invoke the menu and press "Open".
That doesn't look right. What's the problem and how can I fix it?

[jpnurmi]

I'd recommend building your own simple mobile-oriented file picker using ListView and FolderListModel. With Qt Quick Controls 2.0, you can use a Popup like the Gallery Example does.

In the near future, Qt Quick Controls 2.1 (Qt 5.8) is going to introduce Dialog and DialogButtonBox controls. Even though there will be also experimental native FileDialog and FolderDialog types, these are targeting the traditional desktop platforms. On mobile, you are better off with ListView and FolderListModel.

[Violet Giraffe]

@jpnurmi
Thank you. That's certainly more work than it should be. But either way, I now recall running the QML "Dialogs" example on this very Nexus 7 without any issues! Surely it shouldn't look like this. Could it become broken because of the Material style?

[jpnurmi]

@Violet-Giraffe said:

That's certainly more work than it should be.

It might be much less of work than one would expect. Mobile file pickers are typically simple lists, after all. Qt Quick Controls 2 provide built-in delegate types, so building a Material style file picker should not be much more than putting a ListView, ItemDelegate, and FolderListModel together. Even though we do have vague plans providing later some pickers (date, time, file...) later, we still have some basic controls to do before we get to implement such higher level controls.

But either way, I now recall running the QML "Dialogs" example on this very Nexus 7 without any issues! Surely it shouldn't look like this. Could it become broken because of the Material style?

If you mean the Qt Quick Controls 2.x Material style, no, not really, it has nothing to do with the QML FileDialog from Qt Quick Dialogs 1.x. The QML FileDialog is just too desktop centric. One can see it doesn't scale too well on a smaller screens - it's cluttered with too much... stuff. What might be the culprit though is that Qt Quick Controls 1.x and Qt Quick Dialogs 2.x don't play well with Qt::AA_EnableHighDpiScaling (some things may get double scaled).

[Violet Giraffe]

@jpnurmi
I do indeed have Qt::AA_EnableHighDpiScaling set. Will check if that's the culprit.
Isn't this a Qt bug?..

[jpnurmi]

@Violet-Giraffe said:

I do indeed have Qt::AA_EnableHighDpiScaling set. Will check if that's the culprit.
Isn't this a Qt bug?..

QTBUG-51999