Qt-QML-Repeater-导航条

上篇文章中，我写了一个自己的Button，也就是美化了一下QML自带的Button

就是上面的这个，剩下的就是放三张图片在上面就可以了，当然了，这个Button在后期，还是会加入更让多的美化，比如，可以加入一些状态切换机制等等。哈哈，先吹牛逼，剩下的后面再说。

现在给大家看一下啊我写的一个导航条

那么，在widget和平时我们写的时候，可能我会会复制很多相似的代码，开始我也是这么写的，哈哈，现在感觉，好LOW，暴露水平了，哈哈

在后面我发现了QML的一个新的东西，重复器Repeater，下面来看看我写的代码吧

    DLNavigation
    {
        navigation:navigation
        ListModel
        {
            id:navigation
            ListElement{btnname:"xxx";btnnomer:"qrc:/Images/001.png";btnhover:"qrc:/Images/002.png";btnpress:"qrc:/Images/003.png"}
            ListElement{btnname:"ccc";btnnomer:"qrc:/Images/001.png";btnhover:"qrc:/Images/002.png";btnpress:"qrc:/Images/003.png"}
            ListElement{btnname:"vvv";btnnomer:"qrc:/Images/001.png";btnhover:"qrc:/Images/002.png";btnpress:"qrc:/Images/003.png"}
            ListElement{btnname:"ddd";btnnomer:"qrc:/Images/001.png";btnhover:"qrc:/Images/002.png";btnpress:"qrc:/Images/003.png"}
            ListElement{btnname:"bbb";btnnomer:"qrc:/Images/001.png";btnhover:"qrc:/Images/002.png";btnpress:"qrc:/Images/003.png"}
            ListElement{btnname:"nnn";btnnomer:"qrc:/Images/001.png";btnhover:"qrc:/Images/002.png";btnpress:"qrc:/Images/003.png"}
            ListElement{btnname:"mmm";btnnomer:"qrc:/Images/001.png";btnhover:"qrc:/Images/002.png";btnpress:"qrc:/Images/003.png"}
        }
    }

这就是我这7个按钮的的全部代码了，

这里我写了一个LIstModel模型来存放我们现在的数据，第一个字段就是我们的按钮的id，后面的三个字段分别是默认模式，鼠标划过模式，鼠标按下模式的样式。

这里大家看到了有一个新的模块 DLNavigation，这个模块就是我的导航条模块，目前只是一个演示的版本，后期还需要加入很多的功能，比如可以更具宽度和高度，来自动判断是列导航，还是行导航，动画等，后期见。

下面在看一下我的DLNavigation的实现代码

import QtQuick 2.0
Rectangle
{
    id:root_Navigation
    color: "transparent"
    property ListModel navigation: naviton.model
    Column
    {
        width: button.width
        spacing: 5
        Repeater
        {
            id:naviton
            model: navigation
            DLButton
            {
                id:btnname
                width: 100
                height: 100
                nomerPic: btnnomer
                hoverPic: btnhover
                pressPic: btnpress

            }
        }
    }
}

这里就是我暂时导航条的实现代码，还是可以哈。

这里就得益于我写了一个自己的Button的，这里还是要写一下我上一篇中的DLButton的模块了

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Button
{
    id: root_Button
    property string nomerPic: "qrc:/Images/001.png"
    property string hoverPic: "qrc:/Images/002.png"
    property string pressPic: "qrc:/Images/003.png"
    style: ButtonStyle
    {
        background:Rectangle
        {
            implicitHeight:root_Button.height
            implicitWidth:root_Button.width
            Image
            {
                anchors.fill: parent
                source:
                {
                    if(control.hovered)
                    {
                        if(control.pressed)
                        {
                            pressPic
                        }
                        else
                        {
                            hoverPic
                        }
                    }
                    else
                    {
                        nomerPic
                    }
                }
            }
        }
    }
}

这里就是了，下面我来画一下我这个代码的包含

main.qml（这是主要显示主界面，这里调用的下面的导航条模块）
	DLNavigation（这既是导航条的实现代码，调用了DNButton按钮模块）
		DLButton（这里实现了按钮的功能）

这就是目前的代码的层级结构。欢迎大神指正。哈哈哈

文章来源: dreamlife.blog.csdn.net，作者：DreamLife.，版权归原作者所有，如需转载，请联系作者。

原文链接：dreamlife.blog.csdn.net/article/details/70500318