StatusBar QML Type

(BETA) Allows access to status bar customization on iOS and Android devices. More...

• List of all members, including inherited members

Properties

• color : color
• supported : bool
• theme : Theme
• visible : bool

Signals

• error(StatusBarErrorStatus status)

Methods

• bool supportedOperation(statusbaroperation operation)

Detailed Description

The StatusBar component provides access to a number of operations to manage the appearance of the status bar when using your app. The status bar is the bar on the top of a smartphone screen that displays elements such as system time, signal strength, and app notifications. This component is a singleton, and does not need to be instantiated.

This functionality is currently only supported on Android and iOS. Status bars are not displayed by default on these devices; it first has to be enabled by setting the property display.statusBar to true in the app's appinfo.json.

We recommend that when using this component, your App object be set as a delegate within an AppLayout object. This is done to handle verying heights of the status bar across devices, especially devices with a notch such as later iPhones. The following code sample demonstrates what this looks like:

AppLayout {
    width: 400
    height: 640
    delegate: App {
        id: app
        ...
    }
}

This code sample demonstrates the various properties of StatusBar.

Page {
    anchors.fill: parent

    Column {
        spacing: 20
        anchors.centerIn: parent

        ComboBox {
            id: colorBox

            displayText: "Color"
            currentIndex: Material.Indigo
            popup.width: 160

            model: ListModel {
                ListElement { name: "Red" }
                ListElement { name: "Blue" }
            }

            delegate: ItemDelegate {
                id: colorDelegate
                text: modelData
                width: colorBox.popup.width
                Rectangle {
                    z: -1
                    anchors.fill: parent
                    parent: colorDelegate.background
                    color: Material.color(index)
                }
            }
        }

        ComboBox {
            id: themeBox

            displayText: "Theme"
            currentIndex: Material.Dark

            model: ListModel {
                ListElement { name: "Light" }
                ListElement { name: "Dark" }
            }

            delegate: ItemDelegate {
                id: themeDelegate
                text: modelData
                width: themeBox.popup.width
            }
        }

        CheckBox {
            text: "visible"
            checked: true
            visible: StatusBar.supportedOperation(StatusBar.StatusBarVisible)
            onCheckedChanged: {
                if (checkState === Qt.Checked)
                {
                    StatusBar.visible = true;
                }
                else
                {
                    StatusBar.visible = false;
                }
            }
        }

        Button {
            text: "apply"

            onClicked: {
                StatusBar.theme = themeBox.currentIndex
                StatusBar.color = Material.color(colorBox.currentIndex, Material.Shade700)
            }
        }
    }

        Component.onCompleted: {
                StatusBar.theme = themeBox.currentIndex
                StatusBar.color = Material.color(colorBox.currentIndex, Material.Shade700)
        }
}

Enumerations

Theme enumeration

StatusBarErrorStatus enumeration

StatusBarOperation enumeration

Property Documentation

Signal Documentation

Method Documentation