分享几种简约大方的ListView外观设计(qml)

2024-03-07 18:36

本文主要是介绍分享几种简约大方的ListView外观设计(qml),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、前言

最近才学到这里,感觉基础的 ListView 很丑,就现学现用弄个几个自认为还行的设计给大家献丑了。如果你觉得还不错,代码就在下面拿去直接用,顺便给我点个赞哈 ~ 感谢感谢 ~

二、正文

设计1

第一种就是正常的左侧边栏,特别之处就是高亮项用了4个小三角。这小三角并不是图片,而是高亮的圆角和矩形项重叠得到的,有点老古董游戏里的菜单项选择时的感觉。

代码是单独新建的一个qml文件里写的,如果写到主文件里会很长,建议分文件去写界面。

具体代码:

import QtQuick
import QtQuick.ControlsRectangle{width: 100; height: parent.heightcolor: 'grey'ListView{id: listwidth: 90; height: parent.heightx: 10; y:10spacing: 10clip: truemodel: ['首页', '销售数据', '库存数据', '发货计划', '广告', '设置', '用户权限']delegate: Rectangle{width: 80; height: 30color: 'grey'radius: 10Text{id: itemTextanchors.centerIn: parentcolor: 'white'text: modelData}MouseArea{anchors.fill: parentonClicked: {list.currentIndex = index}}}highlight: Rectangle{color: "transparent"border.width: 2border.color: 'white'}highlightMoveDuration: 0}
}

设计2

第二种也是高亮和项的背景堆叠出来的小三角,这里换成了黄色。和上面不同地方是这个是一个横向的菜单栏。

做这个横向的菜单栏的原因是,我准备做一个小程序,但是功能不太多,我想着设计成横向的会更美观一些。

qml里的 ListView 是自带一些项之间切换的动画的,gif图片我还不会弄,所以,大家有兴趣的话复制下面的代码自己去试试就知道了,总之,还是挺不错的。

具体代码:

 

import QtQuick
import QtQuick.ControlsRectangle{width: parent.width; height: 38color: 'black'ListView{id: listx: 10anchors.verticalCenter: parent.verticalCenterwidth: parent.width; height: 30model: ['主页', '工具箱', '店铺', '业绩报表', '广告', '库存', '财务报表', '产品表现', '设置']clip: truedelegate: Rectangle{width: 60; height: 30color: 'black'radius: 10Text{text: modelDatacolor: "white"anchors.centerIn: parent}MouseArea{anchors.fill: parentonClicked: {list.currentIndex = index //可以实现高亮切换}}}spacing: 10highlight: Rectangle{color: "transparent"border.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: 'lightgrey'ListView{id: listx: 10anchors.verticalCenter: parent.verticalCenterwidth: parent.width; height: 30model: ['常用单位换算', '英文大小写转换', '文本处理工具']clip: truedelegate: Rectangle{id: recccwidth: 100; height: 30color: 'transparent'Text{id: modelDataTexttext: modelDatacolor: reccc.ListView.isCurrentItem ? "black" : "grey"anchors.centerIn: parent}MouseArea{anchors.fill: parentonClicked: {list.currentIndex = index //可以实现高亮切换}}}spacing: 10highlight: Rectangle{color: "white"width: 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: '#002f36'ListView{id: listx: 10; y: rec.y +14width: parent.width; height: 30model: ['常用单位换算', '英文大小写转换', '文本批量处理', '文件管理器']clip: truedelegate: Rectangle{id: recccwidth: 100; height: 30color: 'transparent'Text{id: modelDataTexttext: modelDatacolor: reccc.ListView.isCurrentItem ? "#002f36" : "#ffffff"anchors.centerIn: parent}MouseArea{anchors.fill: parentonClicked: {list.currentIndex = index //可以实现高亮切换}}}spacing: 10highlight: Rectangle{color: "white"radius: 5}highlightMoveDuration: 200orientation: ListView.Horizontal //让 ListView 横向显示}
}

三、写在最后

都看到这里了,就顺手点个赞吧 ~

我后面会持续稳定分享qml方面的知识和小技巧,如果你也和我一样对qml有兴趣,不妨再关注一下我,嘿嘿 ~

这篇关于分享几种简约大方的ListView外观设计(qml)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/784447

相关文章

Python中你不知道的gzip高级用法分享

《Python中你不知道的gzip高级用法分享》在当今大数据时代,数据存储和传输成本已成为每个开发者必须考虑的问题,Python内置的gzip模块提供了一种简单高效的解决方案,下面小编就来和大家详细讲... 目录前言:为什么数据压缩如此重要1. gzip 模块基础介绍2. 基本压缩与解压缩操作2.1 压缩文

在Golang中实现定时任务的几种高效方法

《在Golang中实现定时任务的几种高效方法》本文将详细介绍在Golang中实现定时任务的几种高效方法,包括time包中的Ticker和Timer、第三方库cron的使用,以及基于channel和go... 目录背景介绍目的和范围预期读者文档结构概述术语表核心概念与联系故事引入核心概念解释核心概念之间的关系

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具:gofmt 与 go fmt(一)

Python虚拟环境与Conda使用指南分享

《Python虚拟环境与Conda使用指南分享》:本文主要介绍Python虚拟环境与Conda使用指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、python 虚拟环境概述1.1 什么是虚拟环境1.2 为什么需要虚拟环境二、Python 内置的虚拟环境工具

python判断文件是否存在常用的几种方式

《python判断文件是否存在常用的几种方式》在Python中我们在读写文件之前,首先要做的事情就是判断文件是否存在,否则很容易发生错误的情况,:本文主要介绍python判断文件是否存在常用的几种... 目录1. 使用 os.path.exists()2. 使用 os.path.isfile()3. 使用

C/C++的OpenCV 进行图像梯度提取的几种实现

《C/C++的OpenCV进行图像梯度提取的几种实现》本文主要介绍了C/C++的OpenCV进行图像梯度提取的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录预www.chinasem.cn备知识1. 图像加载与预处理2. Sobel 算子计算 X 和 Y

Python处理大量Excel文件的十个技巧分享

《Python处理大量Excel文件的十个技巧分享》每天被大量Excel文件折磨的你看过来!这是一份Python程序员整理的实用技巧,不说废话,直接上干货,文章通过代码示例讲解的非常详细,需要的朋友可... 目录一、批量读取多个Excel文件二、选择性读取工作表和列三、自动调整格式和样式四、智能数据清洗五、

Go语言中使用JWT进行身份验证的几种方式

《Go语言中使用JWT进行身份验证的几种方式》本文主要介绍了Go语言中使用JWT进行身份验证的几种方式,包括dgrijalva/jwt-go、golang-jwt/jwt、lestrrat-go/jw... 目录简介1. github.com/dgrijalva/jwt-go安装:使用示例:解释:2. gi

JDK9到JDK21中值得掌握的29个实用特性分享

《JDK9到JDK21中值得掌握的29个实用特性分享》Java的演进节奏从JDK9开始显著加快,每半年一个新版本的发布节奏为Java带来了大量的新特性,本文整理了29个JDK9到JDK21中值得掌握的... 目录JDK 9 模块化与API增强1. 集合工厂方法:一行代码创建不可变集合2. 私有接口方法:接口

电脑系统Hosts文件原理和应用分享

《电脑系统Hosts文件原理和应用分享》Hosts是一个没有扩展名的系统文件,当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hosts文件中寻找对应的IP地址,一旦找到,系统会立即打开对应... Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应