本文將講述Qt in Scala(JVM)開發梗概。

前言

一直有人問Qt的開發情況，希望有個感性的認識。一直也有整理這方面資料的沖動，但時間也很緊迫，所以長話短說。目前將目標鎖定Qt Jambi版本吧，熟悉了Qt以后，我對其C++版本的興趣也十分濃厚，所以，將來再慢慢整理吧。

本篇文章涉及的開發環境如下：windows xp sp2，JDK6u21，Scala 2.8.0 final，Qt Jambi LGPL 4.5.2_01，IDE選NetBeans吧！

列出Qt的文檔中心的幾個重要資源的鏈接入口：

◆Qt Jambi 4.5.2_01的文檔索引

◆API Javadoc

◆CSS樣式說明（內容彼此交叉，十分詳盡，你只需要有一點點的CSS基礎就能明白）

◆官方實例

◆Qt Jambi 4.5.2_01Binary for Windows 32-bit(點擊將自動下載)

關于Qt的點滴，我會以注釋的形式寫在代碼里面，畢竟都是寫代碼的，對注釋會比較敏感。

Hello Qt in Scala

package qt.demo  
 
import com.trolltech.qt.gui._  
 
object HelloQt {  
 
  def main(args: Array[String]): Unit = {  
    QApplication.initialize(args)  
    (new QLabel("Hello Qt")).show  
    QApplication.exec  
  }  
}  
 

可能上述代碼還能再度簡化一下，比如去掉new QLabel兩邊的括號（但可能會很怪異了）。這個很簡單吧，輸出結果如下圖：

QApplication是Qt的一個全局單例類，就把他看作是一個總控制中心吧。他是一個static類，通過調用QApplication.instance()方法，可獲得當前運行過程中的app實例。

QApplication.instance是一個全局控制實例，這里所定義的內容（可以定義的東西，詳細請看手冊），除非在實例具體某個對象時有具體設置，否則全局都按照instance的設置進行。當然，其實多數時候，我會用他來控制全局的樣式定義。

好吧，上述的例子實在簡單的有些惡心了，我們來些實際一點的東西：

package qt.demo  
 
import com.trolltech.qt.gui._  
import com.trolltech.qt.core.Qt._  
 
object CustomWindow {  
 
  val globalStyle = """  
* { font-family: Mircosoft Yahei; font-size: 12px; color: #333; }  
#mainWindow { border: 40px solid #ccc; border-image: url(classpath:qt/demo/resource/window.png) 40 stretch; }  
"""  
 
  def main(args: Array[String]): Unit = {  
    QApplication.initialize(args)  
    QApplication.instance.setStyleSheet(globalStyle)  
    val frame = new QFrame() {  
      this.setObjectName("mainWindow")  
      // 以下為窗體展現定制，應該在show之前調用  
      // show以后再調用，會令窗體crash，你需要再次show  
      this.setWindowFlags(WindowType.FramelessWindowHint)  
      this.setAttribute(WidgetAttribute.WA_TranslucentBackground, true)  
      // 由于設定了不使用windows窗體，所以，請手動結束多余的進程  
    }  
    frame.show()  
    QApplication.exec  
  }  
}  

截圖效果如下：

怎么樣，開始有點意思了吧？30行代碼連樣式，其實想做漂亮的界面，也不是那么難吧！

安裝Qt Jambi

回到最初點，首先還是要把環境搭建起來。先去上面的地址下載Qt Jambi 4.5.2_01Binary for Windows 32-bit，隨便解壓吧。解開目錄，里面有幾個值得一看的東西：

qtjambi.exe 這個僅僅是運行一個Demo示例，看看吧，里面很多東西都會給你帶來不錯的啟發。但不得不說，Qt原版的Demo，那叫一個炫啊，Java真受冷落。

designer.bat 這個是打開設計器的，實際設計器在這個目錄下的bin目錄里面。

qtjambi-4.5.2_01.jar

qtjambi-win32-msvc2005-4.5.2_01.jar 這兩個jar包是你在實際開發中需要使用的，你需要將這兩個庫引入到你的項目中。并且從文件名我們可以發現，他是使用vc2005(vc80)，如果你沒安裝vs2005補丁，快去裝一個吧。

好了，準備功夫就這么點，我們可以開始進一步的工作了！

填充基礎界面

好了，我們該開始往這樣一個界面里面加東西了，首先，他要有個標題欄，中間是他的視圖展示部分，當然了，我們還可以加一個底部的狀態條。實際上，使用設計器和標準的QMainWidget，我們能做得很好。但一方面我是代碼控，而另一方面，我覺得通過代碼，能展示更多感性方面的東西（透過Qt Jambi的Eclipse的插件，一個界面設計完成，它會自動幫你轉換為一個Java的類，所以，你無需過分擔心后續實際開發的復雜度。）。而且說實在的，他的設計器和Vs比，就差很多很多了。

既然有那么多想法，我們可以考慮給它添加一個Layout，哦，忘記說了，Qt遵循較為嚴格的對象機制，所有界面構造元素都繼承自QWidget，而Layout，則繼承自QLayout，而QLayout和QWidget則都來自QObject，當然，細分還有很多，但Layout和QWidget畢竟是大頭。

剛才展示的兩個例子中，QFrame和QLabel都繼承自QWidget，所以你可以對他們對Show，而不用考慮窗口，父容器，你對哪個QWidget的實例調用了show方法，它就會是一個獨立窗體，邏輯十分清晰。

Layout有兩種聲明方式（當然，new實例只有一種方式），所謂聲明是指和QWidget產生關聯。new QHBoxLayout(anyQWidget)，或者anyQWidget.setLayout(anyQLayout)。一個QWidget實例不能進行（關聯）兩次以上布局，當你第二次對它進行布局關聯時，系統會給你一個警告，但不會令程序或者窗體Crash。

package qt.demo  
 
import com.trolltech.qt.gui._  
import com.trolltech.qt.core.Qt._  
 
object CustomWindow {  
 
  //=======================// 全局樣式 //=======================//  
 
  val globalStyle = """  
* { font-family: Microsoft Yahei; font-size: 12px; color: #333; }  
#mainWindow { border: 32px solid #ccc; border-image: url(classpath:qt/demo/resource/window.png) 32 stretch; }  
#title { font-size: 13px; font-weight: bold; color: #000; }  
#body { border: 1px solid #ccc; }  
"""  
 
  //=======================// 主窗體 //=======================//  
  //  
  // 我們將frame變量轉移到這里  
  // lazy關鍵字，表示調用時才實現該變量值  
  lazy val frame = new QFrame() {  
    this.setObjectName("mainWindow")  
    // 以下為窗體展現定制，應該在show之前調用  
    // show以后再調用，會令窗體crash，你需要再次show  
    this.setWindowFlags(WindowType.FramelessWindowHint)  
    this.setAttribute(WidgetAttribute.WA_TranslucentBackground, true)  
    // 由于設定了不使用windows窗體，所以，請手動結束多余的進程  
  }  
 
  // 為了進一步分工明確，我又把layout也挪出來了  
  // 這里采用聲明關聯  
  // 一個layout會默認撐滿整個容器  
  lazy val frameLayout = new QVBoxLayout(frame) {  
    this.setMargin(0)  // Layout四邊的margin，當然你也可以用setContentsMargin來設定四邊的具體值  
    this.setSpacing(0) // 設定元件之間的間距  
  }  
 
  //=======================// 標題欄 //=======================//  
  //  
  // 要構造界面，未必需要全部都是widget  
  // layout也可以插入到layout中  
  lazy val titleLayout = {  
    val _layout = new QHBoxLayout // 這是一個內部變量，不在類變量中  
    // 讓他垂直居中，左對齊  
    _layout.setSpacing(5)  
    _layout.setAlignment(new Alignment(AlignmentFlag.AlignLeft, AlignmentFlag.AlignVCenter))  
    _layout.addWidget(titleIcon)  
    _layout.addWidget(titleText)  
    _layout // 這里等同于這個block return _layout  
  }  
 
  // 標題的元素構成  
  lazy val titleIcon = new QLabel {  
    this.setPixmap(getIcon.pixmap(18))  
    // 指定他的具體寬高  
    this.setFixedSize(20, 20)  
    // 讓該容器按照該寬高占位  
    this.setSizePolicy(QSizePolicy.Policy.Fixed, QSizePolicy.Policy.Fixed)  
  }  
  lazy val titleText = new QLabel("這是一個標題欄") {  
    this.setObjectName("title")  
    // 只指定具體高度  
    this.setFixedHeight(20)  
    // 他的水平方向會100%的撐開，垂直方向按指定的高度占位  
    this.setSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Fixed)  
  }  
 
  //=======================// body部分 //=======================//  
 
  lazy val body = {  
    val widget = new QWidget  
    widget.setObjectName("body")  
    widget.setSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding)  
    widget  
  }  
 
  //=======================// foot部分 //=======================//  
 
  lazy val foot = new QLabel("狀態欄") {  
    this.setSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Fixed)  
    this.setAlignment(new Alignment(AlignmentFlag.AlignRight, AlignmentFlag.AlignBottom))  
  }  
 
  //=======================// 快捷函數 //=======================//  
 
  def app = QApplication.instance  
 
  def getIcon = frame.style.standardIcon(QStyle.StandardPixmap.SP_MessageBoxInformation)  
 
  def main(args: Array[String]): Unit = {  
    QApplication.initialize(args)  
    app.setStyleSheet(globalStyle)  
    frameLayout.addLayout(titleLayout)  
    frameLayout.addWidget(body)  
    frameLayout.addWidget(foot)  
    frame.resize(370, 270) // 這里要計算樣式中border-width的寬度，實際上我們期望這個窗體的內容大小在300, 200  
    frame.show()  
    QApplication.exec  
  }  
}  
 

效果截圖：

從30行激增到100行，可能需要點耐性去讀。但整個窗體的初步效果已經看出來了，而且，很顯然，類似這樣的窗體，我們完全可以將他封裝成一個單獨的類。當然模擬一個完整的窗口，也許需要更多更多的代碼，但通過良性的封裝，能很好的解決代碼冗余的問題。

Qt的信號槽和事件

信號槽，是Qt中一個有趣的設定，這個也體現了Qt在Ui方面的一種經驗的積累。

首先給出最最簡單的信號槽的代碼樣例。

class ClickEvent(widget: QWidget) {  
   
  def doClicked(checked: Int) {  
    // 若干操作  
  }  
}  
 
val btn = new QPushButton()  
btn.clicked.connect(anyInstance, "doClicked(int)")  

好了，當你點擊了btn以后，他會自動執行doClicked方法。也許你會說，切，這有什么了不起的呢？如果要細說，恐怕不是一時半會能說的清楚的，大家也許還焦急著進一步完善剛才做出來的窗口。OK，我長話短說。

在Qt所有類的上層，Event接口，是由QObject去定義的，而QWidget實際上是繼承自QObject的。QObject::installEventFilter(QObject)，實際上是注冊事件的總入口。當然，在你每次實例一個QObject的時候，他已經默認的幫你為當前實例installEventFilter。這個方法實際上就是指派給具體哪個實例作為該對象的事件觀察者。

從installEventFileter以后，事件首先經過evnetFilter進行分發，event應該是同級的事件分發。在這兩個方法里，需要指定返回Boolean類型，實際上是對事件的攔截。

再其次，到各種種類繁多，因應具體類而產生的event入口，比如showEvent等等。在這個層面，事件經由上層的分發，已經不會再等待你返回結果（他是返回無類型的），雖然對于QEvent實例，有accept或者igroe，但實際上這個過程里，你已無法保證絕對控制事件的整體了，你只能控制經由上層分到你這一級以后的事情，可是上層做了什么，你不知道，也管不了。

在這個事件機制的基礎之下，信號槽似乎是處于整個事件機制的***端，但信號槽機制又有其主要特點。他是單向的，不管理該實例的全局狀態，他只關心他最關心（當然也是指派給他）的對象，這個（或若干個）對象往往是整個事件機制中最關鍵的一個狀態，他提供給你一個既不用單獨注冊一個QObject以從頭接管實例的全部事件，也不用利用override的方式重載事件聲明，即可利用信號槽，去做其他關聯操作的觸發。而無論他有或者無，不會對實例本身的狀態進行改變，所以他是一個松耦合、無歧義的接口。

而且，Qt提供給你自己擴展信號槽的機會，除了常規的Qt類可獲得信號槽以外，在你自定義的類中，也可以通過繼承自QSignalEmitter，來獲得信號槽機制的使用。

好了廢話一大堆，讓我們繼續干活，這次，我們添加一個關閉按鈕，并且，讓這個窗口可以被自由的拖動，而這也將是***將要完成的工作：

package qt.demo  
 
import com.trolltech.qt.gui._  
import com.trolltech.qt.core._  
import com.trolltech.qt.core.Qt._  
 
object CustomWindow {  
 
  //=======================// 全局樣式 //=======================//  
 
  val globalStyle = """  
* { font-family: Microsoft Yahei; font-size: 12px; color: #333; }  
#mainWindow { border: 32px solid #ccc; border-image: url(classpath:qt/demo/resource/window.png) 32 stretch; }  
#title { font-size: 13px; font-weight: bold; color: #000; }  
#body { border: 1px solid #ccc; }  
#closeBtn { border: 0; background: none; font-weight: bold; color: red; }  
"""  
 
  //=======================// 主窗體 //=======================//  
  // 其實我們可以將這個Frame作為一個單獨類封裝一下  
  class DemoFrame extends QFrame {  
 
    this.setObjectName("mainWindow")  
    // 以下為窗體展現定制，應該在show之前調用  
    // show以后再調用，會令窗體crash，你需要再次show  
    this.setWindowFlags(WindowType.FramelessWindowHint)  
    this.setAttribute(WidgetAttribute.WA_TranslucentBackground, true)  
 
    val frameLayout = new QVBoxLayout(this) {  
      this.setMargin(0)  // Layout四邊的margin，當然你也可以用setContentsMargin來設定四邊的具體值  
      this.setSpacing(0) // 設定元件之間的間距  
    }  
 
    private def frame = this 
 
    //=======================// 標題欄 //=======================//  
 
    val titleLayout = new QHBoxLayout {  
      setSpacing(5)  
      setAlignment(new Alignment(AlignmentFlag.AlignLeft, AlignmentFlag.AlignVCenter))  
    }  
 
    // 標題的元素構成  
    val titleIcon = new QLabel {  
      this.setPixmap(getIcon.pixmap(18))  
      // 指定他的具體寬高  
      this.setFixedSize(20, 20)  
      // 讓該容器按照該寬高占位  
      this.setSizePolicy(QSizePolicy.Policy.Fixed, QSizePolicy.Policy.Fixed)  
    }  
    val titleText = new QLabel("這是一個標題欄") {  
      this.setObjectName("title")  
      // 只指定具體高度  
      this.setFixedHeight(20)  
      // 他的水平方向會100%的撐開，垂直方向按指定的高度占位  
      this.setSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Fixed)  
      // 我們從這里注冊title拖動  
      // 其實***是title首先是個QWidget，那么我們可以對整個title進行拖動，請原諒我的懶惰  
      val dragPosition = new QPoint()  
      // 鼠標單擊放下  
      override def mousePressEvent(event: QMouseEvent) {  
        if (event.button() == MouseButton.LeftButton) {  
          val topLeft = frame.frameGeometry.topLeft  
          dragPosition.setX(event.globalPos.x - topLeft.x)  
          dragPosition.setY(event.globalPos.y - topLeft.y)  
          event.accept  
        }  
      }  
 
      override def mouseMoveEvent(event: QMouseEvent) {  
        if (event.buttons().isSet(MouseButton.LeftButton)) {  
          val topLeft = frame.frameGeometry.topLeft  
          val p = new QPoint(event.globalPos().x() - dragPosition.x,  
                             event.globalPos().y() - dragPosition.y)  
          frame.move(p)  
          event.accept  
        }  
      }  
    }  
 
    val closeBtn = new QPushButton("X")  
    closeBtn.setObjectName("closeBtn")  
    closeBtn.setFixedSize(15, 15)  
    // 其實這里可以寫成 this.clicked.connect(QApplication.instance, "quit()")  
    // close表示關閉frame窗口，quit則是整個程序退出  
    // qt內部會做調整，當你close窗口，又沒有其他窗口在show或者準備show，他也會自動進行quit  
    closeBtn.clicked.connect(this, "close()")  
 
    override def showEvent(event: QShowEvent) {  
      val g = this.frameGeometry  
      val (w, h) = (g.width + 70, g.height + 70)  
      this.setFixedSize(w, h) // 根據樣式重設大小  
      closeBtn.move(w - 45, 30)  
    }  
 
    //=======================// body部分 //=======================//  
 
    val body = {  
      val widget = new QWidget  
      widget.setObjectName("body")  
      widget.setSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding)  
      widget  
    }  
 
    //=======================// foot部分 //=======================//  
 
    val foot = new QLabel("狀態欄") {  
      this.setSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Fixed)  
      this.setAlignment(new Alignment(AlignmentFlag.AlignRight, AlignmentFlag.AlignBottom))  
    }  
 
    this.init()  
 
    def init() {  
      titleLayout.addWidget(titleIcon)  
      titleLayout.addWidget(titleText)  
      frameLayout.addLayout(titleLayout)  
      frameLayout.addWidget(body)  
      frameLayout.addWidget(foot)  
      closeBtn.setParent(this) // closeBtn***填充，因為他不在布局模式中。  
    }  
 
    def getIcon = frame.style.standardIcon(QStyle.StandardPixmap.SP_MessageBoxInformation)  
  }  
 
  def app = QApplication.instance  
 
  lazy val frame = new DemoFrame  
 
  def main(args: Array[String]): Unit = {  
    QApplication.initialize(args)  
    app.setStyleSheet(globalStyle)  
    frame.resize(300, 200) // 我們可以自由的設定這個部件的大小了，調整元件的大小被我們送去showEvent里面去了  
    frame.show()  
    QApplication.exec  
  }  
}  

好了，弄了這么半天，這個窗口也終于算是做成了，這是最終的效果，雖然和之前的版本沒有什么差別，可是能拖動，效果卻很不一樣了。***來個留影合照哈！

后記

Qt由于是基于C++的，所以除了UI界面方面，在很多細節都進行封裝，比如有QString，QDevice，QByteArray等。而在HTTP、圖形渲染、opengl、數據庫驅動等方面類庫，Qt也都一絲不茍的移植到了Qt Jambi上。事實上，Qt似乎包攬了作為客戶端開放的方方面面，當然，其實Java自身也包含了JDBC、Swing等，權當是做一個比較吧。

【編輯推薦】

1. 用Scala實現Qt QWidget對象的Eventable接口
2. 用Qt實現類似QQ截圖的工具
3. Qt 4使用MySQL的中文問題解決方法
4. QML教程：構建和安裝QtComponents
5. QML教程：Qt-Quick六大開源組件