寫成前面：做了將近5年的IOS開發(fā)，忽然間轉(zhuǎn)行做Qt很是不適應(yīng)，而且關(guān)于Qt的資料也比較少，很多看似特別簡單的問題都會查半天。雖然剛開始就做好了踩坑的準(zhǔn)備，但在真正開始著手做的時候還是有種崩潰的感覺。因為沒有太多時間來系統(tǒng)化學(xué)習(xí)，所以就把項目過程中遇到的技術(shù)點寫來記錄一下。

1.扁平化的Window窗口

• 不顯示標(biāo)題欄 flags: Qt.FramelessWindowHint，這種狀態(tài)下窗口就不能拖動了，需要自己實現(xiàn)

  import QtQuick 2.0
  import QtQuick.Window 2.2
  MouseArea {
      property Window targetWindow
      anchors.fill: parent
      property point clickPostion
      onPressed: {
          clickPostion = Qt.point(mouseX,mouseY)
          console.log(clickPostion)
      }
      onPositionChanged: {
          var delatPosition = Qt.point(mouseX-clickPostion.x,mouseY-clickPostion.y)
          targetWindow.x += delatPosition.x;
          targetWindow.y += delatPosition.y;
      }
  }
  

• window無法添加圓角效果，可以將color設(shè)置為“transparent”再添加一個Rectangle上去，如果看不到效果需要設(shè)置一下visable屬性為true

2.Qt二維碼生成

• 下載第三方庫libqrencode，然后按照github示例在資源文件目錄下使用終端執(zhí)行如下命令生成config.h文件

  ./configure
  make
  sudo make install
  

• 將包括config.h在內(nèi)的.c和.h文件共21個文件導(dǎo)入工程，刪除qrenc.c文件。

• 在pro文件中添加宏DEFINES +=HAVE_CONFIG_H

• 集成完畢，編輯

• 創(chuàng)建一個c++類，生成二維碼圖片QImage,畫的代碼github上有很多示例，我也忘了在哪扒出來的了，貼出代碼

  void QRCodeMaker::make(){
      QImage image(this->_size, QImage::Format_RGB32);
      image.fill(QColor("black"));
      
      QPainter painter(&image);
      if(!painter.isActive()){
      }else{
          QRcode *qrCode = QRcode_encodeString(this->_data.toUtf8().data(), 1, QR_ECLEVEL_H, QR_MODE_8, true);
          if(!qrCode){
              QColor error("white");
              painter.setBrush(error);
              painter.setPen(Qt::NoPen);
              painter.drawRect(0, 0, image.width(), image.height());
              painter.end();
          }else{
              QColor colorForPoint("black");
              QColor colorForBackgroud("white");
              //先畫背景
              painter.setBrush(colorForBackgroud);
              painter.setPen(Qt::NoPen);
              painter.drawRect(0, 0, image.width(), image.height());
              //再畫二維碼圖案
              painter.setBrush(colorForPoint);
              const double &&s = ( qrCode->width > 0 ) ? ( qrCode->width ) : ( 1 );
              const double &&aspect = image.width() / image.height();
              const double &&scale = ( ( aspect > 1.0 ) ? image.height() : image.width() ) / s;
              for ( int y = 0; y < s; ++y )
              {
                  const int &&yy = static_cast< int >( y * s );
                  for( int x = 0; x < s; ++x )
                  {
                      const int &&xx = yy + x;
                      const unsigned char &b = qrCode->data[xx];
                      if( b & 0x01 )
                      {
                          const double rx1 = x * scale, ry1 = y * scale;
                          QRectF r( rx1, ry1, scale, scale );
                          painter.drawRects( &r,1 );
                      }
                  }
              }
              QRcode_free( qrCode );
              painter.end();
          }
      }
     //自定義一個ImageProvider類，將圖片扔進去，以供qml獲取
      ImageProvider *provider = ImageProvider::getInstance();
      provider->img = image;
      //發(fā)個信號出去
      emit refreshImage();
  }
  

3.使c++的QImage可以供qml使用

• 基于QQuickImageProvider創(chuàng)建一個子類如ImageProvider，并重寫兩個方法requestPixmap和requestImage，以及成員變量QImage img

• 寫一個單例static ImageProvider* getInstance()，因為添加provider要在main函數(shù)中寫(或許可以在其他地方？剛接觸qt不是很清楚，暫且只能這樣用了)，后續(xù)給provider設(shè)置圖片時也要給這個對象。(或許有其它方案~)

• 在main.cpp中將imageprovider添加到engine

    ImageProvider *imageprovier = ImageProvider::getInstance();
    engine.addImageProvider("imageprovider", imageprovier);
  

4.在qml中使用c++的方法

• 在需要暴露出去的c++中的方法前面使用Q_INVOKABLE關(guān)鍵字修飾，如果是變量則需要使用Q_PROPERTY并同時實現(xiàn)READ和WRITE方法，還有一個NOTIFY可用可不用，例如

  class QRCodeMaker  : public QObject
  {
      Q_OBJECT
      Q_PROPERTY(QSize qrSize READ qrSize WRITE setQrSize)
      Q_PROPERTY(QString qrData READ qrData WRITE setQrData)
  public:
       explicit QRCodeMaker();
      ~QRCodeMaker();
  
      QSize qrSize();
      void setQrSize(QSize size);
  
      QString qrData();
      void setQrData(QString data);
  
      Q_INVOKABLE void make();
  private:
     QSize _size;
     QString _data;
  signals:
     void refreshImage();
  public slots:
  };
  

• main.cpp中引入要注冊的頭文件，在main函數(shù)注冊qmlRegisterType<QRCodeMaker>("QRenCode", 1, 0 , "QRCodeMaker");；QRCodeMaker是c++里面的Class名，QRenCode就是在qml中使用的類名，1和0代表版本號

• 在qml文件中引入import QRenCode 1.0，使用示例

  QRCodeMaker {
          id:maker
          qrSize: Qt.size(200,200)
          qrData: "*"
          onRefreshImage: {
              qrCodeImage.source = "image://imageprovider/"                
          }
      }