UBports Robot Logo UBports Forum
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Register
    • Login

    beginner question: qml if else with a switch

    Scheduled Pinned Locked Moved App Development
    5 Posts 4 Posters 462 Views 3 Watching
    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.
      • I Offline
        ifelse
        last edited by arubislander

        Hi,
        I wanna do the following - but have absolute no idea how!

        App with a switch.

        Icon {
                       if Switch.on (
                           width: units.gu(5)
                           height: units.gu(5)
                           name: 'flash-on'       
                       )
                      else if (
                           width: units.gu(5)
                           height: units.gu(5)
                           name: 'flash-off'
                        )
                      else (
                           width: units.gu(5)
                           height: units.gu(5)
                           name: 'cancel'
                      )  
                   }
        

        https://docs.ubports.com/projects/icons/en/latest/

        ikozI 1 Reply Last reply Reply Quote 0
        • ikozI Offline
          ikoz @ifelse
          last edited by

          @ifelse Just modify the icon.name variable from a separate function

          May the source be with you

          I 1 Reply Last reply Reply Quote 0
          • I Offline
            ifelse @ikoz
            last edited by ifelse

            @ikoz

            could you be so kind an give me a example

            beacuse how to define a variable in qml code:

            • add the icon

            here is the default Main.qml
            when create a new project.

            import QtQuick 2.7
            import QtQuick.Controls 2.2
            import Lomiri.Components 1.3
            import QtQuick.Layouts 1.3
            import Qt.labs.settings 1.0
            
            import Greeter 1.0
            
            ApplicationWindow {
                id: root
                objectName: 'mainView'
            
                width: units.gu(45)
                height: units.gu(75)
                visible: true
            
                Greeter {
                    id: greeter
                    name: "Rust + Ubuntu Touch"
                }
            
                Page {
                    anchors.fill: parent
            
                    header: PageHeader {
                        id: header
                        title: i18n.tr('bla')
                    }
            
                        Icon {
                            width: units.gu(5)
                            height: units.gu(5)
                            name: 'cancel'
                            
                        }
            
                    ColumnLayout {
                        spacing: units.gu(2)
                        anchors {
                            margins: units.gu(2)
                            top: header.bottom
                            left: parent.left
                            right: parent.right
                            bottom: parent.bottom
                        }
            
                        Item {
                            Layout.fillHeight: true
                        }
            
                        Label {
                            id: label
                            text: i18n.tr('Press the button below!')
                        }
            
                        Button {
                            text: i18n.tr('Compute greeting')
                            onClicked: {
                                label.text = greeter.compute_greetings("Hello, ");
                            }
                        }
            
                        Switch {
                            checked: off
                            onClicked: {
                                    label.text = greeter.compute_greetings("sw on");
                            }
            
                        }
            
            
                        Item {
                            Layout.fillHeight: true
                        }
                    }
                }
            }
            
            arubislanderA 1 Reply Last reply Reply Quote 0
            • arubislanderA Offline
              arubislander @ifelse
              last edited by

              @ifelse It seems you might benefit from a general introductory level QML tutorial.

              I can recommend this one.

              πŸ‡¦πŸ‡Ό πŸ‡³πŸ‡± πŸ‡ΊπŸ‡Έ πŸ‡ͺπŸ‡Έ
              Happily running Ubuntu Touch
              Google Pixel 3a (20.04 DEV)
              JingPad (24.04 preview)
              Meizu Pro 5 (16.04 DEV)

              1 Reply Last reply Reply Quote 1
              • K Offline
                kugiigi
                last edited by

                Yeah I agree. You don't fully grasp yet how QML works. We all had that time when we are starting especially when coming from non-declarative language πŸ˜„ You should really try reading a bit even just the basics of it. One key thing is that Javascript is used for logic within QML, ideally only for front end logic but you could also do everything with just QML and JS.

                For your example, you can simply add an inline conditional statement for the icon.name property. Or for more advanced use especially if you intend to add more changes, you can use States.

                Here's a sample one for the inline:

                icon.name: switch.checked ? "tick" : "close"
                
                1 Reply Last reply Reply Quote 0
                • First post
                  Last post