Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Mobile and Embedded
  4. QML item fixed positioning
QtWS25 Last Chance

QML item fixed positioning

Scheduled Pinned Locked Moved Unsolved Mobile and Embedded
qmlkeyboardposition
16 Posts 4 Posters 7.9k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    C Offline
    Charby
    wrote on 5 Jan 2016, 22:23 last edited by
    #4

    Actually I misunderstood your issue...
    Despite I now have a better understanding (If I am not wrong, you would like "principal" rectangle to remain always visible whatever is the visibilty of the virtual keyboard), I haven't been able to come up with a solution... so far I tried :

    • list itemusing an ApplicationWindow i.o Window and defining "Principal" as a toolbar of the application window
    • using a Flickable containing every items except Principal and change contentY depending of the text field focus.
    • define "Principal" as an overlay
    • ...
      but unfortunately, every attempts were unsatisfactory...I will continue tomorrow as this is really puzzling me now to understand what is going wrong.
    1 Reply Last reply
    0
    • C Offline
      C Offline
      Charby
      wrote on 6 Jan 2016, 10:27 last edited by
      #5

      Unfortunately I don't have a satisfactory solution and I am now running out of idea...the best workaround I found is to add an item at the bottom of the screen to reserve a fix height for the virtual keyboard.

      This hackish approach could have been improved by having the reserve item height to be null when the virtual keyboard is not visible but I haven't find a way to determine when the virtual keyboard shows up. Using activeFocus property of a TextField is not enough.

      1 Reply Last reply
      0
      • G Offline
        G Offline
        guidupas
        wrote on 6 Jan 2016, 11:37 last edited by
        #6

        Thank you @Charby for all your effort to help me solving this. I will also keep trying a solution for this issue.

        Att.
        Guilherme Cortada Dupas

        1 Reply Last reply
        0
        • G Offline
          G Offline
          guidupas
          wrote on 7 Jan 2016, 11:32 last edited by
          #7

          Hello @SGaist and @p3c0 !

          Any suggestion about this problem?

          Att.
          Guilherme Cortada Dupas

          1 Reply Last reply
          0
          • C Offline
            C Offline
            Charby
            wrote on 7 Jan 2016, 12:30 last edited by
            #8

            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 ?

            1 Reply Last reply
            0
            • G Offline
              G Offline
              guidupas
              wrote on 7 Jan 2016, 13:15 last edited by
              #9

              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.

              Att.
              Guilherme Cortada Dupas

              1 Reply Last reply
              0
              • G Offline
                G Offline
                guidupas
                wrote on 7 Jan 2016, 20:09 last edited by
                #10

                @benlau Hello!

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

                Att.
                Guilherme Cortada Dupas

                1 Reply Last reply
                0
                • G Offline
                  G Offline
                  guidupas
                  wrote on 14 Jan 2016, 14:25 last edited by
                  #11

                  Hello @Charby !

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

                  Att.
                  Guilherme Cortada Dupas

                  1 Reply Last reply
                  0
                  • S Offline
                    S Offline
                    SGaist
                    Lifetime Qt Champion
                    wrote on 14 Jan 2016, 23:36 last edited by
                    #12

                    Hi,

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

                    Hope it helps

                    Interested in AI ? www.idiap.ch
                    Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                    1 Reply Last reply
                    0
                    • C Offline
                      C Offline
                      Charby
                      wrote on 14 Jan 2016, 23:49 last edited by
                      #13

                      @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...

                      C 1 Reply Last reply 15 Jan 2016, 01:13
                      0
                      • C Charby
                        14 Jan 2016, 23:49

                        @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...

                        C Offline
                        C Offline
                        Charby
                        wrote on 15 Jan 2016, 01:13 last edited by
                        #14

                        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
                        
                                        }
                                    }
                                }
                        
                            }
                        }
                        
                        1 Reply Last reply
                        0
                        • G Offline
                          G Offline
                          guidupas
                          wrote on 18 Jan 2016, 11:23 last edited by
                          #15

                          Yes, but it is to much workaround.

                          Att.
                          Guilherme Cortada Dupas

                          1 Reply Last reply
                          0
                          • D Offline
                            D Offline
                            Deepak_Patel
                            wrote on 26 Apr 2018, 12:49 last edited by
                            #16

                            @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.

                            1 Reply Last reply
                            0

                            • Login

                            • Login or register to search.
                            • First post
                              Last post
                            0
                            • Categories
                            • Recent
                            • Tags
                            • Popular
                            • Users
                            • Groups
                            • Search
                            • Get Qt Extensions
                            • Unsolved