status-desktop/docs/qml_crash_course.md

QML Crash course

Intro

Every QML file imports at least QtQuick and then other imports that might be required for the QML Types being used. QML Types have properties (similar to CSS somewhat), and typically contain other QML Types as children.

import QtQuick 2.0
import <SomeImportNeededForTypeName>

TypeName {
   propertyName: value
   
   AnotherType {
       propertyName: value
       anotherProperty: value2
   }
}

example:

import QtQuick 2.0

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }
}

QML Properties - using ids

QML Types can be identified by an id which can be used as variable to access other properties from that element as parameter to other elements.

In this example, the Text element is identified with the id tabBtnText, we can use this to access the width of the text and used as value for the width of the Rectangle so its width is always the same as the text:

Rectangle {
    id: tabButton
    width: tabBtnText.width // will always reflect the width of tabBtnText
    height: tabBtnText.height + 11

    Text {
        id: tabBtnText
        text: "hello there"
    }
}

Another example, combining a TabBar and a StackLayout, the StackLayout will display a different view depending on which TabButton has been selected since its index is taking the value of the tabbar

TabBar {
    id: tabBar
    currentIndex: 0
    
    TabButton { ... } // will change currentIndex to 0 if selected
    TabButton { ... } // will change currentIndex to 1 if selected
    ...
}

StackLayout {
    ...
    currentIndex: tabBar.currentIndex // use the newest value of the TabBar

    Item {} // will be displayed if currentIndex == 0
    item {} // will be displayed if currentIndex == 1
    ...
}

QML Properties - parent and children

It's possible to also refer to a parent of an element. This is typically used for widths & anchors but can be used to access any property from the parent, for example:

ColumnLayout {
    id: suggestionsContainer
    Layout.fillHeight: true
    Layout.fillWidth: true

    Row {
        id: description
        anchors.right: parent.right
        anchors.rightMargin: 20
        anchors.left: parent.left
        anchors.leftMargin: 20
        width: parent.width
    }
}

Or even a particular child using children, for example, here the rectangle remains at the width of the child text with an additional room of 10 pixels:

Rectangle {
    width: children[0].width + 10

    Text {
        text: "#" + channel
    }
}

QML Types A complete list of QML Types can be found in the QT documentation here

some commonly used types in nim-status-client include:

• Text
• Image
• SplitView
• TabBar & TabButton
• StackLayout
• ColumnLayout & RowLayout
• ListView

SplitView Example

The SplitView list items with a draggable splitter between each item

import QtQuick 2.0
import QtQuick.Controls 2.13 // required for SplitView

SplitView {
    id: walletView

    // splitter settings
    handleDelegate: Rectangle {
        implicitWidth: 1
        implicitHeight: 4
        color: Theme.grey
    }

    Text {
        text: "item on the left"
    }
    
    Text {
        text: "item on the right"
    }
}

TabBar & TabButton Example

TabBar {
    id: tabBar
    currentIndex: 0

    TabButton { text: "foo" } // will change currentIndex to 0 if selected
    TabButton { text: "bar" } // will change currentIndex to 1 if selected
    ...
}

tabBar.currentIndex can then be used as value for some other property (typically used to supply the index for StackLayout)