Qt中常用的控件詳細介紹

這裡寫目錄标題

• 1、容器的布局
• • 系統提供的布局控件
  • 利用 widget 做布局
• 2、QListWidget（清單控件）
• 3、QTreeWidget（樹控件）
• 4、QTableWidget（表格控件）
• 5、下拉清單框(Combo BOX)
• 6、QLabel控件的使用
• • 6、1、Qlabel設定文本
  • 6、2、設定圖檔
  • • 6.2.1、添加圖檔資源
    • 6.2.2、QPixmap 對象加載圖檔
  • 6.3、設定動畫

1、容器的布局

Qt 提供的布局中以下三種是我們最常用的：

• QHBoxLayout：按照水準方向從左到右布局；
• QVBoxLayout：按照豎直方向從上到下布局；
• QGridLayout：在一個網格中進行布局，類似于 HTML 的 table；

系統提供的布局控件

這 4 個為系統給我們提供的布局的控件，但是使用起來不是非常的靈活，這裡就不詳細介紹 了。

利用 widget 做布局

第二種布局方式是利用控件裡的 widget 來做布局，在 Containers 中

在 widget 中的控件可以進行水準、垂直、栅格布局等操作，比較靈活。 再布局的同時我們需要靈活運用彈簧的特性讓我們的布局更加的美觀，下面是一個登陸窗 口，利用 widget 可以搭建出如下登陸界面：

2、QListWidget（清單控件）

查找相關api

構造函數中

//清單控件
    //往清單控件裡面添加 item
    QListWidgetItem *item = new QListWidgetItem("處處吻");//單個添加
    ui->listWidget->addItem(item);

    //王清單控件中連續添加
    QStringList list;
    list<<"下山"<<"把孤獨當晚餐"<<"世間美好與你環環相扣";
    ui->listWidget->addItems(list);

    connect(ui->listWidget,&QListWidget::itemClicked,[=](QListWidgetItem *item){
        qDebug()<<item->text().toUtf8().data(); //toUtf8().data() 的作用是去除雙引号
    });

           

運作結果：

3、QTreeWidget（樹控件）

手動輸入

查找相關api

//設定樹控件的頭資訊
    QStringList List;
    List<<"英雄"<<"英雄介紹";
    ui->treeWidget->setHeaderLabels(List);

    //添加頂層控件
    QTreeWidgetItem *item1 = new QTreeWidgetItem(QStringList()<<"德瑪西亞");
    ui->treeWidget->addTopLevelItem(item1);
    //QTreeWidgetItem *child = new QTreeWidgetItem(QStringList()<<"上單"<<"坦克，攻高防厚");
    //item1->addChild(child);
    item1->addChild(new QTreeWidgetItem(QStringList()<<"上單"<<"坦克，攻高防厚"));

    QTreeWidgetItem *item2 = new QTreeWidgetItem(QStringList()<<"盲僧");
    ui->treeWidget->addTopLevelItem(item2);
    item2->addChild(new QTreeWidgetItem(QStringList()<<"打野"<<"戰士，攻高防少"));

    QTreeWidgetItem *item3 = new QTreeWidgetItem(QStringList()<<"提莫");
    ui->treeWidget->addTopLevelItem(item3);
    item3->addChild(new QTreeWidgetItem(QStringList()<<"上單"<<"法師，攻高防少"));

    //動起來
    connect(ui->treeWidget, &QTreeWidget::itemClicked,[](QTreeWidgetItem *item,int column){
       qDebug()<< item->text(column).toUtf8().data() <<endl;
    } );
           

運作結果：

4、QTableWidget（表格控件）

5、下拉清單框(Combo BOX)

設定預設選項

信号

6、QLabel控件的使用

6、1、Qlabel設定文本

6、2、設定圖檔

6.2.1、添加圖檔資源

6.2.2、QPixmap 對象加載圖檔

6.3、設定動畫