TreeView 的基本應用
前言
在許多遊戲編輯器都需要顯示樹狀資料結構，像是物件瀏覽器或是檔案瀏覽器，Qt 提供 TreeView 來顯示樹狀的資料結構，在此把學習的過程做個紀錄。內容
先到 [ GitLab ] HelloQt 下載範例，這次應用的專案路徑(HelloQt' directory)/TreeView/Basic，在 Qt Creator 開啟設計介面會看到以下
 |
| 範例的設計介面 |
圖中左側有 TreeView 在工具箱的位置。執行結果如下
 |
| 範例的執行結果 |
範例會加入兩個預設的節點，可以透過"Add root item"、"Add child item"與"Remove"三個按鈕來控制樹的節點。TreeView 不提供在設計介面裡編輯節點的功能，資料必須透過程式綁定資料才能使用。
接著來看看程式的操作，先看到 MainWindow::MainWindow() ，程式碼如下
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
//
QStandardItemModel* pModel = new QStandardItemModel(ui->treeView);
pModel->setHorizontalHeaderLabels( QStringList()<<QStringLiteral( "Name" )<<QStringLiteral( "Comment" ) );
QStandardItem* pItemRoot1 = new QStandardItem( QStringLiteral( "root1" ) );
//first
pItemRoot1->setChild( 0 , 0 , new QStandardItem( QStringLiteral( "child" ) ) );
pItemRoot1->setChild( 0 , 1 , new QStandardItem( QStringLiteral( "I'm child" ) ) );
//second
pItemRoot1->setChild( 1 , 0 , new QStandardItem( QStringLiteral( "child1" ) ) );
//
pModel->appendRow( pItemRoot1 );
//
QStandardItem* pItemRoot2 = new QStandardItem( QStringLiteral( "root2" ) );
pItemRoot2->setChild( 0 , 0 , new QStandardItem( QStringLiteral( "child" ) ) );
pItemRoot2->setChild( 0 , 1 , new QStandardItem( QStringLiteral( "I'm child" ) ) );
//
pModel->appendRow( pItemRoot2 );
//
ui->treeView->setModel( pModel );
//event bind
connect( ui->addRootItemButton , &QPushButton::clicked , this , &MainWindow::onAddRootItemButtonClicked );
connect( ui->addChildItemButton , &QPushButton::clicked , this , &MainWindow::onAddChildItemButtonClicked );
connect( ui->removeButton , &QPushButton::clicked , this , &MainWindow::onRemoveButtonClicked );
}
程式的開頭會產生"QStandardItemModel"，這個類別負責儲存樹的節點資料，透過"setHorizontalHeaderLabels()"來新增欄位名稱，接著是新增節點，節點的類別是"QStandardItem"，透過"setChild()"來新增子節點，最後透過"appendRow()"加到"QStandardItemModel "裡，"root2"節點如"root1"節點一樣就不再解釋，接著透過"setModel"將"QStandardItemModel "綁定到 TreeView ，最後是三個功能按鍵的事件綁定。
三個功能鍵的程式如下
void MainWindow::onAddRootItemButtonClicked( bool enabled )
{
QStandardItemModel* pModel = (QStandardItemModel*)ui->treeView->model();
pModel->appendRow( new QStandardItem( QStringLiteral( "add root item" ) ) );
}
void MainWindow::onAddChildItemButtonClicked( bool enabled )
{
QModelIndex index = ui->treeView->currentIndex();
QStandardItemModel* pModel = (QStandardItemModel*)ui->treeView->model();
if( index.isValid() )
{
QStandardItem* pSelectedItem = pModel->itemFromIndex( index );
pSelectedItem->appendRow( new QStandardItem( QStringLiteral( "add child item" ) ) );
}
}
void MainWindow::onRemoveButtonClicked( bool enabled )
{
QModelIndex index = ui->treeView->currentIndex();
QStandardItemModel* pModel = (QStandardItemModel*)ui->treeView->model();
if(index.isValid() )
{
pModel->removeRow( index.row() , index.parent() );
}
}
先看到"Add root item"的部分， TreeView 可以透過"model()"來取得"QStandardItemModel"，透過"appendRow()"就可以直接新增節點在根。"Add child item"的部分因為是在目前選取的節點下新增子節點，所以透過"currentIndex()"取得選擇的節點索引，但要考慮他可能是無效的!因為可能沒有選擇任何節點，只要透過"isValid()"就可以驗證，驗證有效後要透過這個索引來取得"QStandardItem"，這個時候用"itemFromIndex()"就可以取得，取得後直接透過"appendRow()"來加到該節點的子節點，最後看到"Remove"，和"Add child item"一樣是對當下所選取的節點做操作，取得並驗證有效的索引後可以直接用"removeRow()"來刪除節點。
