beginner question: qml if else with a switch

[ifelse]

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/

[ikoz]

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

[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
            }
        }
    }
}

[arubislander]

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

I can recommend this one.

[kugiigi]

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"