2020年7月27日 星期一

DateTimeEdit 的基本應用

DateTimeEdit 的基本應用

前言

  在應用程式中有時會需要日期與時間的輸入, Qt 提供了 DateTimeEdit 來解決輸入日期與時間,在此把學習的過程做個紀錄。

內容

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

圖中左側有 DateTimeEdit 在工具箱的位置,執行結果如下
範例的執行結果


範例會有兩個 DateTimeEdit ,上方使用 12 小時的方式來顯示,下方使用 24 小時的方式來顯示,可以透過 DateTimeEdit  的屬性來改變, DateTimeEdit  的屬性如下圖
DateTimeEdit 的屬性

如圖所標示的"displayFormat",透過改變該屬性就可以改變顯示的格式,顯示格式可參考下圖
官方網站的格式說明截圖

接著看程式的操作,看到 MainWindow::MainWindow() ,程式碼如下
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
  ui->setupUi(this);
  //
  connect( ui->dateTimeEdit1 , &QDateTimeEdit::dateTimeChanged , this , &MainWindow::onDateTimeEdit1dateTimeChanged );
  connect( ui->dateTimeEdit2 , &QDateTimeEdit::dateTimeChanged , this , &MainWindow::onDateTimeEdit2dateTimeChanged );

  //
  ui->dateTimeEdit1->setDate( QDate( 2020 , 6 , 6 ) );
  ui->dateTimeEdit1->setTime( QTime( 18 , 30 ) );
}

程式的開頭對兩個 DateTimeEdit 做事件綁定,接著會對上方的 DateTimeEdit 直接對 Date (日期) 與 time (時間) 做輸入,分別透過 setDate() 與 setTime() ,參數很直覺就不多做說明,事件的程式碼如下
void MainWindow::onDateTimeEdit1dateTimeChanged(const QDateTime &datetime)
{
  int y,m,d;
  ui->dateTimeEdit1->date().getDate(&y,&m,&d);
  qDebug( "New dateTimeEdit1's date:%ld_%ld_%ld" , y , m , d);
  //
  qDebug( "New dateTimeEdit1's time:%ld_%ld_%ld" ,
    ui->dateTimeEdit1->time().hour(),
    ui->dateTimeEdit1->time().minute(),
    ui->dateTimeEdit1->time().second() );

}

void MainWindow::onDateTimeEdit2dateTimeChanged(const QDateTime &datetime)
{
  int y,m,d;
  ui->dateTimeEdit2->date().getDate(&y,&m,&d);
  qDebug( "New dateTimeEdit2's date:%ld_%ld_%ld" , y , m , d);
  //
  qDebug( "New dateTimeEdit2's time:%ld_%ld_%ld" ,
    ui->dateTimeEdit2->time().hour(),
    ui->dateTimeEdit2->time().minute(),
    ui->dateTimeEdit2->time().second() );

}

取得 date 是透過 getDate() 來取得,不過也可以透過 year() 、 month() 與 day() 來個別取得,time 的取得分別透過 hour() 、 minute() 與 second() 來取得,要注意 hour() 內定是 24 小時不管顯示模式是否為 12 小時顯示或是 24 小時顯示。

參考資料

[ doc.qt.io ] QDateTimeEdit Class

相關文章與資料

[ GitLab ] HelloQt

2020年7月21日 星期二

在 SpinBox 使用 float 數值

在 SpinBox 使用 float 數值

前言

  在先前的 SpinBox 的基本應用 裡提到了 SpinBox 要使用 float 的數值的作法與 Slider 不一樣,這次就來學習如何使用,在此把學習的過程做個紀錄。

內容

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

SpinBox 要使用 float 的數值的話要使用 DoubleSpinBox ,圖中左側為 DoubleSpinBox 在工具箱的位置。執行結果如下
範例的執行結果

在設計介面看到 DoubleSpinBox  的屬性如下
DoubleSpinBox 的屬性

屬性中的"decimals"表示精度,預設是 2 ,也就是小術後的兩位數,要注意自己輸入的數值也會被精度影響。

  接著看程式的操作,看到 MainWindow::MainWindow() ,程式碼如下
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
  ui->setupUi(this);
  //
  connect( ui->doubleSpinBox , QOverload<double>::of(&QDoubleSpinBox::valueChanged) , this , &MainWindow::onDoubleSpinBoxValueChanged );
  //
  ui->doubleSpinBox->setValue( 50.5 );
}

這個部分的用法和 SpinBox 是一樣的,只是數值型態為 double ,事件的實現如下
void MainWindow::onDoubleSpinBoxValueChanged(double vlaue)
{
  qDebug( "new value:%.2lf" , ui->doubleSpinBox->value() );
}

這個部分的用法也和 SpinBox 一樣就不再說明。

參考資料

[ doc.qt.io ] QDoubleSpinBox

相關文章與資料

[ GitLab ] HelloQt
SpinBox 的基本應用

2020年7月14日 星期二

SpinBox 的基本應用

SpinBox 的基本應用

前言

  在先前的 Slider 的基本應用 裡介紹了 Slider 可以應用於整數的輸入,但如果數值的範圍大時,要拖到指定的數值時會很花時間,這時候 SpinBox 會比較適合,在此把學習的過程做個紀錄。

內容

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

圖中左側有 SpinBox 在工具箱的位置,執行結果如下
範例的執行結果

在設計介面可以看到和 Slider 相似的屬性,如下圖
SpinBox 的屬性

用法和 Slider 差不多,這就不多做解說。

  接著看程式的操作,看到 MainWindow::MainWindow() ,程式碼如下
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
  ui->setupUi(this);
  //
  connect( ui->spinBox , QOverload<int>::of( &QSpinBox::valueChanged ), this , &MainWindow::onSpinBoxValueChanged );
  //
  ui->spinBox->setValue( 50 );
  //
}

程式的開頭做了事件綁定,要注意 valueChanged() 綁定要經過轉型的動作,接著透過 setValue() 來設定 SpinBox 的數值,事件的程式碼如下
void MainWindow::onSpinBoxValueChanged(int value)
{
  qDebug( "new value:%ld" , ui->spinBox->value() );
}

透過 value() 來取得當前的數值,也可以從引數的 value 來取得。

  SpinBox 的好處是可以直接受透過輸入來設定數值,用起來也相單的簡單,但對 Float 數值的解決方案和 Slider 不太一樣,下一篇會做個說明。

參考資料

[ doc.qt.io ] QSpinBox Class

相關文章與資料

[ GitLab ] HelloQt
Slider 的基本應用

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