会话好友区设计与开发（二）

会话好友区设计与开发（二）

前言

        在上一集我们已经完成了对item的设计与开发，也详细解释了一些细节，但是我们上一集并没有对item进行显示，那么这一集我们会开发两个SessionFriendArea的方法以及使用一个宏开关进行测试。

需求

我们要先开发两个比较简单的方法，一个是添加item、一个是清空区域内所有item的方法。

最后弄一个宏开关进行测试。

addItem

既然要往container里面添加item，我们就需要把相关的头像、昵称以及预览信息作为参数传入。

并且我们想起来上一集我们的item的构造函数中，我们有一个owner的指针变量。我们就需要将this一并传入item的构造函数。

构造出来的item，我们就需要塞到container的layout当中。

所以代码就是以下简单的几句：

void SessionFriendArea::addItem(const QIcon &avatar, const QString &name, const QString &text)
{
    SessionFriendItem* item = new SessionFriendItem(this,avatar,name,text);
    container->layout()->addWidget(item);
}

就是这么的朴实无华。

clear

那么我们需要继续开发clear这个方法。

这个也是非常的简单，我们需要先获取container的layout，再遍历这个layout，一个一个的删除即可。

那么我们就很容易写出下面的代码

void SessionFriendArea::clear()
{
    QLayout* layout = container->layout();
    for(size_t i = 0; i < layout->count();i++){
        QLayoutItem* item = layout->takeAt(i);
        }
    }
}

至此我们就可以下班了对吧？

NO！！！怎么可能那么简单，踩坑了！！！

虽然说是遍历一个一个删，这整个逻辑并没有什么问题，但是删除之后，count也变小了啊！一边遍历一边删除是极其危险的事情。

一旦删除了元素，上面的count就变了，而且删除的元素的后面的元素的下标也会发生改变。

那我们应该怎么做呢？

第一种办法：每次都删除0号位！

第二种办法：从后往前删！

我选择第二种办法！

之后就写出以下方法啦！

void SessionFriendArea::clear()
{
    QLayout* layout = container->layout();
    for(size_t i = layout->count() - 1 ; i >= 0;i--){
        QLayoutItem* item = layout->takeAt(i);
        }
    }
}

这下就能下班咯！

老板：你小子年终奖没了！

size_t这种无符号整数，确定能小于0吗？最后这个代码是一个死循环了。所以我们就需要把他们改为int。

那好！我们终于下班了对吗？

好像也不对，总感觉少了什么东西。我们的item是怎么创建的？好好想想。

我们是new出来的东西，需要自己手动delete！

所以最终代码如下：

void SessionFriendArea::clear()
{
    QLayout* layout = container->layout();
    for(int i = layout->count() - 1 ; i >= 0;i--){
        QLayoutItem* item = layout->takeAt(i);
        if(item->widget()){
            //释放widget，new出来的对象需要手动delete
            delete item->widget();
        }
    }
}

终于是下班了。

TEST_UI

先别跑，别忘了我们的需求，还需要一个宏定义的测试呢。

直接看代码！！！

#if TEST_UI
    QIcon icon(":/resource/image/defaultAvatar.png");
    for(int i = 9527; i < 9557; i++){
        this->addItem(icon,"编号" + QString::number(i),"编号" + QString::number(i) + "听候你的差遣");
    }
#endif
}

这里我们就完成了以上的三个需求，我们接下来要看一眼测试结果。

可以看到我们的整个测试结果，但是长得好丑啊，好像左边的背景有点问题吧，那么这个问题我们会留到下一次来解决，今天就先讲到这里！