ComboBox 的基本應用

ComboBox 的基本應用

前言

  在應用程式中常常需要作出多選一的動作，在 Qt 可以用 ComboBox 來實現，這次會說明在 UI 編輯器裡編輯與用程式來編輯的作法，在此做個紀錄。

內容

  先到 [ GitLab ] HelloQt 下載範例，這次應用的專案路徑
(HelloQt' directory)/ComboBox/Basic，在 Qt Creator 開啟設計介面會看到以下

範例的設計介面

圖中的左下是 ComboBox 在工具箱的位置。執行結果如下

範例的執行結果

範例的 PushButton 是用來模擬讀取 ComboBox 的內容的情形，在按下後讀取 ComboBox 的內容顯示偵錯訊息，並在每次 ComboBox 的內容改變時也會顯示偵錯訊息。在設計介面雙擊 ComboBox 會出現編輯內容的介面，如下圖

ComboBox 的內容編輯介面

介面的左下方有新增與刪除選項的按鈕，中下方的按鍵可以控制選項的順序，用起來相當直覺簡單。

  接著來看看程式的操作，先看到 MainWindow::MainWindow() ，程式碼如下

MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
  ui->setupUi(this);
  //
  ui->comboBox->addItem("MyAddOption");
  ui->comboBox->insertItem(2,"MyInsertOption");
  //
  connect( ui->pushButton , &QPushButton::clicked , this , &MainWindow::onPushButton_Clicked );
  connect( ui->comboBox , QOverload<int>::of( &QComboBox::currentIndexChanged ) , this , &MainWindow::onComboBoc_CurrentIndexChanged );
  //Force select option by index
  //ui->comboBox->setCurrentIndex(1);

  //Force select option by string
  //ui->comboBox->setCurrentText("Option1");
}

開頭會先用程式的方式新增選選項，有分為"add"與"insert"，"add"就是加在最後很好理解，"insert"會多一個參數，就是 index ，這個 index 是指"第幾個選項"， ComboBox 的 index 指的是第幾個選項，從 0 開始編號，所以不存在重複的 index 的問題。事件綁定的部分範例在綁定 QComboBox::currentIndexChanged 的時候要經過類似轉型的動作，可以在 [ doc.qt.io ] QComboBox Class 裡找到說明，看到讀取 ComboBox 的內容的部分，以MainWindow::onPushButton_Clicked() 為例，程式碼如下

void MainWindow::onPushButton_Clicked(bool clicked)
{
  qDebug( "Result text:%s" , ui->comboBox->currentText().toLocal8Bit().data() );
  qDebug( "Result index:%ld" , ui->comboBox->currentIndex() );

}

讀取透過 currentText() 與 currentIndex() ，就如同字面上的意思，一個讀文字，另一個讀取索引，想當好懂。如果要透過程式來選擇 Combox 的選項可以用 setCurrentIndex() 與 setCurrentText() ，就如同字面的意思，一個透過 index 選擇另一個透過字串。

參考資料

[ doc.qt.io ] QComboBox Class

相關文章與資料

[ GitLab ] HelloQt