2020年7月7日 星期二

Slider 的基本應用

Slider 的基本應用

前言

  應用程式常常需要改變數值,如果用文字輸入就需要作容錯的機制,這時就需要 Slider 這個 widget ,這次會說明在 UI 編輯器裡編輯與用程式來編輯的作法,在此做個紀錄。

內容

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

圖中左側有 Slider 在工具箱的位置, Slider 分為 Horizontal slider 與 Vertical slider 。執行結果如下
範例的執行結果

範例有兩個 Slider ,左側的是 Horizontal slider ,值域是 0 ~ 99 ,右側的是 Vertical slider  ,值域是 -100 ~ 99 。在設計介面時,要注意 Vertical slider 的預設方向是由上到下,如果要改變方向可以改變"InvertedControls" ,如下圖
修改 Slider 的屬性

如果要改變值域可以修改"minimun"與"maximun"。

  接著來看看程式的操作,先看到 MainWindow::MainWindow() ,程式碼如下
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
  ui->setupUi(this);
  //
  int value1 = 50;
  ui->horizontalSlider->setValue( value1 );
  ui->value1->setText( QString::number( value1 ) );
  //
  int value2 = 99;
  ui->verticalSlider->setValue( value2 );
  ui->value2->setText( QString::number( value2 ) );
  //
  connect( ui->horizontalSlider , &QSlider::valueChanged , this , &MainWindow::onHorizontalSliderValueChanged );
  connect( ui->verticalSlider , &QSlider::valueChanged , this , &MainWindow::onVerticalSliderValueChanged );
}

程式會在開頭設定 Slider 的數值與同步對應的 Label , Horizontal slider 同步的數值是 50
, Vertical slider  同步的數值則是 99 。接著是綁定 QSlider::valueChnaged () 事件來同步顯示數值,綁法就是一般的事件綁法。事件觸發的範例如下
void MainWindow::onHorizontalSliderValueChanged(int value)
{
  //Sync value to label
  ui->value1->setText( QString::number( ui->horizontalSlider->value() ) );
}

void MainWindow::onVerticalSliderValueChanged(int value)
{
  //Sync value to label
  ui->value2->setText( QString::number( ui->verticalSlider->value() ) );
}

事件觸發時透過 QSlider::value() 來取得目前的數值,接著設定到對應的 Label 就完成同步了,Function 的引數"value"其實就是 Slider 目前的數值,用這個同步也可以。

  Slider 用起來相當簡單,但不幸的只能對應資料型態為"Int",如果要對應數值型態為"float" 的話就要用別的 widget 才行,下次再來介紹。

參考資料

[ doc.qt.io ] QSlider Class

相關文章與資料

[ GitLab ] HelloQt

沒有留言:

張貼留言