Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Click button (with focus) bei pressing Enter/Return

    QML and Qt Quick
    2
    5
    4274
    Loading More Posts
    • 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.
    • K
      Kieren last edited by

      Hi,

      I'm currently working at Dialog/Form and want to improve the user experience by allowing the user to navigate trough the Dialog whit keys also.

      When having the focus on a QML-Button pressing "Space" nicely presses the button like it would look like when using the mice and also fires the "click()-Signal" of the button.
      I'm trying to get the same result when the user preses "Return/Enter" but don't know how.

      Also it would be nice if the OK-Button is the default if no button has focus and "Return/Enter" is pressed. Just setting the isDefault-Property ("doc":http://doc.qt.io/qt-5/qml-qtquick-controls-button.html#isDefault-prop) to true doesn't to the trick. Might it be that this only some parent Items can handle child-Buttons with isDefault?

      I'll be very thankful for any hint.
      Really try to get to understand how QML works :)

      Cheers,
      Kieren

      1 Reply Last reply Reply Quote 0
      • p3c0
        p3c0 Moderators last edited by

        Hi,

        If you are using "Dialog":http://doc.qt.io/qt-5/qml-qtquick-dialogs-dialog.html, then the default "Ok" button will be pressed when user pressed Enter/Return.
        @
        Dialog {
        id: dialog
        visible: true
        title: "Dialog"

        onAccepted: console.log("Enter clicked")
        

        }
        @

        157

        1 Reply Last reply Reply Quote 0
        • K
          Kieren last edited by

          Hi,

          thanks for the replay. I've found QML-Dialog before but wasn't able to get our style (graphics...) on the component.

          One of the Dialogs/Forms I'm working at is an option dialog with many (50+) different elements (CheckBoxes, RadioButtons, Comboxes) for example to chose the resolution of the program or activate full-screen mode.

          I was able to implement a workaround for the default Return/Enter action when no element that uses the key has focus, by using:
          @Keys.onReturnPressed: { doOkButtonAction(); }@
          but this still does not visually "click" the button.
          Also I still didn't find a way to use Return/Enter to click the focused button as it happens when using Space.

          As this only is for the user experience my time left to spent on this issue is quit limited as new features are more important to the project right now, than polishing existing ones (I guess many of you know this problem).

          Still if there are any other suggestions I'll be very happy to give them a try.
          And again thanks for the Dialog idea! Seeing how others work on things like that is always a good thing, especially as I'm still new to QML and happy to find more "best practice" advice.

          Cheers,
          Kieren

          1 Reply Last reply Reply Quote 0
          • p3c0
            p3c0 Moderators last edited by

            Hmm, then you can always use the ButtonStyle to do it.
            eg:
            @
            property bool isPressed : false

            Button {
            id: button
            focus: true
            text: "Click"
            onClicked: console.log("ck")

            style: ButtonStyle {
                background: Rectangle {
                    implicitWidth: 100
                    implicitHeight: 25
                    border.color: "#888"
                    radius: 4
                    gradient: Gradient {
                        GradientStop { position: 0 ; color: control.pressed || isPressed ? "#ccc" : "#eee" }
                        GradientStop { position: 1 ; color: control.pressed || isPressed ? "#aaa" : "#ccc" }
                    }
                }
            }
            
            Keys.onPressed: if (event.key === Qt.Key_Return) { isPressed = true }
            Keys.onReleased: isPressed = false
            

            }
            @

            157

            1 Reply Last reply Reply Quote 0
            • K
              Kieren last edited by

              Hi again,

              that should work!

              But as it is already working with Space just fine, I was hoping that it is possible to just use the same mechanism.

              If there is no better solution till I find time to work on this again, I might just use your approach to get it working :)

              Thanks.

              Cheers,
              Kieren

              1 Reply Last reply Reply Quote 0
              • First post
                Last post