Creating a Qt Quick Application Using Qt Quick Components

Fetching Battery Status

To fetch the battery status, open MainPage.qml in the code editor and add some code to it:

1. Add an invisible DeviceInfo element that contains two signals. The onCompleted signal starts battery level notification when the component is initialized. The batteryLevelChanged signal is called when the battery level changes.

    Page {
        id: mainPage
   
        DeviceInfo {
            id: deviceinfo
   
            Component.onCompleted: {
                deviceinfo.startBatteryLevelChanged();
            }
            onBatteryLevelChanged: {
                 progressbar1.value = batteryLevel
             }
        }

2. Set an expression as the value of the text property of the Text element to display the battery level as a percentage:

        Text {
            id: text1
            x: 0
            color: platformStyle.colorNormalLight
            text: qsTr("Battery status: %1%").arg(progressbar1.value)
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 20
        }

3. Set values for the ProgressBar element to display the battery level on the progress bar:

        ProgressBar {
            id: progressbar1
            anchors.horizontalCenter: text1.horizontalCenter
            anchors.top: text1.bottom
            anchors.topMargin: 20
            minimumValue: 0
            maximumValue: 100
            value: deviceinfo.batteryLevel
        }