Results 1 to 3 of 3

Thread: QML Toggle Button

  1. #1
    Join Date
    Dec 2015
    Location
    Austria
    Posts
    23
    Thanks
    7
    Thanked 1 Time in 1 Post
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Windows Android

    Default Re: QML Toggle Button

    Hi,
    I want to create a toggle button like this one
    http://i.stack.imgur.com/Tb2aV.png
    My first approach doesn't work propper and i dont know why.
    The first toggle seems to be okay, but the second one fills the whole toggle area instead of "moving" the child rectangle back to the right Position.
    What would be the best approach to create such toggle button?

    Qt Code:
    1. Rectangle {
    2. id: root
    3. property alias label: text.text
    4. property bool active: false
    5.  
    6. signal toggled
    7. height: 30
    8. width: height * 2.5
    9. radius: height * 0.25
    10. color: "lightgray"
    11. border.width: 1
    12. border.color: "#11000000"
    13. Text { id: text; anchors.centerIn: parent; font.pixelSize: 14; }
    14. MouseArea {
    15. anchors.fill: parent
    16. onClicked: { active = !active; root.toggled() }
    17. }
    18.  
    19. Item{
    20. width: parent.width * 0.75
    21. anchors.top: parent.top
    22. anchors.bottom: parent.bottom
    23. anchors.right: active ? undefined : parent.right
    24. anchors.left: active ? parent.left : undefined
    25. Rectangle {
    26. anchors.fill: parent
    27. radius: root.height * 0.25
    28. color: active ? "green" : "red"
    29. }
    30. }
    31. }
    To copy to clipboard, switch view to plain text mode 

    Thanks!


    Added after 5 minutes:


    Okay. i found another solution. I use the margind isntead of the anchors left and right

    Qt Code:
    1. Rectangle {
    2. id: root
    3. //property alias label: text.text
    4. property bool active: false
    5.  
    6. signal toggled
    7. height: guiTheme.app.standardTextSize * 1.25
    8. width: height * 2.5
    9. radius: height * 0.25
    10. color: "lightgray"
    11. border.width: 1
    12. border.color: "#11000000"
    13. //Text { id: text; anchors.centerIn: parent; font.pixelSize: 14; }
    14. MouseArea {
    15. anchors.fill: parent
    16. onClicked: { active = !active; root.toggled() }
    17. }
    18.  
    19. Item{
    20. //width: parent.width * 0.75
    21. anchors.top: parent.top
    22. anchors.bottom: parent.bottom
    23. //anchors.right: active ? undefined : parent.right
    24. //anchors.left: active ? parent.left : undefined
    25. anchors.right: parent.right
    26. anchors.left: parent.left
    27. anchors.leftMargin: active ? 0 : (parent.width * 0.25)
    28. anchors.rightMargin: active ? (parent.width * 0.25) : 0
    29. Rectangle {
    30. anchors.fill: parent
    31. radius: root.height * 0.25
    32. color: active ? "green" : "red"
    33. }
    34. }
    35.  
    36. }
    To copy to clipboard, switch view to plain text mode 

    That works...
    Last edited by ChriD; 26th January 2016 at 13:17.

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: QML Toggle Button

    There is also QtQuick.Controls Switch http://doc.qt.io/qt-5/qml-qtquick-controls-switch.html

    You could also emit the toggled signal when active changes, unless you only want it to be emitted when the change is affected by the click.

    Cheers,
    _

  3. The following user says thank you to anda_skoa for this useful post:

    ChriD (26th January 2016)

  4. #3
    Join Date
    Dec 2015
    Location
    Austria
    Posts
    23
    Thanks
    7
    Thanked 1 Time in 1 Post
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Windows Android

    Default Re: QML Toggle Button

    I completely missed that! Thank you for your info. Of course i'll use the Switch withSytling Component instead my poor attempt

Similar Threads

  1. QSslSocket toggle certificates
    By raszewski in forum Qt Programming
    Replies: 5
    Last Post: 29th November 2012, 20:51
  2. How to get toggle action text?
    By sudhansu in forum Qt Programming
    Replies: 4
    Last Post: 29th May 2012, 12:57
  3. Replies: 3
    Last Post: 26th July 2010, 03:23
  4. Change button Icon on toggle
    By bizmopeen in forum Qt Programming
    Replies: 3
    Last Post: 14th July 2009, 00:17
  5. How to toggle between 2 forms
    By safknw in forum Qt Programming
    Replies: 2
    Last Post: 13th May 2006, 11:34

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.