QML item fixed positioning - qt

Question

The mobile devices move the elements up the the keyboard is called, but there are elements that stay in the same position when the device's keyboard appears like the images below.
How can I keep a Qml item fixed in the same position when device's keyboard appears?
I need that the Rectangle with id: principal stays fixed in the same 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
}
}
}
}

Answer 1

Ok, after a long research about this topic I have concluded that there is no possible solution, at least until now, that doesn't involve a lot of workaround programming to solve that using cross-platform programming. I have tried a bunch of cross-platform languages with no satisfactory 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 do develop native look and feel apps that work as expected and without bugs, I need to do it using the native programming languages, even if I need to develop it twice in different languages. And that is what I am doing from now: XCode and Android Studio.
If someone would like to take a look at a piece of code to start doing it in QML just 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
}
}
}
}
}