Qml item in fixed position

Asked

Viewed 61 times

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 keyboard is called?

I need the Rectangle with id: principal stay 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

            }
        }
    }
}

enter image description here enter image description here

keyboard positioning qml

  • You could send the Xcode print?

  • I’m not using Xcode, I’m using Qml.

  • 1

    I edited the post to enter the source code.

  • Hasn’t shown up yet.

  • I was looking for a solution to the problem and reading some websites saw that what I’m looking for is a Qml Type that works like the iOS navigation bar. There is some element in Qml that does this. I tried Stackview, but it keeps moving up when the keyboard appears.

1 answer

0


Okay, after a long research on this topic I conclude that there is no possible solution, at least so far, that does not involve too much alternative programming to solve the problem in cross-platform languages. I tried several cross-platform languages without finding any satifactory 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 native-looking apps that work as expected and without bugs, I need to do this using native programming languages, even if I need to develop twice in different languages. It’s what I’m doing from now on: Xcode and Android Studio.

If anyone wants to take a look at a piece of code to start doing this in QML access the link 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

                }
            }
        }

    }
}

Browser other questions tagged keyboard positioning qml

You are not signed in. Login or sign up in order to post.