2020年9月15日 星期二

在 Qt 環境使用 JavaScript

在 Qt 環境使用 JavaScript

前言

  Qt 提供使用 JavaScript 的環境,但需要經過一些設定才能使用,為了怕日後忘記怎麼設定,在此作個紀錄。

內容

  先到 [ GitLab ] HelloQt 下載範例,這次應用的專案路徑
(HelloQt' directory)/JSEngine/Basic,執行結果如下
範例的執行結果

範例的輸入對話框可以輸入 JavaScript 的程式碼,按下右下的"Run"按鈕執行程式。在開始看程式碼之前要先看到專案檔,在開頭可以看到以下
QT       += core gui qml

紅字的部分是要自己加的,這就是使用 JavaScript 的前置作業。

  看到程式碼宣告的部分,如下
#include <QMainWindow>
//
#include <QJSEngine>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
  Q_OBJECT

public:
  MainWindow(QWidget *parent = nullptr);
  ~MainWindow();

protected slots:
  void onPushButtonClicked(bool clicked);
private:
  Ui::MainWindow *ui;
  //
  QJSEngine m_cJSEngine;
};

Qt 要使用 JavaScript 是透過 QJSEngine 這個類別來處理,也就是成員"m_cJSEngine",在使用這個類別需要先 include "QJSEngine"。範例會需要使用到  TextEdit ,如果不熟悉如何使用可以參考 TextEdit 的基本應用。接著就看到實作的部分,看到 MainWindow::MainWindow() ,程式碼如下
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
  ui->setupUi(this);
  //
  connect( ui->pushButton , &QPushButton::clicked , this , &MainWindow::onPushButtonClicked );
  //
  m_cJSEngine.installExtensions( QJSEngine::ConsoleExtension );
  //
  ui->textEdit->setText( tr("console.log('Hello world')") );
}

開頭先綁定"Run"按鈕的事件,接著會喚起 QJSEngine::installExtensions() ,這行可以讓 QJSEngine 支援 console 相關的 Funciton ,最後是設定 TextEdit 給予預設的程式碼,接著來看按鈕事件的程式碼,如下
void MainWindow::onPushButtonClicked(bool clicked)
{
  QJSValue result = m_cJSEngine.evaluate( ui->textEdit->toPlainText() );
  if( result.isError() )
  {
    //
    QJSValue errorStr = result.property( tr("stack") );
    //Filter format string "stack:@:"
    QString errorLine = errorStr.toString().mid(8);
    //
    qDebug( "Error at line(%s) %s" , errorLine.toLocal8Bit().data() ,result.toString().toLocal8Bit().data() );
  }

}

開頭會透過 QJSEngine::evaluate() 來執行結果,引數是目前 TextEdit 的內容,這就幾乎等同在 JavaScript 裡喚起 eval() ,看到回傳的"result",類別為 QJSValue ,其實就 JavaScript 的變數,範例透過喚起 QJSValue::isError() 來確定是否發生 Exception ,接著取出"stack"這個 Property 
,取出來的變數類別依舊是 QJSValue ,這個變數會用來取得當 Exception 發生的行數,但他有一點不完美,它的內容是一個格式的文字,所以透過 mid() 來過濾掉開頭的格式文字,最後過濾完的行樹就會存在"errorLine",最後顯示偵錯訊息的部分,行數是"errorLine",而錯誤的訊息就直接存在"result",所以透過 QJSValue::toString() 就可以把錯誤訊息拿出來。

參考資料


相關文章與資料

2020年9月8日 星期二

在 Qt 使用 Direct3D10 來繪圖

在 Qt 使用 Direct3D10 來繪圖

前言

  在之前的 特製 Widget 裡有提到如何特製一個 Widget ,利用 Qt 提供的繪圖來繪製,如果要用 Direct3D 來繪圖可以嗎?答案是肯定的,在 [ github.com ] QtDirect3D 裡有提供完整的範例,但由於該專案的使用習慣跟我的習慣不太一樣,所以我將參照了該專案的範例做了一個範例,在此把學習的過程做個紀錄。

內容

  先到 [ GitLab ] HelloQt 下載範例,這次應用的專案路徑
(HelloQt' directory)/Widget/CustomDirect3D10Widegt,執行結果如下
範例的執行結果

畫面上的藍色區塊是用 Direct3D10 來繪製的一個特製的 Widget ,如果不熟悉如何特製 Widget 可以參考 特製 Widget 。

  為何使用 Direct3D10 ?這個理由只是因為 Direct3D10 的初始化流程較為簡單,可以用比較少的程式碼看到結果,方便於理解 Qt 是如何跟 Direct3D 合併使用。

  接著來看到特製的 Widget 的部分,宣告的程式碼如下
#include <QWidget>
#include <QTimer>
#include <QEvent>
//
#include <exception>
//
#include <d3d10.h>
#include <DirectXMath.h>
#include <D3Dcompiler.h>

class Direct3D10Widget : public QWidget
{
  Q_OBJECT
public:
  explicit Direct3D10Widget(QWidget *parent = nullptr);
  ~Direct3D10Widget();
  void release();
private:
  bool event(QEvent * event) override;
  void showEvent(QShowEvent * event) override;
  QPaintEngine *paintEngine() const override;
  void paintEvent(QPaintEvent * event) override;
  void resizeEvent(QResizeEvent * event) override;
signals:
  void widgetResized();
  void rendered();
  void d3dReady();
private Q_SLOTS:
  void onFrame();
  void onReset();
private:
  bool m_bIsTimerStart;
  QTimer m_cFrameTimer;
  //
  ID3D10Device* m_pDevice;
  IDXGISwapChain* m_pSwapChain;
  ID3D10RenderTargetView* m_pRTView;

};

比上次的 特製 Widget 還要複雜不少,這次需要一個  Timer 來做為畫面的刷新基礎,這部分不會太難理解,就是每隔一段時間觸發事件來繪圖,也就是"m_cFrameTimer", Direct3D 的初始化整個程式只需做一次,會在某個事件裡做檢查,所以需要"m_bIsTimerStart",剩下的三個成員就是 Direct3D 的相關成員。

  實作的部分先看到 Direct3DWidget::Direct3DWidget() ,程式碼如下
Direct3D10Widget::Direct3D10Widget(QWidget *parent) :
  QWidget(parent),
  m_bIsTimerStart(false),
  m_pDevice(nullptr),
  m_pSwapChain(nullptr),
  m_pRTView(nullptr)
{
  QPalette pal = palette();
  pal.setColor( QPalette::Background, Qt::black );
  setAutoFillBackground( true );
  setPalette( pal );
  //
  setFocusPolicy( Qt::StrongFocus );
  setAttribute( Qt::WA_NativeWindow );
  //
  setAttribute( Qt::WA_PaintOnScreen );
  setAttribute( Qt::WA_NoSystemBackground );
}

這裡設定 Widget 的預設的顏色與必要的屬性,接著看到 Direct3DWidget::showEvent(),程式碼如下
void Direct3D10Widget::showEvent(QShowEvent *event)
{
  if(!m_bIsTimerStart)
  {
    //
    DXGI_SWAP_CHAIN_DESC sd = {};
    sd.BufferCount = 2;
    sd.BufferDesc.Width = width();
    sd.BufferDesc.Height = height();
    sd.BufferDesc.Format = DXGI_FORMAT_R8G8B8A8_UNORM;
    sd.BufferDesc.RefreshRate.Numerator = 60;
    sd.BufferDesc.RefreshRate.Denominator = 1;
    sd.Flags = DXGI_SWAP_CHAIN_FLAG_ALLOW_MODE_SWITCH;
    sd.BufferUsage = DXGI_USAGE_RENDER_TARGET_OUTPUT;
    sd.OutputWindow = reinterpret_cast<HWND>(winId());
    sd.SampleDesc.Count = 1;
    sd.SampleDesc.Quality = 0;
    sd.Windowed = TRUE;
    sd.SwapEffect = DXGI_SWAP_EFFECT_FLIP_SEQUENTIAL;

    UINT iCreateFlags = 0;
#if defined(DEBUG) || defined(_DEBUG)
    iCreateFlags |= D3D10_CREATE_DEVICE_DEBUG;
#endif
    auto hr = D3D10CreateDeviceAndSwapChain(NULL, D3D10_DRIVER_TYPE_HARDWARE,
                                         NULL, iCreateFlags,
                                         D3D10_SDK_VERSION, &sd,
                                         &m_pSwapChain, &m_pDevice);
    if (FAILED(hr))
    {
      throw std::runtime_error("D3D10CreateDeviceAndSwapChain() has error");
    }
    //
    onReset();
    emit d3dReady();
    //
    connect(&m_cFrameTimer, &QTimer::timeout, this, &Direct3D10Widget::onFrame);
    m_cFrameTimer.start(16);
    m_bIsTimerStart=true;
  }
  //
  QWidget::showEvent(event);
}

這個事件會在 Qt 需要更新畫面時啟動, Diretc3D 的初始化就放在這裡,但由於這個事件不只觸發一次,所以需要"m_bIsTimerStart"來輔助, Direct3D 初始化完後會喚起 onRest() ,這個 Function 的功用待會再說明,接著觸發 d3dReady() ,這是給使用 Widget 時綁定的事件,接著就綁定 Timer 的事件,並透過 start() 來啟動。看到 Direct3DWidget::resizeEvent() ,程式碼如下
void Direct3D10Widget::resizeEvent(QResizeEvent *event)
{
  if( m_bIsTimerStart )
  {
    onReset();
    emit widgetResized();
  }
  //
  QWidget::resizeEvent( event );
}

這個事件會發生在 Widget 的大小改變時,一樣會喚起 onResst() ,並觸發 widgetResized()。接著看到 Direct3DWidget::onFrame() ,這個 Function 會在 Timer 觸發,程式碼如下
void Direct3D10Widget::onFrame()
{
  //
  const float clearColor[ 4 ] = { 0.0f , 0.0f , 1.0f , 1.0f  };
  m_pDevice->OMSetRenderTargets( 1, &m_pRTView, nullptr );
  m_pDevice->ClearRenderTargetView( m_pRTView , clearColor );
  //
  emit rendered();
  //
  if ( FAILED ( m_pSwapChain->Present( 1, 0 ) ) )
  {
    onReset();
  }
}

這裡就是 Direct3D 常見的把畫面清除成指定顏色的程式碼,並且觸發 rendered() ,當 Present() 失敗時喚起 onReset()。最後看到之前一直沒解釋的 Direct3DWidget::onReset() ,程式碼如下
void Direct3D10Widget::onReset()
{
  ID3D10Texture2D* pBackBuffer;
  if( m_pRTView != nullptr )
  {
    m_pRTView->Release();
    m_pRTView = nullptr;
  }

  auto hr = m_pSwapChain->ResizeBuffers( 0, width() , height() , DXGI_FORMAT_UNKNOWN , 0 );
  if (FAILED( hr ) )
  {
    throw std::runtime_error("ResizeBuffers() has error");
  }
  hr = m_pSwapChain->GetBuffer( 0, IID_PPV_ARGS( &pBackBuffer ) );
  if (FAILED( hr ) )
  {
    throw std::runtime_error("GetBuffer() has error");
  }
  hr = m_pDevice->CreateRenderTargetView( pBackBuffer , nullptr , &m_pRTView );
  if (FAILED( hr ) )
  {
    throw std::runtime_error("CreateRenderTargetView() has error");
  }
  //
  if( pBackBuffer != nullptr )
  {
    pBackBuffer->Release();
    pBackBuffer = nullptr;
  }
  //
  qDebug("wiget resize");
}

這個部分是重新製作一塊跟目前 Widget 一樣大小的繪圖緩衝區,這個部分在一般的 Direct3D 範例是不會這樣用,因為範例幾乎都是固定大小的視窗,所以這邊的處理我是第一次看到,因為做成 Widget ,難免需要改變大小,所以這裡我個人認為是最重要的部分。

  最後一個小提醒,由於 Direct3D 只能在 Windows 平台工作,所以 Qt 專案的編譯器請選擇 MSVC ,由於選擇 MSVC ,所以可以用特別的方式鏈結(Link),如下
#pragma comment(lib, "d3d10.lib")

這個就是鏈結(Link)"d3d10.lib",但這個用法只能用在 MSVC ,正統的作法應該是在 Qt 的專案檔搭配平台的參數來鏈結(Link),如不清楚請參考 Qt 的專案檔 。

參考資料


相關文章與資料

2020年9月1日 星期二

在 TreeView 使用右鍵選單

在 TreeView 使用右鍵選單

前言

  在之前的 TreeView 的基本應用 裡簡單的操作 TreeView ,但 TreeView 很容易需要可以對選取的節點做操作,這個時候就需要使用到右鍵選單,在此把學習的過程做個紀錄。

內容

  先到 [ GitLab ] HelloQt 下載範例,這次應用的專案路徑
(HelloQt' directory)/TreeView/CustomMenu,執行結果如下
範例的執行結果

範例會產生基本的樹節點,在選取節點並按下右鍵可以跳出選單。

  接著來看看程式的操作,先看到 MainWindow::MainWindow() ,程式碼如下
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
, m_pTreeViewCustomMenu( NULL )
{
  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") ) );
  //
  pModel->appendRow( pItemRoot1 );
  //
  ui->treeView->setModel( pModel );

  //
  ui->treeView->setContextMenuPolicy( Qt::CustomContextMenu );

  //
  connect( ui->treeView , &QTreeView::customContextMenuRequested , this , &MainWindow::onTreeViewCustomMenu );

  //Set up custom menu
  m_pTreeViewCustomMenu = new QMenu( this );
  QAction* pAct1 = new QAction( "Action 1" , this );
  connect( pAct1 , &QAction::triggered , this , &MainWindow::onTreeViewAction1Trigger );
  m_pTreeViewCustomMenu->addAction( pAct1 );
  QAction* pAct2 = new QAction( "Action 2" , this );
  connect( pAct2 , &QAction::triggered , this , &MainWindow::onTreeViewAction2Trigger );
  m_pTreeViewCustomMenu->addAction( pAct2 );
  QAction* pAct3 = new QAction( "Action 3" , this );
  connect( pAct3 , &QAction::triggered , this , &MainWindow::onTreeViewAction3Trigger );
  m_pTreeViewCustomMenu->addAction( pAct3 );
}

先看到初始化的部分,裡面有個成員"m_pTreeViewCustomMenu",這是一個型別為"QMenu"的指標,這個類別其實就是 Qt 用來處理右鍵選單的類別,接著會程式開始製造樹的節點並綁定到 TreeView ,然後這點很重要, TreeView 能否對右鍵有反應是需要經過設定,預設值沒辦法,所以透過"setContextMenuPolicy()"來設定,設為後還要綁定事件,讓它可以在右鍵點選後觸發事件,最後的部分是對"m_pTreeViewCustomMenu"做初始化的動作,用法類似樹的結構,每個節點都是"QAction",範例連續產生 3 個"QAction",並個別對其綁定事件來觸發行為。

  接著來看事件的實作,程式碼如下
void MainWindow::onTreeViewCustomMenu( const QPoint& point )
{
  //
  m_pTreeViewCustomMenu->popup( ui->treeView->viewport()->mapToGlobal( point ) );
}

void MainWindow::onTreeViewAction1Trigger()
{
  qDebug( "Action1 triggered" );
}

void MainWindow::onTreeViewAction2Trigger()
{
  qDebug( "Action2 triggered" );
}
void MainWindow::onTreeViewAction3Trigger()
{
  qDebug( "Action3 triggered" );
}

在"onTreeViewCustomMenu()"裡直接透過"popup()"來顯示選單,事件本身雖然會傳送一個位址過來,但該位址並不能直接用,要經過"mapToGlobal()"轉換才能使用,"QAction"的事件的部分就單純地為個別顯示偵錯訊息,如果需要知道目前選取的節點可以參考 TreeView 的基本應用 裡的按鈕事件。

參考資料

[ doc.qt.io ] QTreeView Class
[ doc.qt.io ] QMenu Class

相關文章與資料

[ GitLab ] HelloQt
TreeView 的基本應用

2020年8月25日 星期二

TreeView 的基本應用

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()"來刪除節點。

參考資料

[ doc.qt.io ] QTreeView Class

相關文章與資料

[ GitLab ] HelloQt

2020年8月18日 星期二

在 Qt 的顯示中文偵錯訊息

在 Qt 的顯示中文偵錯訊息

前言

  在之前的 TextEdit 的基本應用 裡有使用 TextEdit 來顯示輸入的文字在偵錯訊息,但如果輸入中文會顯示亂碼,這次要解決這個問題。

內容

  這次使用到的範例可以到 [ GitLab ] HelloQt 下載範例,專案路徑
(HelloQt' directory)/TextEdit/Basic ,在範例裡顯示偵錯訊使用以下
void MainWindow::onPushButtonClicked(bool clicked)
{
  qDebug("TextEdit:%s",ui->textEdit->toPlainText().toLocal8Bit().data() );
}

如果 TextEdit 裡有中文的話會顯示亂碼,要解決這個問題可以透過 QDebug ,將範例改成以下
void MainWindow::onPushButtonClicked(bool clicked)
{
  //qDebug("TextEdit:%s",ui->textEdit->toPlainText().toLocal8Bit().data() );
  qDebug() << ui->textEdit->toPlainText();
}

使用的方法類似 C++ STL 字串,要使用時需要另外的 include ,如下
#include <QDebug>

參考資料

[ doc.qt.io ] QDebug Class

相關文章與資料

[ GitLab ] HelloQt
TextEdit 的基本應用

2020年8月10日 星期一

ProgressBar 的基本應用

ProgressBar 的基本應用

前言

  應用程式常常需要顯示進度, Qt 提供 ProgressBar 來解決,這次會說明在 UI 編輯器裡編輯與用程式來編輯的作法,在此做個紀錄。

內容

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

圖中左側標示 ProgressBar 在工具箱的位置。執行結果如下
範例的執行結果

範例會在程式開啟時設定 ProgressBar 為 85% ,由於有綁定事件,當數值被設定後會顯示相關偵錯訊息。接著看到 ProgressBar 的屬性,如下圖
ProgressBar 的屬性

注意"minimum"、"maximum"與"value",這三個屬性會決定最後顯示的百分比,算法是"value" / ("maximum" -  "minimum")。

在程式控制方面,看到 MainWindow::MainWindow() ,程式碼如下
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
  ui->setupUi(this);
  //
  connect( ui->progressBar , &QProgressBar::valueChanged , this , &MainWindow::onProgressBarValueChanged );
  //
  ui->progressBar->setValue(851);
}

程式的開頭會綁定事件,接著將"value"設成851,由於"minimum"與"maximum"分別為 0 與 1000 ,所以依據算法會得到 85% ,由於採用"int"為資料型態,所以小數以後會自動捨去,接著看到事件的部分
void MainWindow::onProgressBarValueChanged(int value)
{
  qDebug( "New value:%ld" , ui->progressBar->value() );
  //
  int newPersent =  ( ( ui->progressBar->value() - ui->progressBar->minimum() ) * 100) / (ui->progressBar->maximum() - ui->progressBar->minimum() );
  qDebug( "New persent:%ld" , newPersent );
}

"value"的部分很簡單直接透 value() 提取即可,但如果要拿出百分比的話就比較麻煩,因為 QProgressBar 不提供直接提取百分比,所以就只能自己算,算法雖然簡單,但程式很容易冗長,可以的話就寫成一個 function。

參考資料

[ doc.qt.io ] QProgressBar Class

相關文章與資料

[ GitLab ] HelloQt

2020年8月3日 星期一

特製 Widget

特製 Widget

前言

  Qt 的預設元件雖然很夠用,但有時需要自己特製 Widget ,該如何特製呢?這次會示範特製一個 Widget 並自制繪圖的部分,在此把學習的過程做個紀錄。

內容

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

圖中左側有這次會用的"Widget"在工具箱的位置。執行的結果如下
範例的執行結果


執行的結果會顯示一個黑色的方形,這正是範例特製的 Widget 。

  Qt 要特製 Widget  時事透過繼承"QWidget"這個類別來完成特製,所以要特製就要先新增一個繼承"QWidget"的類別,可以的話請透過精靈來加,步驟如下
新增檔案或專案

在工具列按下"新增檔案或專案",接著如下
新增類別檔案

如圖順序操作即可,接著如下
新增類別精靈

首先要先對類別命名,第二步驟選擇"Base class"為"QWidget",就著按下一步會問檔案受否需要版本控制,然後就新增完畢,範例已經新增"mywidget"這個類別,可以在檔案列表看到,如下
新增的類別檔案

只是新增類別只是可以在程式裡使用該類別,可以在設計介面拖拉出該 Widget 嗎?答案是可以的,在設計介面的工具箱拖拉一個Widget,拖好後在上面按下右鍵,如下
提升類別

按下"提升到...",接著看到以下
選擇要提升的類別

範例以新增好"mywidget"在圖中上方,如果要新增一個新的可以在下方"提升的類別名稱"輸入類別的名稱後按下右側的新增,就可以在上方看到新的 Widget ,選擇好要提升的 Widget 後再按下下方的"提升",就完成指名的特製 Widget,提升完後可以看到類別的名稱的改變,如下圖
提升後的類別名稱

  在新增完類別與在設計介面裡提升後,程式的部分要完成繪製一個黑色的方塊在 Widget 上,先看到 mywidget 的 header ,如下
#include <QWidget>

#include <QPainter>
class mywidget : public QWidget
{
  Q_OBJECT
public:
  explicit mywidget(QWidget *parent = nullptr);

protected:
  void paintEvent(QPaintEvent *event) override;
signals:

};

紅色的部分為手動新增的部分,由於要繪製,所以要覆寫 paintEvent() ,接著看實作的部分,如下
#include "mywidget.h"

mywidget::mywidget(QWidget *parent) : QWidget(parent)
{

}

void mywidget::paintEvent(QPaintEvent *event)
{
  QPainter painter( this );
  QPen pen( Qt::black );
  pen.setWidth( 4 );
  painter.setPen( pen );
  QRect rc( 4, 4, 112, 112 );
  painter.drawRect( rc );

}

紅色的部分為手動新增的部分,Qt  提供 QPainter 來處理繪圖的部分, QPen 則是筆刷,程式設寬度為"4",藉著設定到 QPianter 就可以控制方塊的線寬,接著命令 QPainter 繪製方塊就完成繪製。

參考資料

[ doc.qt.io ] QWidget Class

相關文章與資料

[ GitLab ] HelloQt