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

梦回阑珊

已于 2024-04-22 13:25:30 修改

阅读量414

点赞数 6

CC 4.0 BY-SA版权

分类专栏： QT实用小工具文章标签： qt 开发语言 c++ QWidget QML

于 2024-04-20 17:23:38 首次发布

本文链接：https://blog.youkuaiyun.com/cs1395293598/article/details/138004902

QT实用小工具专栏收录该内容

68 篇文章

订阅专栏

本文介绍了如何使用代码实现一个手机通讯录应用的界面，包括ListView的分组和排序，以及提供了一个示例代码段。文章最后附有源码下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

该项目实现了手机通讯录的功能，界面demo如下所示：
在这里插入图片描述
项目部分代码如下所示：

//联系人列表
    Item{
        width: parent.width
        height: parent.height
        anchors.centerIn: parent


        Rectangle{
            anchors.fill: parent
            color: "#2A2D33"
        }

        Component {
            id:sectionHeader
            Item {
                width: 100
                height: 120

                Text {
                    //                    anchors.verticalCenter: parent.verticalCenter
                    text: section.toUpperCase()/*.substr(0, 1)*/
                    font.pixelSize: 54
                    anchors.left: parent.left
                    anchors.leftMargin: 40
                    color: "#545a66"
                    anchors.bottom: parent.bottom
                }
            }
        }




        ListView{

            //listview的分组不会自动排序
            width:parent.width;height: parent.height-130
            anchors.bottom: parent.bottom
            clip: true
            id:listView
            //            spacing:20

            model: testModel
            delegate: Item {
                height: 120
                width: parent.width
                Text {
                    text: listView.getShowTextSpecial(name)
                    anchors.verticalCenter: parent.verticalCenter
                    color: "#858fa2"
                    font.pixelSize: 45
                    x:40
                }
                Rectangle{
                    anchors.bottom: parent.bottom
                    color: "#1a1c20"
                    width: parent.width
                    height: 1
                }
            }

            ScrollIndicator.vertical: ScrollIndicator {
                anchors.right: parent.right
                anchors.rightMargin: 10
                contentItem: Rectangle {
                    implicitWidth: 8
                    radius: implicitWidth/2
                    color: "#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

        }