• 13272阅读
  • 5回复

QML自绘页面导航条 [复制链接]

上一主题 下一主题
离线彩阳
 

只看楼主 倒序阅读 楼主  发表于: 2014-09-18
项目需要,我使用QML制作了一个页面导航条。演示程序截图如下:

代码PageNavigationBar.qml如下所示:

import QtQuick 2.2
import QtQuick.Controls 1.2

Item
{
    id: root
    property int startPage: 1
    property int maxPage: 18
    property int selectedPage: 1
    property int totalRecord: 90
    signal pageClicked( int page )

    height: row.height

    Row
    {
        id: row
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 5

        Label
        {
            anchors.verticalCenter: parent.verticalCenter
            text: totalRecord.toString( ) +
                  qsTr( " records, total " ) +
                  maxPage.toString( ) +
                  qsTr( " pages" )
        }

        Rectangle
        {
            id: delegateRect_1
            height: innerText_1.height * 1.5
            width: innerText_1.width + height
            border.color: "lightsteelblue"
            border.width: 1
            radius: innerText_1.height / 4
            visible: maxPage > 5 && startPage > 1

            Text
            {
                id: innerText_1
                anchors.centerIn: parent
                text: qsTr( "home" )
            }

            MouseArea
            {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true
                onEntered:
                {
                    delegateRect_1.color = "steelblue";
                    innerText_1.color = "white"
                }
                onExited:
                {
                    delegateRect_1.color = "white";
                    innerText_1.color = "black"
                }
                onClicked: startPage = 1
            }
        }

        Rectangle
        {
            id: delegateRect_2
            height: innerText_2.height * 1.5
            width: innerText_2.width + height
            border.color: "lightsteelblue"
            border.width: 1
            radius: innerText_2.height / 4
            visible: maxPage > 5 && startPage > 1

            Text
            {
                id: innerText_2
                anchors.centerIn: parent
                text: qsTr( "..." )
            }

            MouseArea
            {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true
                onEntered:
                {
                    delegateRect_2.color = "steelblue";
                    innerText_2.color = "white"
                }
                onExited:
                {
                    delegateRect_2.color = "white";
                    innerText_2.color = "black"
                }
                onClicked:
                {
                    startPage -= repeater.model;
                    if ( startPage < 1 ) startPage = 1;
                }
            }
        }

        Repeater
        {
            id: repeater
            model: maxPage > 5? 5: maxPage
            Rectangle
            {
                id: delegateRect
                height: innerText.height * 1.5
                width: innerText.width + height
                border.color: ( selectedPage === startPage + index?
                                 "orange": "lightsteelblue" )
                border.width: 1
                radius: innerText.height / 4

                Text
                {
                    id: innerText
                    anchors.centerIn: parent
                    text: ( startPage + index ).toString( )
                }

                MouseArea
                {
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    hoverEnabled: true
                    onEntered:
                    {
                        delegateRect.color = "steelblue";
                        innerText.color = "white"
                    }
                    onExited:
                    {
                        delegateRect.color = "white";
                        innerText.color = "black"
                    }
                    onClicked:
                    {
                        selectedPage = startPage + index;
                        pageClicked( selectedPage );
                    }
                }
            }
        }

        Rectangle
        {
            id: delegateRect_3
            height: innerText_3.height * 1.5
            width: innerText_3.width + height
            border.color: "lightsteelblue"
            border.width: 1
            radius: innerText_3.height / 4
            visible: maxPage > 5 && startPage < maxPage - repeater.model + 1

            Text
            {
                id: innerText_3
                anchors.centerIn: parent
                text: qsTr( "..." )
            }

            MouseArea
            {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true
                onEntered:
                {
                    delegateRect_3.color = "steelblue";
                    innerText_3.color = "white"
                }
                onExited:
                {
                    delegateRect_3.color = "white";
                    innerText_3.color = "black"
                }
                onClicked:
                {
                    startPage += repeater.model;
                    if ( startPage > maxPage - repeater.model + 1 )
                        startPage = maxPage - repeater.model + 1;
                }
            }
        }

        Rectangle
        {
            id: delegateRect_4
            height: innerText_4.height * 1.5
            width: innerText_4.width + height
            border.color: "lightsteelblue"
            border.width: 1
            radius: innerText_4.height / 4
            visible: maxPage > 5 && startPage < maxPage - repeater.model + 1

            Text
            {
                id: innerText_4
                anchors.centerIn: parent
                text: qsTr( "end" )
            }

            MouseArea
            {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true
                onEntered:
                {
                    delegateRect_4.color = "steelblue";
                    innerText_4.color = "white"
                }
                onExited:
                {
                    delegateRect_4.color = "white";
                    innerText_4.color = "black"
                }
                onClicked: startPage = maxPage - repeater.model + 1
            }
        }
    }
}
测试项目代码下载地址: PageNavigationBar.7z (3 K) 下载次数:163
14条评分好评度+4贡献值+3金钱+13威望+3
vairsly 好评度 +1 - 2017-05-05
ele1000 金钱 +1 长见识了 2016-11-05
fcode 好评度 +1 - 2015-02-14
fcode 贡献值 +1 - 2015-02-14
fcode 威望 +1 - 2015-02-14
fcode 金钱 +1 - 2015-02-14
robertkun 好评度 +1 - 2015-01-02
robertkun 贡献值 +1 - 2015-01-02
robertkun 威望 +1 - 2015-01-02
robertkun 金钱 +1 - 2015-01-02
12
上海Qt开发联盟,热忱地欢迎你的加入!
离线woniu600

只看该作者 1楼 发表于: 2014-09-18


问下,qml里  textfield的  holderplaceText 是不是不能居中的?? 只看在style里看到 颜色属性
离线彩阳

只看该作者 2楼 发表于: 2014-09-19
好像是这样的,我再看看是否是这样的。
上海Qt开发联盟,热忱地欢迎你的加入!
离线fghfghfgh

只看该作者 3楼 发表于: 2014-09-19
优秀文章,支持!n神马都是浮云
离线天都黑了

只看该作者 4楼 发表于: 2014-09-29
property int selectedPage: 1
    property int
离线ele1000

只看该作者 5楼 发表于: 2016-11-05
长见识了
快速回复
限100 字节
 
上一个 下一个