Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-123352

Make it easier (more intuitive) to use Qt Virtual Keyboard inside ApplicationWindow

    XMLWordPrintable

Details

    • Suggestion
    • Resolution: Unresolved
    • Not Evaluated
    • None
    • None
    • Virtual Keyboard
    • None

    Description

      When creating a new project in Qt Creator, the auto-generated code for InputPanel simplifies to this:

      InputPanel {
          id: inputPanel
          z: 99
          x: 0
          y: window.height - (inputPanel.active ? inputPanel.height : 0)
          width: window.width
      }
      

       

      If the user starts implementing an ApplicationWindow, then they might write something like this:

      import QtQuick
      import QtQuick.Controls.Basic
      import QtQuick.VirtualKeyboard
      
      ApplicationWindow {
          id: window
          width: 400
          height: 300
          color: "beige"
          visible: true
          title: `VKB AppWin Test (${inputPanel.active ? "Active" : "Inactive"})`
      
          menuBar: Rectangle {
              height: 25
              color: "cyan"
              border.width: 1
          }
          header: Rectangle {
              height: 25
              color: "magenta"
              border.width: 1
          }
          footer: Rectangle {
              height: 25
              color: "yellow"
              border.width: 1
          }
      
          TextField {}
      
          InputPanel {
              id: inputPanel
              z: 99
              x: 0
              y: window.height - (inputPanel.active ? inputPanel.height : 0)
              width: window.width
          }
      }
      

      Oops!

       

      Now, what if we change "window.height" to "parent.height" instead?

      InputPanel {
          id: inputPanel
          z: 99
          x: 0
          y: parent.height - (inputPanel.active ? inputPanel.height : 0)
          width: parent.width
      }
      

      Still oops!

       

      What actually works is one of these...

      // Solution #1: Use QQuickContentItem height instead of window height as the base, then include footer height in the calculations
      // Pro: It works
      // Con: It's verbose
      // Note: Only applicable to ApplicationWindow
      InputPanel {
          id: inputPanel
          z: 99
          x: 0
          y: inputPanel.active ? (parent.height - inputPanel.height + window.footer.height) : (window.height)
          width: parent.width
      }
      
      // Solution #2: Re-parent the InputPanel to the window's QQuickRootItem
      // Pro: Less verbose than the above
      // Con: Requires knowledge about the undocumented internal structure of ApplicationWindow 
      // Note: This technique can be used in both ApplicationWindow and Window, but requires different code for each
      InputPanel {
          id: inputPanel
          parent: window.contentItem.parent // NOTE: Use `window.contentItem` if we're in a Window instead of ApplicationWindow
          z: 99
          x: 0
          y: parent.height - (inputPanel.active ? inputPanel.height : 0)
          width: parent.width
      }
      
      // Solution #3: Re-parent the InputPanel to the window's QQuickOverlay
      // Pro: Same code can be used in both ApplicationWindow and Window
      // Con: Requires knowledge about the undocumented internal structure of ApplicationWindow
      // Note: Same code can be used in both ApplicationWindow and Window, but requires `import QtQuick.Controls` if using Window
      InputPanel {
          id: inputPanel
          parent: Overlay.overlay
          z: 99
          x: 0
          y: parent.height - (inputPanel.active ? inputPanel.height : 0)
          width: parent.width
      }
      

      ...but these are not obvious. Some documentation and/or a common and intuitive solution would be nice.

      Attachments

        1. qtvkb-appwindow-bad1.png
          10 kB
          Sze Howe Koh
        2. qtvkb-appwindow-bad2.png
          16 kB
          Sze Howe Koh
        3. qtvkb-appwindow-good.png
          15 kB
          Sze Howe Koh
        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            jakoivik Jarkko Koivikko
            skoh-qt Sze Howe Koh
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated:

              Gerrit Reviews

                There are no open Gerrit changes