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.0Rectangle{    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.0import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4Button{    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（这里实现了按钮的功能）

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