上篇文章中,我写了一个自己的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(这里实现了按钮的功能)

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

Qt-QML-Repeater-导航条的更多相关文章

  1. QT QML目录导航列表视图

    [功能] /目录.文件 /文件过滤 /递归 /事件 /高亮当前行 /当前选项 /目录切换动画 /限制根目录 [下载]:http://download.csdn.net/detail/surfsky/8 ...

  2. 使用QML自绘页面导航条

    使用QML自绘页面导航条 近期使用QML制作项目,依照要求.须要制作成分页的插件.遗憾的是,QML的控件库Qt Quick都没有现成的控件,于是我尝试着自己实现自绘页面导航条. 原创文章,反对未声明的 ...

  3. ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)

    PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...

  4. Asp.net 导航条【1】

    PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...

  5. Qt qml的软件架构设计

    google: qt qml application architecture 有很多资源. 1 https://www.ics.com/blog/multilayered-architecture- ...

  6. Bootstrap之导航条

    基本导航条 <!-- navbar-inverse相反颜色风格 --> <!-- navbar-static-top去除圆角 --> <!-- navbar-fixed- ...

  7. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  8. JQM (功能栏、导航条)

    在Mobile中导航条的基本结构: <div data-role="navbar"> ul>li>a </div> 其中含有“行(grid)”和 ...

  9. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  10. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

随机推荐

  1. js 飞机大战

    完整文件及代码可以在网盘下载,下载链接为:https://pan.baidu.com/s/1hs7sBUs 密码: d83x 飞机大战css定义: <style> #container{ ...

  2. Pyplot教程(深度学习入门3)

    源地址:http://matplotlib.org/users/pyplot_tutorial.html .caret, .dropup > .btn > .caret { border- ...

  3. HDU 2050(折线分割平面)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=2050 折线分割平面 Time Limit: 2000/1000 MS (Java/Others)    ...

  4. HIDU 2094

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=2094 产生冠军 Time Limit: 1000/1000 MS (Java/Others)    M ...

  5. Gradle Goodness: Adding Tasks to a Predefined Group

    In Gradle we can group related tasks using the group property of a task. We provide the name of our ...

  6. Hibernate连接各种数据库的配置

    转自CSDN shl7765856的专栏:http://blog.csdn.net/shl7765856/article/details/7411987 目录: 1.MySql连接配置 2.Sql S ...

  7. Oracle数据库新装之后出现的监听程序无法正常启动和运行(Oracle-12514)

    修改安装目录下的配置文件      比如:F:\app\admin-PC\product\11.2.0\dbhome_1\network\admin\ 修改这个目录下的listener.ora和tns ...

  8. DB数据源之SpringBoot+MyBatis踏坑过程(四)没有使用连接池的后果

    DB数据源之SpringBoot+MyBatis踏坑过程(四)没有使用连接池的后果 liuyuhang原创,未经允许禁止转载  系列目录连接 DB数据源之SpringBoot+Mybatis踏坑过程实 ...

  9. word 或者 WPS 使用两个目录的时候去掉中间的空格间隙

    在生成图表目录时,发现Office word图表目录中多个标题之间的空行无法删除,我是自己建的标签,比如“图1-”.“图2-”…….“表1-”.“表2-”…… 发现“图1-”.“图2-”…….“表1- ...

  10. 前端模块化小总结—commonJs,AMD,CMD, ES6 的Module

    随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理 ...