papyros / qml-material

:book: Material Design implemented in QtQuick
GNU Lesser General Public License v2.1
2.56k stars 476 forks source link

About system status bar #453

Closed QShen3 closed 3 years ago

QShen3 commented 8 years ago

Few days ago, one of my friends suggested me that my Android app should have Immersive status bar. It was written by Qt Quick with qml-material. I accepted the suggestion and tried to use Google's API to do it. And I got this:

image

An unhappy result...

Because Qt apps doesn't use the Android's layout, whether you have set the layout property fitsSystemWindows to true is useless.

In order to solve this problem, I add a property statusBarHeight to Toolbar to set the action bar height and transfer it to page's action bar.

Toolbar.qml:

property int statusBarHeight: 0

property int actionBarHeight: {
        if (!page || page.actionBar.hidden)
            return 0

        var height = implicitHeight + page.actionBar.extendedHeight + statusBarHeight

        if (page.rightSidebar && page.rightSidebar.showing) {
            var sidebarHeight = implicitHeight + page.rightSidebar.actionBar.extendedHeight + statusBarHeight

            height = Math.max(height, sidebarHeight)
        }

        return height
    }
function push(page) {
        stack.push(page.actionBar)

        page.actionBar.toolbar = toolbar
        page.actionBar.statusBarHeight = statusBarHeight;
        toolbar.page = page

        if (page.rightSidebar && page.rightSidebar.actionBar)
            rightSidebarStack.push(page.rightSidebar.actionBar)
        else
            rightSidebarStack.push(emptyRightSidebar)
    }
......

And in Action bar, I changed the actionRow's anchors.

ActionBar.qml:

Row {
        id: actionsRow

        anchors {
            top: parent.top;
            topMargin: statusBarHeight;
            right: parent.right
            rightMargin: Units.dp(16)
        }
......
}

Then, the property statusBarHeight in Toolbar was transferred from ApplicationWindow. So I just need to set this property to the system status bar height in ApplicationWindow

ApplicationWindow{
......
    statusBarHeight: utility.getStatusBarHeight();
......
}

Finally, It looked like this:

qq 20160618115825

Beside Andorid, IOS and Win10 mobile also have Immersive status bar, so I hope it can be added into qml-material.

SunRain commented 8 years ago

I think you should make pr instead of opening issue lol