Qml item in fixed position

0

Mobile devices move the elements up when the keyboard is called, but there are elements that stay in the same position when the device keyboard is called as in the images below.

How can I keep a Qml item fixed in position when the device's keyboard is called?

I need the Rectangle with id: principal to be fixed in position

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"
    }

    Rectangle {

        width: parent.width
        height: parent.height * 0.85

        anchors.top: principal.bottom

        clip: true

        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

            }
        }
    }
}

    
asked by anonymous 05.01.2016 / 18:24

1 answer

0

Okay, after a long search on this topic I conclude that there is no possible solution, at least until now, that it does not involve a lot of alternative programming to solve the problem in multi-platform languages. I tried several cross-platform languages without finding any satisfying solution that could be implemented. The languages I tried were:

  • QML

  • Appcelerator (Titanium)

  • PhoneGap (Cordova)

  • Native Script

  • React Native

My conclusion is that if I want to develop apps that look good and look good, I need to do this using native programming languages, even though I need to do it twice in different languages. This is what I'm doing from now on: XCode and Android Studio.

If someone wants to take a look at a piece of code to start doing this in QML, go to the clicking here :

  

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

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

                }
            }
        }

    }
}
    
28.01.2016 / 20:08