QT 之QTreeWidget实现好友列表

QT 之QTreeWidget实现好友列表

插叙

在上期Demo中，我们的界面似乎有些开始成型了，那么今天我们一起来看看QQ中的好友列表，我们利用QT又该如何实现呢？

效果图

UI设计

在这这前，我们需要先把我们的UI界面设计好，一个好友是一个Item，所以，首先我们需要先设计一个Item的Widget，在这里我命名为ContactItem

有了Item，擦入到我们主面板中QTreeWidget中

然后，有了UI界面，我们再来看看代码如何实现

上代码

void Demo::initContactTree()
{
    ui.contactTreeWidget->clear();
    //展开和收缩时信号，以达到变更我三角图片；
    connect(ui.contactTreeWidget, SIGNAL(itemExpanded(QTreeWidgetItem *)), this, SLOT(onItemExpanded(QTreeWidgetItem *)));
    connect(ui.contactTreeWidget, SIGNAL(itemCollapsed(QTreeWidgetItem *)), this, SLOT(onItemCollapsed(QTreeWidgetItem *)));
    //分组节点
    QTreeWidgetItem *pRootFriendItem = new QTreeWidgetItem();
    //设置Data用于区分，Item是分组节点还是子节点，0代表分组节点，1代表子节点
    pRootFriendItem->setData(0, Qt::UserRole, 0);
    QLabel *pItemName = new QLabel(ui.contactTreeWidget);
    pItemName->setStyleSheet("border-image: url(:/Demo/Resources/common/arrow_up.png);border-width:0 0 0 20;");
    int nMyFriendNum = 6;
    QString qsGroupName = QString(tr("myfriends")).arg(0).arg(nMyFriendNum);
    pItemName->setText(qsGroupName);
    //擦入分组节点
    ui.contactTreeWidget->addTopLevelItem(pRootFriendItem);
    ui.contactTreeWidget->setItemWidget(pRootFriendItem, 0, pItemName);

    for (int nIndex = 0; nIndex < nMyFriendNum; ++nIndex)
    {
        //添加子节点
        addMyFriendInfo(pRootFriendItem);
    }
}

void Demo::initStrangerTree()
{
    QTreeWidgetItem *pRootFriendItem = new QTreeWidgetItem();
    int nMyStrangerNum = 1;
    设置Data用于区分，Item是分组节点还是子节点，0代表分组节点，1代表子节点
    pRootFriendItem->setData(0, Qt::UserRole, 0);
    QLabel *pItemName = new QLabel(ui.contactTreeWidget);
    pItemName->setStyleSheet("border-image: url(:/Demo/Resources/common/arrow_up.png);border-width:0 0 0 20;");
    QString qsGroupName = QString(tr("strnggers")).arg(0).arg(nMyStrangerNum);
    pItemName->setText(qsGroupName);

    for (int nIndex = 0; nIndex < nMyStrangerNum; ++nIndex)
    {
        //添加子节点
        addMyFriendInfo(pRootFriendItem);
    }

    ui.contactTreeWidget->addTopLevelItem(pRootFriendItem);
    ui.contactTreeWidget->setItemWidget(pRootFriendItem, 0, pItemName);
}

void Demo::onItemExpanded(QTreeWidgetItem *pItem)
{
    bool bIsChild = pItem->data(0, Qt::UserRole).toBool();
    if (!bIsChild)
    {
        QWidget *pWidget = ui.contactTreeWidget->itemWidget(pItem, 0);
        if (pWidget)
        {
            pWidget->setStyleSheet("border-image: url(:/Demo/Resources/common/arrow_down.png);border-width:0 0 0 20;");
        }
    }
}

void Demo::onItemCollapsed(QTreeWidgetItem *pItem)
{
    bool bIsChild = pItem->data(0, Qt::UserRole).toBool();
    if (!bIsChild)
    {
        QWidget *pWidget = ui.contactTreeWidget->itemWidget(pItem, 0);
        if (pWidget)
        {
            pWidget->setStyleSheet("border-image: url(:/Demo/Resources/common/arrow_up.png);border-width:0 0 0 20;");
        }
    }
}

void Demo::addMyFriendInfo(QTreeWidgetItem* pRootGroupItem)
{
    QTreeWidgetItem *pChild = new QTreeWidgetItem();
    //添加子节点
    pChild->setData(0, Qt::UserRole, 1);
    ContactItem* pContactItem = new ContactItem(ui.contactTreeWidget);
    pContactItem->setContactName(QString(tr("userName")));
    pContactItem->setContactIcon(USER_ICON);
    pRootGroupItem->addChild(pChild);
    ui.contactTreeWidget->setItemWidget(pChild, 0, pContactItem);
}

看完代码，相信大家，应该都知道了是如何实现的了，没明白的，我们一起再交流交流O(∩_∩)O。

//QSS效果代码：
QTreeView
{
   border-style:none;   
}

QTreeView::item
{
   height: 26;
   color:rgba(255, 255, 255, 0);    
}

QTreeView::item:selected:active
{
    background-color: rgba(135, 206, 250, 153);
}

QTreeView::item:selected:!active, QTreeView::item:hover 
{
    background-color: rgba(135, 206, 250, 50);
}

下代码

QT 之QTreeWidget实现好友列表

结尾

只为记录，只为分享! 愿所写能对你有所帮助。Good Good Study, Day Day Up!