培训机构网站,凡科建站怎么导出网页,云南模板网站建设公司,html5特效网站源码一、前言
最近才学到这里#xff0c;感觉基础的 ListView 很丑#xff0c;就现学现用弄个几个自认为还行的设计给大家献丑了。如果你觉得还不错#xff0c;代码就在下面拿去直接用#xff0c;顺便给我点个赞哈 ~ 感谢感谢 ~ 二、正文
设计1
第一种就是正常的左侧边栏感觉基础的 ListView 很丑就现学现用弄个几个自认为还行的设计给大家献丑了。如果你觉得还不错代码就在下面拿去直接用顺便给我点个赞哈 ~ 感谢感谢 ~ 二、正文
设计1
第一种就是正常的左侧边栏特别之处就是高亮项用了4个小三角。这小三角并不是图片而是高亮的圆角和矩形项重叠得到的有点老古董游戏里的菜单项选择时的感觉。
代码是单独新建的一个qml文件里写的如果写到主文件里会很长建议分文件去写界面。 具体代码
import QtQuick
import QtQuick.ControlsRectangle{width: 100; height: parent.heightcolor: greyListView{id: listwidth: 90; height: parent.heightx: 10; y:10spacing: 10clip: truemodel: [首页, 销售数据, 库存数据, 发货计划, 广告, 设置, 用户权限]delegate: Rectangle{width: 80; height: 30color: greyradius: 10Text{id: itemTextanchors.centerIn: parentcolor: whitetext: modelData}MouseArea{anchors.fill: parentonClicked: {list.currentIndex index}}}highlight: Rectangle{color: transparentborder.width: 2border.color: white}highlightMoveDuration: 0}
}
设计2
第二种也是高亮和项的背景堆叠出来的小三角这里换成了黄色。和上面不同地方是这个是一个横向的菜单栏。
做这个横向的菜单栏的原因是我准备做一个小程序但是功能不太多我想着设计成横向的会更美观一些。
qml里的 ListView 是自带一些项之间切换的动画的gif图片我还不会弄所以大家有兴趣的话复制下面的代码自己去试试就知道了总之还是挺不错的。
具体代码 import QtQuick
import QtQuick.ControlsRectangle{width: parent.width; height: 38color: blackListView{id: listx: 10anchors.verticalCenter: parent.verticalCenterwidth: parent.width; height: 30model: [主页, 工具箱, 店铺, 业绩报表, 广告, 库存, 财务报表, 产品表现, 设置]clip: truedelegate: Rectangle{width: 60; height: 30color: blackradius: 10Text{text: modelDatacolor: whiteanchors.centerIn: parent}MouseArea{anchors.fill: parentonClicked: {list.currentIndex index //可以实现高亮切换}}}spacing: 10highlight: Rectangle{color: transparentborder.width: 3border.color: yellow}highlightMoveDuration: 0orientation: ListView.Horizontal //让 ListView 横向显示}
}
设计3
这个也比较简单高亮用白色字被点击后从灰色切换成黑色和白色形成鲜明对比看起来还是挺醒目的也比较简约美观但是总感觉不太满意所以就有了下面的第4种设计。
设计3主要是增加了当前项的字体颜色切换其它和上面的并无太大差异。重点代码是下面这句ListView.isCurrentItem 三目运算符。
color: reccc.ListView.isCurrentItem ? black : grey
具体代码
import QtQuick
import QtQuick.ControlsRectangle{id: recwidth: parent.width; height: 38color: lightgreyListView{id: listx: 10anchors.verticalCenter: parent.verticalCenterwidth: parent.width; height: 30model: [常用单位换算, 英文大小写转换, 文本处理工具]clip: truedelegate: Rectangle{id: recccwidth: 100; height: 30color: transparentText{id: modelDataTexttext: modelDatacolor: reccc.ListView.isCurrentItem ? black : greyanchors.centerIn: parent}MouseArea{anchors.fill: parentonClicked: {list.currentIndex index //可以实现高亮切换}}}spacing: 10highlight: Rectangle{color: whitewidth: 100; height: 30radius: 15}highlightMoveDuration: 200orientation: ListView.Horizontal //让 ListView 横向显示}
}
设计4
第4种就是下面这样的啦已经是我目前最高水平发挥了哇咔咔 ~
我把 ListView 没有锚定在 Rectangle 上而是 y坐标往下偏移了14再把高亮背景色设置成白色这样看起来就好像是一个 Tab标签页和下面的内容形成一个整体我个人感觉还不赖。
在我这个程序投入使用之前如果还没想到更好的设计的话就暂时先用这个吧 具体代码
import QtQuick
import QtQuick.ControlsRectangle{id: recwidth: parent.width; height: 38color: #002f36ListView{id: listx: 10; y: rec.y 14width: parent.width; height: 30model: [常用单位换算, 英文大小写转换, 文本批量处理, 文件管理器]clip: truedelegate: Rectangle{id: recccwidth: 100; height: 30color: transparentText{id: modelDataTexttext: modelDatacolor: reccc.ListView.isCurrentItem ? #002f36 : #ffffffanchors.centerIn: parent}MouseArea{anchors.fill: parentonClicked: {list.currentIndex index //可以实现高亮切换}}}spacing: 10highlight: Rectangle{color: whiteradius: 5}highlightMoveDuration: 200orientation: ListView.Horizontal //让 ListView 横向显示}
}
三、写在最后
都看到这里了就顺手点个赞吧 ~
我后面会持续稳定分享qml方面的知识和小技巧如果你也和我一样对qml有兴趣不妨再关注一下我嘿嘿 ~
