QT框架中如何使用QTableView或者QTableWidget創建表格。

這篇文章主要介紹QT框架中如何使用QTableView或者QTableWidget創建表格。，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

我們在開發過程中對于表格使用頻率還是挺高的，使用QT框架開發時候我們使用QTableView或者QTableWidget創建表格。

其中表格分為 表格頭與表格體：

對于簡單地表格，我們可以設置表頭來滿足我們的要求（當然也可以隱藏表頭），不過對于定制化的表頭，我們能做的不是特別多。特別是對于復雜的表頭，使用自帶的表頭，無論怎么設置都不太可能達到需求。例如我最近接到的一個項目，需求是：

我們分析一下這個表格有什么特點：

1.表頭不是簡單的一行，而是兩行。

2.表頭有單元格的合并。

3.部分表頭中間有使用漸變的分隔線且分割線不是上下充滿表格的。

如果能解決上面三個問題，我們基本都可以把這個表格做出來了。這個表頭明顯是一個比較復雜的表頭。對于只對QT提供的API或者CSS上面三個問題，沒有一個能夠解決的。

這時候可能會有老師提出解決辦法：給header 設置itemDelegate，自己在itemDelegate中重寫paintEvent，自己畫表頭。 因為我們都知道，自己畫單元格，要更靈活，滿足更多需求。但是我們平時都是對單元格進行重繪，并不是對header的單元格進行重繪。于是就去搜索QT的幫助文檔，驚喜的發現居然有設置itemdelegate的API，心里覺得有戲于是創建 ItemDelegate類，對header進行設置如下

tableWidget->horizontalHorizon()->setItemDelegate(new ItemDelegate());

可是結果卻是令人失望的，沒有一點效果。于是反身去查找QT 關于這部分的介紹，終于找到了原因：

結果就顯而易見了，對于headerView,并不能使用ItemDelegate進行重繪。

那么我們就要另外想辦法了，經過分析，剛開始提出了兩種方案：

解決方案

總結一下就是：

第一種方案比較簡單，但是最終體驗效果不太好。

第二種方案實現起來比較復雜，但是最終體驗效果比較好。

本著成就客戶與自我成長的態度，最終選擇了第二種解決方案。

我們首先要做的就是創建一個繼承于QTableWidget的一個類，命名為TDMSummaryTableWgt。

class TDMSummaryTableWgt : public QTableWidget

然后需要在TDMSummaryTableWgt類中，聲明另外一個用于header的QTableWidget，命名為 m_frozenTableWgt;

private:
  QTableWidget *m_frozenTableWgt;// 使用TableWidget 作為header，并凍結

這個m_frozenTableWgt,就是作為表頭，并且固定位置，不隨著滾動條移動位置。

這個時候我們只需要解決兩個問題，就可以搞定表頭了：

1.表頭位置鎖定（固定、鎖死）。

2.重繪表頭。

對于第一個問題，表頭位置的固定。我們應該從哪些方面考慮來解決？

1.從界面初始化開始，我們應當讓表頭m_frozenTableWgt具備： 不顯示表頭，不顯示滾動條、設置rowcount為2行并隱藏2行后所有的元素、設置窗口層次在TDMSummaryTableWgt之前、對單元格進行合并等要素。

這里要特別注意的是，m_frozenTableWgt與TDMSummaryTableWgt設置的列數應該完全一致，每一列的尺寸與伸展方案也應該完全一致。

void TDMSummaryTableWgt::initFrozenFrame()
{
  m_frozenTableWgt = new QTableWidget(this);
 
  m_frozenTableWgt->horizontalHeader()->setVisible(false);//表頭不可見
  m_frozenTableWgt->verticalHeader()->setVisible(false);//表頭不可見
  m_frozenTableWgt->setShowGrid(false);//網格線不可見
  m_frozenTableWgt->setEditTriggers(QAbstractItemView::NoEditTriggers);//設置單元格不可編輯
  m_frozenTableWgt->horizontalHeader()->setStretchLastSection(true);//最后一個單元格擴展
  m_frozenTableWgt->setFocusPolicy(Qt::NoFocus);//解決選中虛框問題
  m_frozenTableWgt->setFrameShape(QFrame::NoFrame);//去除邊框 尷尬
  m_frozenTableWgt->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);//隱藏滾動條
  m_frozenTableWgt->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);//
  m_frozenTableWgt->setHorizontalScrollMode(ScrollPerPixel);
 
  m_frozenTableWgt->setItemDelegate(new ItemDelegate(0));//設置繪畫代理（主要在代理中畫出來header）
 
  viewport()->stackUnder(m_frozenTableWgt);//設置窗口層次
 
  m_frozenTableWgt->setColumnCount(10);//header10列
  m_frozenTableWgt->setRowCount(2);//header2行
 
  m_frozenTableWgt->setRowHeight(0, 42);//第一行設置高度42px
  m_frozenTableWgt->setRowHeight(1, 42);//第二行設置高度42px
 
  for (int row = 2; row < m_frozenTableWgt->rowCount(); ++row)//隱藏2行后的行
     m_frozenTableWgt->setRowHidden(row, true);
 
  //===================設置header內容=================//
  //合并單元格
  m_frozenTableWgt->setSpan(0, 0, 2, 1);//老師ID
  m_frozenTableWgt->setSpan(0, 1, 2, 1);//老師姓名
  m_frozenTableWgt->setSpan(0, 2, 2, 1);//老師姓名
  m_frozenTableWgt->setSpan(0, 3, 1, 4);//最新日期（8月20）
  m_frozenTableWgt->setSpan(0, 7, 1, 2);//前一日（8月19）
  m_frozenTableWgt->setSpan(0, 9, 2, 1);//操作
 
  m_frozenTableWgt->setItem(0, 0, new QTableWidgetItem("老師ID"));
  m_frozenTableWgt->setItem(0, 1, new QTableWidgetItem("老師姓名"));
  m_frozenTableWgt->setItem(0, 2, new QTableWidgetItem("老師姓名"));
  m_frozenTableWgt->setItem(0, 3, new QTableWidgetItem("8月20日"));
  m_frozenTableWgt->setItem(0, 7, new QTableWidgetItem("8月19日"));
  m_frozenTableWgt->setItem(0, 9, new QTableWidgetItem("操作"));
  m_frozenTableWgt->setItem(1, 3, new QTableWidgetItem("續報率"));
  m_frozenTableWgt->setItem(1, 4, new QTableWidgetItem("新學員續報率"));
  m_frozenTableWgt->setItem(1, 5, new QTableWidgetItem("續報增長人數"));
  m_frozenTableWgt->setItem(1, 6, new QTableWidgetItem("續報增長率"));
  m_frozenTableWgt->setItem(1, 7, new QTableWidgetItem("續報增長率"));
  m_frozenTableWgt->setItem(1, 8, new QTableWidgetItem("新學員續報率"));
 
  //連接信號槽。用于滾動條聯動
  connect(m_frozenTableWgt->verticalScrollBar(), &QAbstractSlider::valueChanged,
      verticalScrollBar(), &QAbstractSlider::setValue);
  connect(verticalScrollBar(), &QAbstractSlider::valueChanged,
      m_frozenTableWgt->verticalScrollBar(), &QAbstractSlider::setValue);
 
  updateFrozenTableGeometry();//更新位置
  m_frozenTableWgt->show();
}

2.除了上面的考慮之外，我們就需要考慮m_frozenTableWgt與TDMSummaryTableWgt之間的聯動問題了，主要包括表格的尺寸變化、滾動條移動、界面平移等問題。

我們首先要寫一個方法，來確定m_frozenTableWgt與TDMSummaryTableWgt位置。

void TDMSummaryTableWgt::updateFrozenTableGeometry()
{
  m_frozenTableWgt->setGeometry(frameWidth(),
                 frameWidth(),
                 viewport()->width(),
                 horizontalHeader()->height());
 
}

我們需要重寫3個上面提到問題解決方案的函數，在每個方法里都要重新執行updateFrozenTableGeometry();

protected:
  /**
   * @brief resizeEvent        重載虛函數 resize事件，同時更新m_frozenTableWgt的位置
   * @param event
   */
  virtual void resizeEvent(QResizeEvent *event) Q_DECL_OVERRIDE;
 
  /**
   * @brief moveCursor        重載虛函數 鼠標移動事件
   * @param cursorAction
   * @param modifiers
   * @return
   */
  virtual QModelIndex moveCursor(CursorAction cursorAction, Qt::KeyboardModifiers modifiers) Q_DECL_OVERRIDE;
 
  /**
   * @brief scrollTo         TableWidget移動事件
   * @param index
   * @param hint
   */
  void scrollTo (const QModelIndex & index, ScrollHint hint = EnsureVisible) Q_DECL_OVERRIDE;

對上面這三個虛函數，我們需要特別注意的重點是moveCursor方法。這個方法里我們應該重點關注鼠標向上移動的情景：只有當鼠標向上移動，并且TDMSummaryTableWgt還未顯示到第一行，并且可視區域的頂點應該小于m_frozenTableWgt的第一行，才允許繼續向上移動：

QModelIndex TDMSummaryTableWgt::moveCursor(QAbstractItemView::CursorAction cursorAction, Qt::KeyboardModifiers modifiers)
{
  QModelIndex current = QTableView::moveCursor(cursorAction, modifiers);
 
  if (cursorAction == MoveUp && current.row() > 0
      && visualRect(current).topLeft().y() < m_frozenTableWgt->rowHeight(1) ){
     const int newValue = verticalScrollBar()->value() + visualRect(current).topLeft().y()
                - m_frozenTableWgt->rowHeight(0) - m_frozenTableWgt->rowHeight(1);
     verticalScrollBar()->setValue(newValue);
  }
  return current;
}

做完上面這幾部，基本解決了第一個問題，就是將m_frozenTableWgt的固定行（凍結）的功能。

要完成m_frozenTableWgtde 的樣式重繪，就是第二個要解決的問題了。

這個問題，我們要新建一個繼承于QStyledItemDelegate的代理類，我們叫ItemDelegate。并且重寫paint方法，在paint方法里繪制m_frozenTableWgt;

m_frozenTableWgt->setItemDelegate(new ItemDelegate(0));//設置繪畫代理（主要在代理中畫出來header）

class ItemDelegate : public QStyledItemDelegate
{
  Q_OBJECT
public:
  ItemDelegate(int type, QObject *parent=0);
 
  void paint(QPainter *painter,
        const QStyleOptionViewItem &option, const QModelIndex &index) const;
 
private:
  
};

在paint方法中，根據每個單元格的背景不同進行繪制背景

  int rowIndex = index.row();//行號
  int colIndex = index.column();//列號
  if (rowIndex == 0 || rowIndex == 1)//前兩行作為header
  {
    //背景
    QColor color;
 
    if (rowIndex == 0 && (colIndex == 0 || //老師ID
               colIndex == 1 || //老師姓名
               colIndex == 2 || //課程類型
               colIndex == 9)) //操作
    {
      color.setRgb(231, 238, 251);
    }
    else if ((rowIndex == 0 && colIndex == 3) || //8月20日
         (rowIndex == 1 && (colIndex == 3 || //續報率
                  colIndex == 4 || //新學員續報率
                  colIndex == 5 || //續報增長人數
                  colIndex == 6))) //續報增長率
    {
      color.setRgb(214, 228, 253);
    }
    else if ((rowIndex == 0 && colIndex == 7) || //8月19日
         (rowIndex == 1 && (colIndex == 7 || //續報率
                  colIndex == 8))) //新學員續報率
    {
      color.setRgb(203, 221, 255);
    }
 
    //繪制背景
    painter->setPen(color);
    painter->setBrush(QBrush(color));
    painter->drawRect(option.rect);

根據每個單元格要求繪畫是否需要右側的漸變的分隔線。

//右側spacer
    if ((rowIndex == 0 && (colIndex == 0 || colIndex == 1) )) {
      int startX = option.rect.right();
      int startY = option.rect.y() + (option.rect.height() - 40) / 2;
      int endX = startX;
      int endY = startY + 40;
      QLinearGradient linearGradient(startX, startY, endX, endY);
      linearGradient.setColorAt(0, QColor(164, 188, 240, 0));
      linearGradient.setColorAt(0.5, QColor(164, 188, 240, 255));
      linearGradient.setColorAt(1, QColor(164, 188, 240, 0));
      painter->setBrush(linearGradient);
      painter->drawRect(option.rect.right()- 2, startY, 2, 40);
 
    }
    else if (rowIndex == 1 && (colIndex == 3 ||
                  colIndex == 4 ||
                  colIndex == 5 ||
                  colIndex == 7 )) {
 
      int startX = option.rect.right();
      int startY = option.rect.y() + (option.rect.height() - 28) / 2;
      int endX = startX;
      int endY = startY + 28;
      QLinearGradient linearGradient(startX, startY, endX, endY);
      linearGradient.setColorAt(0, QColor(164, 188, 240, 0));
      linearGradient.setColorAt(0.5, QColor(164, 188, 240, 255));
      linearGradient.setColorAt(1, QColor(164, 188, 240, 0));
      painter->setBrush(linearGradient);
      painter->drawRect(option.rect.right()- 2, startY, 2, 28);    
    }

最后將每個單元格的字體畫出來

//字體
    painter->setPen(QColor(51, 51, 51));
    QTextOption op;
    op.setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);
 
    QFont font;
    font.setFamily("Microsoft YaHei");
    font.setPixelSize(14);
    font.setBold(true);
    painter->setFont(font);
    painter->drawText(option.rect, index.data(Qt::DisplayRole).toString(), op);

這樣就解決了header里面的難題。

以上是“QT框架中如何使用QTableView或者QTableWidget創建表格?！边@篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！