QML item fixed positioning

guidupas

Any suggestion about this problem?

Charby

Mike Krus is mentionning this behavior on IOS in this lightning talk (at 43:17).
It seems it is possible to counteract this default behavior by detecting before the keyboard show up if the TextField is below the last third of the screen and then move it up before the keyboard appear.
That's basically what I tried to achieve yesterday :

a) embed the "content" inside a flickable
b) detect when the virtual keyboard show up
c) ensure the focus element y is above the keyboard, and if not use the flickable contentY to rise it.

a) and c) can easily be managed, but I don't know how to be notified just before the VK shows up (thus before the application window gets offseted). So far I tried to watch the ActiveFocus change of the TextField but it is too late... Do you know another way to detect the keyboard ?

guidupas

No I don't.

I was reading some stuff here, and I figured out that what I want is something that works as the iOS navigation bar. There is any Type in Qml that can do that? I tried StackView, but it also moves up when the keyboard appears.

guidupas

@benlau Hello!

I have seen that you did a navigation bar like native in iOS. Could you help me with this?

guidupas

Hello @Charby !

Is possible to do it using the xCode (Objective C) navigation bar and, in android, jni to solve that?

SGaist

Hi,

One way to track the keyboard visibility could be to use the QInputMethod::visible property.

Hope it helps

Charby

@guidupas This could worth a try...but I guess the native navigation bar is still part of the application window so It should also be offseted outside of the screen/

@SGaist Excellent !
I think we can now achieve to get a satisfactory workaround...

Charby

I have something very hackish and begging for refinement but I think it is going into the right direction :

a flickable to offset the content :
when the keyboard appear :
- offset the content to ensure the focus item is not below the keyboard
- reset the keyboard

There are several improvements area :

replace the timer by a better method and simplify the logic
offset the content only when needed (don't offset when the focus item is already above the keyboard when it appears)
embed this in a component having toolbar and content properties

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
Window {
    visible: true
    property int larguraTela: 360
    property int alturaTela: 640
    width: larguraTela
    height: alturaTela
    maximumWidth: larguraTela
    maximumHeight: alturaTela
    minimumWidth: larguraTela
    minimumHeight: alturaTela
    title: "OverStatusBar"
    Rectangle {
        id: principal
        width: parent.width
        height: parent.height * 0.15
        anchors.top: parent.top
        color: "orange"
    }
    Timer{
        id:resetKeyboard
        interval: 500
        onTriggered: {
            Qt.inputMethod.hide();
            Qt.inputMethod.show();
            unlock.restart();
        }
    }
    Timer{
        id:unlock
        interval: 500

        onTriggered: {
            flickable.updateSlideContent = true;
        }
    }

    Flickable{
        id:flickable
        width: parent.width
        height : slideContent ? parent.height * 0.5 : parent.height * 0.85
        anchors.top: principal.bottom
        clip: true
        contentHeight: parent.height * 0.85
        contentY : slideContent ? parent.height*0.35 : 0

        property bool updateSlideContent : true
        property bool slideContent : false
        property bool keyboardVisible : Qt.inputMethod.visible
        onKeyboardVisibleChanged: {
            if (updateSlideContent) {
                slideContent = keyboardVisible;
                if (keyboardVisible)
                {
                    updateSlideContent = false;
                    resetKeyboard.restart();
                }
            }
        }

        Rectangle {

            anchors.fill: parent




            Rectangle{
                id: retangulo1

                width: parent.width
                height: parent.height * 0.5

                anchors.top: parent.top

                color: "grey"
            }

            Rectangle {
                id: retangulo2

                width: parent.width
                height: parent.height * 0.5

                anchors.top: retangulo1.bottom

                color: "lightgrey"

                TextField {
                    id: campoTexto

                    width: parent.width * 0.7
                    height: parent.height * 0.20

                    anchors.centerIn: parent

                    inputMethodHints: Qt.ImhDigitsOnly

                }
            }
        }

    }
}

guidupas

Yes, but it is to much workaround.

Deepak_Patel

@guidupas, Thanks for this post,
I am in same situation , did you find any result for this, I am in same problem for android and ios both development.
Please can you guide me if you have some work around.