c++ Qt5學習筆記 2021-2-22 （setContentsMargins()作用，設計布局實作的QQ消息清單，自定義控件來實作動态添加，使用數組來控制自定義控件）

1、setContentsMargins()作用：

設定布局的邊距，設定布局後，如果發現兩個布局之間間距太大，可以使用

setContentsMargins

拉近兩個布局間的距離。

setContentsMargins

的四個參數分别為：左、上、右、下的邊距。

使用時：

2、QQ的消息清單：

c++ Qt5學習筆記 2021-2-22 （setContentsMargins()作用，設計布局實作的QQ消息清單，自定義控件來實作動态添加，使用數組來控制自定義控件）

其實可以使用坐标來一個一個往下搭，用坐标來搭似乎還好了解一點。想了想還是使用布局來做，坐标用多了代碼就看不懂了。

大緻劃分如下：

c++ Qt5學習筆記 2021-2-22 （setContentsMargins()作用，設計布局實作的QQ消息清單，自定義控件來實作動态添加，使用數組來控制自定義控件）

最外面一個

水準布局1

，

水準布局1

中一個頭像和一個

垂直布局

，

垂直布局

中是

水準布局2

和

水準布局3

，

水準布局2

中兩個

label

，

水準布局3

中一個

label

（為了友善與上面對齊，是以單獨給他一個布局）。

實作的代碼如下：

//水準布局1
    //此處的message_box為stacked widget分頁中的一頁
    QWidget *hlayout_widget = new QWidget(ui->message_box);
    QHBoxLayout *hLayout = new QHBoxLayout(hlayout_widget);

    //豎直布局
    QWidget *vlayout_widget = new QWidget(hlayout_widget);
    QVBoxLayout *vLayout = new QVBoxLayout(vlayout_widget);

    //水準布局2
    QWidget *hlayout_widget_2 = new QWidget(vlayout_widget);
    QHBoxLayout *hLayout_2 = new QHBoxLayout(hlayout_widget_2);//水準布局2

    //水準布局3
    QWidget *hlayout_widget_3 = new QWidget(vlayout_widget);
    QHBoxLayout *hLayout_3 = new QHBoxLayout(hlayout_widget_3);//水準布局3

    //頁面上的控件
    //使用qlabel作為頭像時，發現setStyleSheet失效，是以改為用QPushButton
    QPushButton *Icon = new QPushButton(hlayout_widget);
    Icon->setStyleSheet("width:40px;height:40px;background-color:black;border:0px;border-radius:20px;border-image:url(:/new/prefix1/source/2.png);");
    QLabel *qq_name = new QLabel(u8"八度空間的秘密");
    QLabel *last_msg = new QLabel(u8"我肚子好餓：啊啊啊啊");
    QLabel *msg_date = new QLabel("2021-2-16");

    //向布局中添加控件
    hLayout->addWidget(Icon);
    hLayout->addWidget(vlayout_widget);
    vLayout->addWidget(hlayout_widget_2);
    hLayout_2->addWidget(qq_name);
    hLayout_2->addStretch(2);
    hLayout_2->addWidget(msg_date);
    vLayout->addWidget(hlayout_widget_3);
    hLayout_3->addWidget(last_msg);
    
    hLayout_2->setContentsMargins(0,20,0,0);
    hLayout_3->setContentsMargins(0,0,0,20);

    hlayout_widget->resize(290,110);

運作結果：

c++ Qt5學習筆記 2021-2-22 （setContentsMargins()作用，設計布局實作的QQ消息清單，自定義控件來實作動态添加，使用數組來控制自定義控件）

3、用來動态顯示的自定義控件：

動态建立多個這樣的消息，不可能一行一行寫，是以通過自己聲明控件的方式建立，之前用過，這裡記錄一下。

（1）布局來做：

在

mainwindow.h

中建立

public

對象：

QWidget* message_boxs(const QString &name
                              ,const QString &icon
                              ,const QString &message
                              ,const QString &msg_date) {
        //水準布局1
        QWidget *hlayout_widget = new QWidget(this);
        QHBoxLayout *hLayout = new QHBoxLayout(hlayout_widget);

        //豎直布局
        QWidget *vlayout_widget = new QWidget(hlayout_widget);
        QVBoxLayout *vLayout = new QVBoxLayout(vlayout_widget);

        //水準布局2
        QWidget *hlayout_widget_2 = new QWidget(vlayout_widget);
        QHBoxLayout *hLayout_2 = new QHBoxLayout(hlayout_widget_2);//水準布局2

        //水準布局3
        QWidget *hlayout_widget_3 = new QWidget(vlayout_widget);
        QHBoxLayout *hLayout_3 = new QHBoxLayout(hlayout_widget_3);//水準布局3

        QPushButton *qqicon = new QPushButton(this);    //頭像
        QLabel *qqname = new QLabel(this);     //名字
        QLabel *qqmessage = new QLabel(this);
        QLabel *msg_date_label = new QLabel(this);

        //頭像，qq名，qq資訊，最後資訊時間
        qqicon->setStyleSheet(QString("width:40px;height:40px;border:0px;border-radius:20px;border-image:url(:/new/prefix1/source/%1);").arg(icon));
        qqname->setText(name);
        qqmessage->setText(message);
        msg_date_label->setText(msg_date);

        hLayout->addWidget(qqicon);
        hLayout->addWidget(vlayout_widget);
        vLayout->addWidget(hlayout_widget_2);
        vLayout->addWidget(hlayout_widget_3);
        hLayout_2->addWidget(qqname);
        hLayout_2->addStretch(2);
        hLayout_2->addWidget(qqmessage);
        hLayout_3->addWidget(msg_date_label);

        hLayout_2->setContentsMargins(0,20,0,0);
        hLayout_3->setContentsMargins(0,0,0,20);

        hlayout_widget->resize(290,125);

        return hlayout_widget;
    }

在

mainwindow.cpp

中添加：

//此處的message_box為stacked widget分頁中的一頁
    QWidget *vlayout_main_widget = new QWidget(ui->message_box);
    QVBoxLayout *vLayout_main = new QVBoxLayout(vlayout_main_widget);
    
    //這裡可以使用資料庫中查詢到的資料批量添加
    QWidget *message_box1 = message_boxs(u8"懶羊羊","2.png",u8"我肚子好餓：啊啊啊啊","20:21");
    QWidget *message_box2 = message_boxs(u8"慢羊羊","3.png",u8"我肚子好餓：啊啊啊啊","20:21");
    QWidget *message_box3 = message_boxs(u8"喜羊羊","2.png",u8"我肚子好餓：啊啊啊啊","20:21");
    vLayout_main->addWidget(message_box1);
    vLayout_main->addWidget(message_box2);
    vLayout_main->addWidget(message_box3);

運作結果：

c++ Qt5學習筆記 2021-2-22 （setContentsMargins()作用，設計布局實作的QQ消息清單，自定義控件來實作動态添加，使用數組來控制自定義控件）

基本就有個雛形了，還要調節一下上下間距，再加個滾動條。圖簡單的話，接下來可以不使用布局來做了，可以把自己自建的控件是用坐标一個一個往下排就行了。

（2）坐标來做：

在

mainwindow.h

中建立

public

對象：

QWidget* message_boxs(const QString &name
                          ,const QString &icon
                          ,const QString &message
                          ,const QString &msg_date) {
        QWidget *qwidget = new QWidget(this);

        QPushButton *qqicon = new QPushButton(qwidget);    //頭像
        QLabel *qqname = new QLabel(qwidget);     //名字
        QLabel *qqmessage = new QLabel(qwidget);
        QLabel *msg_date_label = new QLabel(qwidget);

        //頭像，qq名，qq資訊，最後資訊時間
        qqicon->setStyleSheet(QString("width:40px;height:40px;border:0px;border-radius:20px;border-image:url(:/new/prefix1/source/%1);").arg(icon));
        qqname->setText(name);

        qqmessage->setText(message);
        qqmessage->setStyleSheet("color:rgb(173,173,173)");
        msg_date_label->setText(msg_date);

        qqicon->move(15,10);
        qqname->move(65,15);
        qqmessage->move(65,35);
        msg_date_label->move(240,15);

        qwidget->resize(290,60);
        return qwidget;
    }

在

mianwindow.cpp

中放置控件：

QWidget *message_box1 = message_boxs(u8"懶羊羊","2.png",u8"我肚子好餓：啊啊啊啊","20:21");
    QWidget *message_box2 = message_boxs(u8"慢羊羊","3.png",u8"我肚子好餓：啊啊啊啊","20:21");
    QWidget *message_box3 = message_boxs(u8"喜羊羊","2.png",u8"我肚子好餓：啊啊啊啊","20:21");

    message_box1->setParent(ui->message_box);
    message_box1->move(0,0);
    message_box1->setStyleSheet("background-color:rgb(127,127,127)"); //為了定制高度，是以用顔色辨別出來，可不用
    message_box2->setParent(ui->message_box);
    message_box2->move(0,60);
    message_box3->setParent(ui->message_box);
    message_box3->move(0,120);

運作結果：

c++ Qt5學習筆記 2021-2-22 （setContentsMargins()作用，設計布局實作的QQ消息清單，自定義控件來實作動态添加，使用數組來控制自定義控件）

之前嘗試過自建設計師界面類，畫一個界面，然後作為控件來放置。雖然能放，但是不會随着一起放縮和移動，是以放棄了。

（3）使用容器數組來控制：

這裡緊接着上面坐标實作的操作。

在

mainwindow.h

中建立

public

對象：

在

mainwindow.cpp

中建立自建控件：

QStringList namelist,iconlist,meslist,timelist;
    //使用時，以下内容就可以替換為資料庫中的資訊。
    //像QQ中那樣則應該還需要把資訊傳遞給伺服器，資訊等存儲在本地，
    //朋友的頭像和其他資訊等需要在伺服器下載下傳
    namelist.append(u8"喜羊羊");
    namelist.append(u8"懶羊羊");
    namelist.append(u8"慢羊羊");
    namelist.append(u8"泰哥");
    iconlist.append("1.jpg");
    iconlist.append("4.jpg");
    iconlist.append("5.jpg");
    iconlist.append("15.jpg");
    meslist.append(u8"哈哈哈哈");
    meslist.append(u8"我肚子好餓");
    meslist.append(u8"發生腎莫事了");
    meslist.append(u8"我一拳頭下去就把他鼻子打骨折了");
    timelist.append("20:21");
    timelist.append("20:21");
    timelist.append("20:21");
    timelist.append("20:21");
    
    for(int i=0;i<4;i++)
        qWidget_group.push_back(message_boxs(namelist.at(i)
                                             ,iconlist.at(i)
                                             ,meslist.at(i)
                                             ,timelist.at(i))),
        qWidget_group[i]->setParent(ui->message_box),
        //滑鼠懸浮效果
        qWidget_group[i]->setStyleSheet("QWidget::hover{background-color:rgb(235,235,235)}"),
        qWidget_group[i]->move(0,60*i);

運作結果：

c++ Qt5學習筆記 2021-2-22 （setContentsMargins()作用，設計布局實作的QQ消息清單，自定義控件來實作動态添加，使用數組來控制自定義控件）

c++ Qt5學習筆記 2021-2-22 （setContentsMargins()作用，設計布局實作的QQ消息清單，自定義控件來實作動态添加，使用數組來控制自定義控件）

1、setContentsMargins()作用：

2、QQ的消息清單：

3、用來動态顯示的自定義控件：

（1）布局來做：

（2）坐标來做：

（3）使用容器數組來控制：

繼續閱讀

C語言第四章自述2第四章選擇結構程式設計

面試題:vector和map的差別，異同。空間分布，100萬資料存哪個比較合适。一、疊代器差別二、vector三、Map、Set四、vector_map 為什麼比map效率高五、如何選擇六、容器選擇原則七、效率對比

C++ 多線程用條件變量确定線程的執行順序而不是使用 sleep(1)

POJ 1284 Primitive Roots (歐拉函數&原根定理)

CQ V1.0分詞bates(基于雙數組tire樹)—應該是目前最快的中文分詞算法

成員函數初始化清單

2021-08-13c++——類之操作符重載

swmm與lisflood-fp源碼如何一起編譯 CMake指令

Windows下VS開發環境環境安裝工程項目設定關于Debug和Release的提示

一文看懂字元串的加減乘除

C++ 第十五周報告1--《冒泡法排序》

C++實作簡單順序表

C經典書籍筆記——C陷阱與缺陷②(文法陷阱之優先級)一、錯誤案列二、優先級規律

線性表之順序表的實作

C++判斷素數、求最大公約數代碼判斷一個數是否為素數求兩個數的最大公約數

SequoiaDB巨杉資料庫C++驅動概述