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(这里实现了按钮的功能)
这就是目前的代码的层级结构。欢迎大神指正。哈哈哈
Qt-QML-Repeater-导航条的更多相关文章
- QT QML目录导航列表视图
[功能] /目录.文件 /文件过滤 /递归 /事件 /高亮当前行 /当前选项 /目录切换动画 /限制根目录 [下载]:http://download.csdn.net/detail/surfsky/8 ...
- 使用QML自绘页面导航条
使用QML自绘页面导航条 近期使用QML制作项目,依照要求.须要制作成分页的插件.遗憾的是,QML的控件库Qt Quick都没有现成的控件,于是我尝试着自己实现自绘页面导航条. 原创文章,反对未声明的 ...
- ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)
PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...
- Asp.net 导航条【1】
PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...
- Qt qml的软件架构设计
google: qt qml application architecture 有很多资源. 1 https://www.ics.com/blog/multilayered-architecture- ...
- Bootstrap之导航条
基本导航条 <!-- navbar-inverse相反颜色风格 --> <!-- navbar-static-top去除圆角 --> <!-- navbar-fixed- ...
- 使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
- JQM (功能栏、导航条)
在Mobile中导航条的基本结构: <div data-role="navbar"> ul>li>a </div> 其中含有“行(grid)”和 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- Bootstrap组件之响应式导航条
响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...
随机推荐
- js 飞机大战
完整文件及代码可以在网盘下载,下载链接为:https://pan.baidu.com/s/1hs7sBUs 密码: d83x 飞机大战css定义: <style> #container{ ...
- Pyplot教程(深度学习入门3)
源地址:http://matplotlib.org/users/pyplot_tutorial.html .caret, .dropup > .btn > .caret { border- ...
- HDU 2050(折线分割平面)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=2050 折线分割平面 Time Limit: 2000/1000 MS (Java/Others) ...
- HIDU 2094
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=2094 产生冠军 Time Limit: 1000/1000 MS (Java/Others) M ...
- 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 ...
- Hibernate连接各种数据库的配置
转自CSDN shl7765856的专栏:http://blog.csdn.net/shl7765856/article/details/7411987 目录: 1.MySql连接配置 2.Sql S ...
- Oracle数据库新装之后出现的监听程序无法正常启动和运行(Oracle-12514)
修改安装目录下的配置文件 比如:F:\app\admin-PC\product\11.2.0\dbhome_1\network\admin\ 修改这个目录下的listener.ora和tns ...
- DB数据源之SpringBoot+MyBatis踏坑过程(四)没有使用连接池的后果
DB数据源之SpringBoot+MyBatis踏坑过程(四)没有使用连接池的后果 liuyuhang原创,未经允许禁止转载 系列目录连接 DB数据源之SpringBoot+Mybatis踏坑过程实 ...
- word 或者 WPS 使用两个目录的时候去掉中间的空格间隙
在生成图表目录时,发现Office word图表目录中多个标题之间的空行无法删除,我是自己建的标签,比如“图1-”.“图2-”…….“表1-”.“表2-”…… 发现“图1-”.“图2-”…….“表1- ...
- 前端模块化小总结—commonJs,AMD,CMD, ES6 的Module
随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理 ...