Proper forms for mobile (QML)



  • 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


  • Qt Champions 2016

    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"



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


  • Qt Champions 2016

    @Vi67 hmm. Not quite understand your first problem.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.