《QT实用小工具·三十三》Qt/QML做的一个仿手机通讯录界面

本文主要是介绍《QT实用小工具·三十三》Qt/QML做的一个仿手机通讯录界面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、概述
源码放在文章末尾

该项目实现了手机通讯录的功能，界面demo如下所示：

项目部分代码如下所示：

//联系人列表Item{width: parent.widthheight: parent.heightanchors.centerIn: parentRectangle{anchors.fill: parentcolor: "#2A2D33"}Component {id:sectionHeaderItem {width: 100height: 120Text {//                    anchors.verticalCenter: parent.verticalCentertext: section.toUpperCase()/*.substr(0, 1)*/font.pixelSize: 54anchors.left: parent.leftanchors.leftMargin: 40color: "#545a66"anchors.bottom: parent.bottom}}}ListView{//listview的分组不会自动排序width:parent.width;height: parent.height-130anchors.bottom: parent.bottomclip: trueid:listView//            spacing:20model: testModeldelegate: Item {height: 120width: parent.widthText {text: listView.getShowTextSpecial(name)anchors.verticalCenter: parent.verticalCentercolor: "#858fa2"font.pixelSize: 45x:40}Rectangle{anchors.bottom: parent.bottomcolor: "#1a1c20"width: parent.widthheight: 1}}ScrollIndicator.vertical: ScrollIndicator {anchors.right: parent.rightanchors.rightMargin: 10contentItem: Rectangle {implicitWidth: 8radius: implicitWidth/2color: "#0f1115"}}function getShowTextSpecial(str){var first = str[0];if (first === "#")return str.substr(1);return str;}section.property: "pinyin";section.criteria: ViewSection.FirstCharacter //ViewSection.FirstCharacter//section.delegate: sectionHeader}

源码下载

这篇关于《QT实用小工具·三十三》Qt/QML做的一个仿手机通讯录界面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---