分享几种简约大方的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

相关文章

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

【专题】2024飞行汽车技术全景报告合集PDF分享(附原数据表)

原文链接: https://tecdat.cn/?p=37628 6月16日,小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞,这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示,公司准备量产,并计划今年四季度开启预售小鹏汇天分体式飞行汽车,探索分体式飞行汽车城际通勤。阅读原文,获取专题报告合集全文,解锁文末271份飞行汽车相关行业研究报告。 据悉,业内人士对飞行汽车行业

Android平台播放RTSP流的几种方案探究(VLC VS ExoPlayer VS SmartPlayer)

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候,不知道如何选的好,本文针对常用的方案,做个大概的说明: 1. 使用VLC for Android VLC Media Player(VLC多媒体播放器),最初命名为VideoLAN客户端,是VideoLAN品牌产品,是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影

webm怎么转换成mp4?这几种方法超多人在用!

webm怎么转换成mp4?WebM作为一种新兴的视频编码格式,近年来逐渐进入大众视野,其背后承载着诸多优势,但同时也伴随着不容忽视的局限性,首要挑战在于其兼容性边界,尽管WebM已广泛适应于众多网站与软件平台,但在特定应用环境或老旧设备上,其兼容难题依旧凸显,为用户体验带来不便,再者,WebM格式的非普适性也体现在编辑流程上,由于它并非行业内的通用标准,编辑过程中可能会遭遇格式不兼容的障碍,导致操

java常用面试题-基础知识分享

什么是Java? Java是一种高级编程语言,旨在提供跨平台的解决方案。它是一种面向对象的语言,具有简单、结构化、可移植、可靠、安全等特点。 Java的主要特点是什么? Java的主要特点包括: 简单性:Java的语法相对简单,易于学习和使用。面向对象:Java是一种完全面向对象的语言,支持封装、继承和多态。跨平台性:Java的程序可以在不同的操作系统上运行,称为"Write once,

JVM内存调优原则及几种JVM内存调优方法

JVM内存调优原则及几种JVM内存调优方法 1、堆大小设置。 2、回收器选择。   1、在对JVM内存调优的时候不能只看操作系统级别Java进程所占用的内存,这个数值不能准确的反应堆内存的真实占用情况,因为GC过后这个值是不会变化的,因此内存调优的时候要更多地使用JDK提供的内存查看工具,比如JConsole和Java VisualVM。   2、对JVM内存的系统级的调优主要的目的是减少

分享5款免费录屏的工具,搞定网课不怕错过!

虽然现在学生们不怎么上网课, 但是对于上班族或者是没有办法到学校参加课程的人来说,网课还是很重要的,今天,我就来跟大家分享一下我用过的几款录屏软件=,看看它们在录制网课时的表现如何。 福昕录屏大师 网址:https://www.foxitsoftware.cn/REC/ 这款软件给我的第一印象就是界面简洁,操作起来很直观。它支持全屏录制,也支持区域录制,这对于我这种需要同时录制PPT和老师讲

qml states 状态

states 状态 在QML中,states用于定义对象在不同状态下的属性变化。每个状态可以包含一组属性设置,当状态改变时,这些属性设置会被应用到对象上。 import QtQuick 2.15import QtQuick.Controls 2.15// 定义应用程序的主窗口ApplicationWindow {visible: true // 使窗口可见width: 640 /

【干货分享】基于SSM的体育场管理系统的开题报告(附源码下载地址)

中秋送好礼 中秋佳节将至,祝福大家中秋快乐,阖家幸福。本期免费分享毕业设计作品:《基于SSM的体育场管理系统》。 基于SSM的体育场管理系统的开题报告 一、课题背景与意义 随着全民健身理念的深入人心,体育场已成为广大师生和社区居民进行体育锻炼的重要场所。然而,传统的体育场管理方式存在诸多问题,如资源分配不均、预约流程繁琐、数据统计不准确等,严重影响了体育场的使用效率和用户体验。

QML入门之基本元素

元素分为可视元素与非可视元素,可能元素例如Rectangle、Button等。非可视元素如Timer(定时器)、MouseArea(鼠标区域)等。非可视元素一般用于操作可视元素。 基础元素 Item Item(基础元素对象)是所有可视元素的基础对象,它们都继承自Item。可是元素存在以下共有属性。 Group(分组)Properties(属性)Geometry(几何属性)x