qt qml实现电话簿 通讯录

 qml实现电话簿，基于github上开源代码修改而来，增加了搜索和展开，效果如下

代码如下

#include <QGuiApplication>
#include <QQmlApplicationEngine>int main(int argc, char *argv[])
{QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);QGuiApplication app(argc, argv);QQmlApplicationEngine engine;engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if (engine.rootObjects().isEmpty())return -1;return app.exec();
}

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1
import "./Pinyin.js" as PinyinUtilItem {width: 320height: 480property int expandedIndex: -1property string searchKeyword: ""// ✅ 固定联系人数据：姓名 + 电话统一管理property var contacts: [{"name": "皮皮",       "phone1": "029-8888-1111", "phone2": "138-1234-5678", "phone3": "029-6666-2222"},{"name": "日历",       "phone1": "029-8888-2222", "phone2": "139-8765-4321", "phone3": "029-6666-3333"},{"name": "父亲",       "phone1": "029-8888-3333", "phone2": "136-1122-3344", "phone3": "029-6666-4444"},{"name": "额额额",     "phone1": "029-8888-4444", "phone2": "135-5555-6666", "phone3": "029-6666-5555"},{"name": "高大上",     "phone1": "029-8888-5555", "phone2": "134-7777-8888", "phone3": "029-6666-6666"},{"name": "黑凤梨",     "phone1": "029-8888-6666", "phone2": "137-9999-0000", "phone3": "029-6666-7777"},{"name": "阿文",       "phone1": "029-8888-7777", "phone2": "133-1111-2222", "phone3": "029-6666-8888"},{"name": "阿南",       "phone1": "029-8888-8888", "phone2": "132-3333-4444", "phone3": "029-6666-9999"},{"name": "#特殊",      "phone1": "029-8888-9999", "phone2": "131-5555-6666", "phone3": "029-6666-0000"},{"name": "*特殊",      "phone1": "029-8888-0000", "phone2": "130-7777-8888", "phone3": "029-6666-1111"},{"name": "aaa",        "phone1": "029-8888-1111", "phone2": "138-1234-5678", "phone3": "029-6666-2222"},{"name": "AAA",        "phone1": "029-8888-2222", "phone2": "139-8765-4321", "phone3": "029-6666-3333"},{"name": "a啊a",       "phone1": "029-8888-3333", "phone2": "136-1122-3344", "phone3": "029-6666-4444"},{"name": "啊aa",       "phone1": "029-8888-4444", "phone2": "135-5555-6666", "phone3": "029-6666-5555"},{"name": "阿亮",       "phone1": "029-8888-5555", "phone2": "134-7777-8888", "phone3": "029-6666-6666"},{"name": "1阿1",       "phone1": "029-8888-6666", "phone2": "137-9999-0000", "phone3": "029-6666-7777"},{"name": "爸爸",       "phone1": "029-8888-7777", "phone2": "133-1111-2222", "phone3": "029-6666-8888"},{"name": "第八个",     "phone1": "029-8888-8888", "phone2": "132-3333-4444", "phone3": "029-6666-9999"},{"name": "奶奶",       "phone1": "029-8888-9999", "phone2": "131-5555-6666", "phone3": "029-6666-0000"},{"name": "叔叔",       "phone1": "029-8888-0000", "phone2": "130-7777-8888", "phone3": "029-6666-1111"},{"name": "智障啊",     "phone1": "029-8888-1111", "phone2": "138-1234-5678", "phone3": "029-6666-2222"},{"name": "满意",       "phone1": "029-8888-2222", "phone2": "139-8765-4321", "phone3": "029-6666-3333"},{"name": "岁月",       "phone1": "029-8888-3333", "phone2": "136-1122-3344", "phone3": "029-6666-4444"},{"name": "可能",       "phone1": "029-8888-4444", "phone2": "135-5555-6666", "phone3": "029-6666-5555"},{"name": "黄河",       "phone1": "029-8888-5555", "phone2": "134-7777-8888", "phone3": "029-6666-6666"}]Item {width: parent.widthheight: parent.heightanchors.centerIn: parentRectangle {anchors.fill: parentcolor: "#f0f0f0"}// 搜索框Item {width: parent.widthheight: 50anchors.top: parent.topRectangle {width: parent.width - 40height: 30anchors.centerIn: parentradius: 15color: "#ffffff"border.color: "#cccccc"border.width: 1Item {width: parent.widthheight: parent.heightImage {source: "qrc:/search.png"width: 15height: 15anchors.left: parent.leftanchors.leftMargin: 8anchors.verticalCenter: parent.verticalCenter}TextField {width: parent.width - 40height: parent.heightanchors.left: parent.leftanchors.leftMargin: 23anchors.right: parent.rightanchors.rightMargin: 8placeholderText: "搜索联系人..."font.pixelSize: 14color: "#333333"background: Item {}onTextChanged: {searchKeyword = textfilterContacts()}}}}}// 分组标题Component {id: sectionHeaderItem {width: 80height: 30Text {text: section.toUpperCase()font.pixelSize: 16anchors.left: parent.leftanchors.leftMargin: 8color: "#666666"anchors.bottom: parent.bottom}}}// 联系人列表ListView {id: listViewwidth: parent.widthheight: parent.height - 50anchors.bottom: parent.bottomclip: truemodel: searchKeyword.length > 0 ? filteredModel : testModeldelegate: Item {width: parent.widthheight: isExpanded ? 100 : 35readonly property int itemIndex: indexreadonly property bool isExpanded: listView.parent.parent.expandedIndex === itemIndexreadonly property string phone1: model.phone1readonly property string phone2: model.phone2readonly property string phone3: model.phone3// 展开时背景为白色Rectangle {anchors.fill: parentcolor: isExpanded ? "#ffffff" : "transparent"}// 联系人基本信息区域Item {width: parent.widthheight: 35Rectangle {width: parent.widthheight: 35color: "transparent"MouseArea {anchors.fill: parentacceptedButtons: Qt.LeftButtononClicked: {if (isExpanded) {listView.parent.parent.expandedIndex = -1} else {listView.parent.parent.expandedIndex = itemIndex}}}Text {text: listView.getShowTextSpecial(model.name)anchors.verticalCenter: parent.verticalCentercolor: "#333333"font.pixelSize: 16x: 24}}}// 电话信息区域（可展开）Item {y: 35width: parent.widthheight: isExpanded ? 65 : 0opacity: isExpanded ? 1 : 0Behavior on opacity { NumberAnimation { duration: 200 } }Behavior on height { NumberAnimation { duration: 200 } }// 三个电话号码（带标签）Text {text: "单位电话：" + phone1y: 0x: 48color: "#333333"font.pixelSize: 14}Text {text: "家庭座机：" + phone3y: 20x: 48color: "#333333"font.pixelSize: 14}Text {text: "手机：" + phone2y: 40x: 48color: "#333333"font.pixelSize: 14}}}ScrollIndicator.vertical: ScrollIndicator {anchors.right: parent.rightanchors.rightMargin: 8contentItem: Rectangle {implicitWidth: 3radius: implicitWidth / 2color: "#cccccc"}}function getShowTextSpecial(str) {var first = str[0]if (first === "#") return str.substr(1)return str}section.property: "pinyin"section.criteria: ViewSection.FirstCharactersection.delegate: sectionHeader}// 右侧字母栏Item {width: 30height: parent.height - 50anchors.top: parent.topanchors.topMargin: 50anchors.right: parent.rightanchors.rightMargin: 5MouseArea {anchors.fill: parentfunction changeBigText() {bigTip.visible = truevar index = parseInt(mouseY / 10)if (index < 0) index = 0if (index > 26) index = 26bigText.text = qsTr(letters[index] + "")var search_index = getIndexByLab(bigText.text)if (search_index >= 0)listView.positionViewAtIndex(search_index, ListView.Beginning)}function getIndexByLab(lab) {for (var i = 0; i < testModel.count; i++) {if (testModel.get(i).pinyin.substr(0, 1).toUpperCase() === lab) {return i}}return -1}onPositionChanged: changeBigText()onPressed: changeBigText()onReleased: bigTip.visible = false}Column {spacing: 0Repeater {model: lettersdelegate: Text {width: 30height: 14text: modelDatafont.pixelSize: 12color: "#666666"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}}}// 大字母提示Rectangle {width: 30height: widthradius: width / 2color: "#ffffff"anchors.centerIn: parentvisible: falseid: bigTipText {id: bigTexttext: qsTr("A")font.pixelSize: 16color: "#333333"anchors.centerIn: parent}}}property var letters: ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","#"]function generateData(contact) {var name = contact.namevar pinyin = PinyinUtil.pinyin.getFullChars(name)return {name: name,pinyin: pinyin,phone1: contact.phone1,phone2: contact.phone2,phone3: contact.phone3}}function chack_special(str) {var pattern1 = new RegExp("[`～!@#$^&*()=|{}':;',\\[\\].<>《》/?～！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]")var pattern2 = /^[0-9]*$/return pattern1.test(str) || pattern2.test(str)}function moveFirstToEnd(array) {var first = array[0]array.push(first)array.shift()}ListModel {id: filteredModel}function filterContacts() {filteredModel.clear()if (searchKeyword.length === 0) returnfor(var i = 0; i < testModel.count; i++) {var item = testModel.get(i)if (item.name.toLowerCase().indexOf(searchKeyword.toLowerCase()) !== -1 ||item.pinyin.toLowerCase().indexOf(searchKeyword.toLowerCase()) !== -1) {filteredModel.append(generateData(item))}}}ListModel {id: testModelComponent.onCompleted: {var resultArray = []for (var i = 0; i < contacts.length; i++) {var contact = contacts[i]var pinyin = PinyinUtil.pinyin.getFullChars(contact.name)resultArray.push({name: contact.name,pinyin: pinyin,phone1: contact.phone1,phone2: contact.phone2,phone3: contact.phone3})}resultArray.sort(function(a, b) {return a.pinyin.localeCompare(b.pinyin)})var specialNumber = 0for (var i = 0; i < resultArray.length; i++) {if (chack_special(resultArray[i].name.substr(0, 1))) {resultArray[i].name = "#" + resultArray[i].namespecialNumber++}}for (i = 0; i < specialNumber; i++) moveFirstToEnd(resultArray)for (i = 0; i < resultArray.length; i++) {testModel.append(resultArray[i])}}}
}

源码地址，欢迎star

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/92346.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/92346.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

顺序表——C语言

顺序表——C语言

顺序表实现代码解析与学习笔记一、顺序表基础概念顺序表是线性表的一种顺序存储结构&#xff0c;它使用一段连续的内存空间&#xff08;数组&#xff09;存储数据元素&#xff0c;通过下标直接访问元素&#xff0c;具有随机访问的特性。其核心特点是&#xff1a;元素在内存中连…
阅读更多...
【Oracle篇】Oracle Data Pump远程备份技术：直接从远端数据库备份至本地环境

【Oracle篇】Oracle Data Pump远程备份技术：直接从远端数据库备份至本地环境

&#x1f4ab;《博主主页》&#xff1a; 　　　&#x1f50e; CSDN主页__奈斯DB 　　　&#x1f50e; IF Club社区主页__奈斯、 &#x1f525;《擅长领域》&#xff1a;擅长阿里云AnalyticDB for MySQL(分布式数据仓库)、Oracle、MySQL、Linux、prometheus监控&#xff1b;并对…
阅读更多...
Linux系统--文件系统

Linux系统--文件系统

大家好&#xff0c;我们今天继续来学习Linux系统部分。上一次我们学习了内存级的文件&#xff0c;下面我们来学习磁盘级的文件。那么话不多说&#xff0c;我们开始今天的学习&#xff1a; 目录 Ext系列⽂件系统 1. 理解硬件 1-1 磁盘、服务器、机柜、机房 1-2 磁盘物理结构…
阅读更多...
KUKA库卡焊接机器人氩气节气设备

KUKA库卡焊接机器人氩气节气设备

在焊接生产过程中&#xff0c;氩气作为一种重要的保护气体被广泛应用于KUKA库卡焊接机器人的焊接操作中。氩气的消耗往往是企业生产成本的一个重要组成部分&#xff0c;因此实现库卡焊接机器人节气具有重要的经济和环保意义。WGFACS节气装置的出现为解决这一问题提供了有效的方…
阅读更多...
远程连接----ubuntu ，rocky 等Linux系统，WindTerm_2.7.0

远程连接----ubuntu ，rocky 等Linux系统，WindTerm_2.7.0

新一代开源免费的终端工具-WindTerm github 27.5k⭐ https://github.com/kingToolbox/WindTerm/releases/download/2.7.0/WindTerm_2.7.0_Windows_Portable_x86_64.zip 主机填写你自己要连接的主机ip 端口默认 22 改成你ssh文件配置的端口 输入远程的 用户名 与密码 成功连接…
阅读更多...
笔试——Day32

笔试——Day32

文章目录第一题题目思路代码第二题题目&#xff1a;思路代码第三题题目&#xff1a;思路代码第一题 题目 素数回文 思路 模拟 构建新的数字&#xff0c;判断该数是否为素数 代码 第二题 题目&#xff1a; 活动安排 思路 区间问题的贪⼼&#xff1a;排序&#xff0c;然…
阅读更多...
超高车辆如何影响城市立交隧道安全？预警系统如何应对？

超高车辆如何影响城市立交隧道安全？预警系统如何应对？

超高车辆对立交隧道安全的潜在威胁在城市立交和隧道中&#xff0c;限高设施的设计通常考虑到大部分正常通行的货车和运输车辆。然而&#xff0c;一些超高的货车、集装箱车或特殊车辆如果未经有效监测而进入限高区域&#xff0c;就可能对道路设施造成极大的安全隐患。尤其在立交…
阅读更多...
解决 MinIO 上传文件时报 S3 API Requests must be made to API port错误

解决 MinIO 上传文件时报 S3 API Requests must be made to API port错误

在使用 MinIO 进行文件上传时&#xff0c;我遇到了一个比较坑的问题。错误日志如下&#xff1a; io.minio.errors.InvalidResponseException: Non-XML response from server. Response code: 400, Content-Type: text/xml; charsetutf-8, body: <?xml version"1.0&quo…
阅读更多...
linux_https，udp，tcp协议（更新中）

linux_https，udp，tcp协议（更新中）

目录 https 加密类型 对称加密 非对称加密 加密方案 只用对程加密 只用非对程加密 双方都是用非对程加密 非对称对称加密 非对称对称加密证书 流程图 校验流程图 udp udp协议格式 特点 UDP缓冲区 tcp tcp协议格式 32位序号及确认序号 4位首部 6位标志位 1…
阅读更多...
web端-登录页面验证码的实现(springboot+vue前后端分离)超详细

web端-登录页面验证码的实现(springboot+vue前后端分离)超详细

目录 一、项目技术栈 二、实现效果图 ​三、实现路线 四、验证码的实现步骤 五、完整代码 1.前端 2.后端 一、项目技术栈 登录页面暂时涉及到的技术栈如下: 前端 Vue2 Element UI Axios&#xff0c;后端 Spring Boot 2 MyBatis MySQL JWT Maven 二、实现效果图…
阅读更多...
疯狂星期四文案网第33天运营日记

疯狂星期四文案网第33天运营日记

网站运营第33天&#xff0c;点击观站&#xff1a; 疯狂星期四 crazy-thursday.com 全网最全的疯狂星期四文案网站 运营报告 今日访问量 今日搜索引擎收录情况 必应收录239个页面&#xff0c;还在持续增加中&#xff0c;已经获得必应的认可&#xff0c;逐渐收录所有页面 百度…
阅读更多...
客户端利用MinIO对服务器数据进行同步

客户端利用MinIO对服务器数据进行同步

MinIO 是一款高性能、开源的对象存储服务&#xff0c;专为海量数据存储设计&#xff0c;兼容 Amazon S3 API&#xff08;即与 AWS S3 协议兼容&#xff09;&#xff0c;可用于构建私有云存储、企业级数据湖、备份归档系统等场景。它以轻量、灵活、高效为核心特点&#xff0c;广…
阅读更多...
WPF 双击行为实现详解：DoubleClickBehavior 源码分析与实战指南

WPF 双击行为实现详解：DoubleClickBehavior 源码分析与实战指南

WPF 双击行为实现详解：DoubleClickBehavior 源码分析与实战指南 文章目录 WPF 双击行为实现详解：DoubleClickBehavior 源码分析与实战指南 引言 一、行为（Behavior）基础概念 1.1 什么是行为？ 1.2 行为的优势 二、DoubleClickBehavior 源码分析 2.1 类定义与依赖属性 2.2 双…
阅读更多...
零知开源——基于STM32F103RBT6的TDS水质监测仪数据校准和ST7789显示实战教程

零知开源——基于STM32F103RBT6的TDS水质监测仪数据校准和ST7789显示实战教程

✔零知开源是一个真正属于国人自己的开源软硬件平台&#xff0c;在开发效率上超越了Arduino平台并且更加容易上手&#xff0c;大大降低了开发难度。零知开源在软件方面提供了完整的学习教程和丰富示例代码&#xff0c;让不懂程序的工程师也能非常轻而易举的搭建电路来创作产品&…
阅读更多...
luogu P3387 【模板】缩点

luogu P3387 【模板】缩点

原题链接 原题再现 题目描述 给定一个 n 个点 m 条边有向图&#xff0c;每个点有一个权值&#xff0c;求一条路径&#xff0c;使路径经过的点权值之和最大。你只需要求出这个权值和。 允许多次经过一条边或者一个点&#xff0c;但是&#xff0c;重复经过的点&#xff0c;权…
阅读更多...
P1119 灾后重建【题解】

P1119 灾后重建【题解】

P1119 灾后重建 题目背景 B 地区在地震过后&#xff0c;所有村庄都造成了一定的损毁&#xff0c;而这场地震却没对公路造成什么影响。但是在村庄重建好之前&#xff0c;所有与未重建完成的村庄的公路均无法通车。换句话说&#xff0c;只有连接着两个重建完成的村庄的公路才能通…
阅读更多...
Horse3D引擎研发笔记（二）：基于QtOpenGL使用仿Three.js的BufferAttribute结构重构三角形绘制

Horse3D引擎研发笔记（二）：基于QtOpenGL使用仿Three.js的BufferAttribute结构重构三角形绘制

在Horse3D引擎的研发过程中&#xff0c;我们致力于构建一个高效、灵活且易于扩展的3D图形引擎。在本篇博客中&#xff0c;我们将详细记录如何基于QtOpenGL框架&#xff0c;使用仿Three.js的BufferAttribute结构&#xff0c;重构三角形绘制流程。通过这一过程&#xff0c;我们希…
阅读更多...
MCU程序段的分类

MCU程序段的分类

程序的下载&#xff08;烧录到存储器中&#xff09;通常是按照程序文件分段&#xff08;Code段、RO_data段、RW_data段、ZI_data段&#xff09;的方式存储的&#xff0c;但运行时内存的布局会按照程序进程分段&#xff08;TEXT段、DATA段、BSS段、堆栈段&#xff09;进行组织。…
阅读更多...
综合项目记录：自动化备份全网服务器数据平台

综合项目记录：自动化备份全网服务器数据平台

一、项目背景与需求1.1项目概述该项目共分为2个子项目&#xff0c;由环境搭建和实施备份两部分组成1.2项目总体需求企业内部有一台web服务器&#xff0c;内部数据很重要&#xff0c;现需要为该web服务器数据做备份&#xff0c;这样在数据丢失时可以恢复。要求如下&#xff1a;每…
阅读更多...
联合索引全解析：一棵树，撑起查询的半边天

联合索引全解析：一棵树，撑起查询的半边天

目录 一、为什么联合索引是MySQL性能优化的“王牌”&#xff1f; &#xff08;一&#xff09;索引的基本结构&#xff1a;从聚簇到非聚簇 1. 聚簇索引&#xff08;Clustered Index&#xff09; 2. 非聚簇索引&#xff08;Secondary Index&#xff09; &#xff08;二&…
阅读更多...
最新文章

Copyright @ 2022~2023