Proper forms for mobile (QML)

[Vi67]

Hello,

I'm trying to find the best way for making proper forms which fit mobile user behaviors.
But I have two main problems :

• 1st : Flickable and TextField interactions don't work well together. TextField should let flickable parent scrolling before showing keyboard.
• 2de : Know when the keyboard is displayed, then make Flickable going further than its content height. It enables to show entirely the form even with keyboard displayed.

For the 1st problem, I found a bad hack. It's not working well because if you hide keyboard, you can't show keyboard again directly by just clicking on it.

Input.qml

Item {
	TextField {
		id: field
		anchors.fill: parent
	}

	MouseArea {
		anchors.fill: parent
		preventStealing: false

		onReleased: {
			field.forceActiveFocus();
		}
	}
}

For the 2de problem, I didn't find a way to know if keyboard is displayed. If I could, I can add an empty Item at the end of Flickable content like this :

ScrollView {
    anchors.fill: parent
    horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
    verticalScrollBarPolicy: Qt.ScrollBarAsNeeded

    Flickable {
        anchors.fill: parent
        contentWidth: col.width; contentHeight: col.height
        boundsBehavior: Flickable.StopAtBounds

		Column {
			id: col
			width: screen.width
			
			Input {} // = TextField
			Input {} // = TextField
			Input {} // = TextField
			
			// potential fix
			Item {
				width: parent.width
				height: Qt.Keyboard.height
				visible: Qt.Keyboard.visible
			}
		}
	}
}

Thank you in advance for your help

[benlau]

For Android, you may set to resize window when keyboard is shown. Your Flickable will resize to occupy remaining space, then you should scroll the text field to top.

e.g

Add this property into the Activity tag inside AndroidManifest.xml
android:windowSoftInputMode="adjustResize"

[Vi67]

Thank you very much, it fixes the second problem perfectly.
There is still first problem, any idea ?

[benlau]

@Vi67 hmm. Not quite understand your first problem.