#（78）：QML 基本元素 QML 基本元素可以分為可視元素和不可視元素兩類。可視元素（例如前面提到過的`Rectangle`）具有幾何坐標，會在屏幕上占據一塊顯示區域。不可視元素（例如`Timer`）通常提供一種功能，這些功能可以作用于可視元素。 本章我們將會集中介紹集中最基本的可視元素：`Item`、`Rectangle`、`Text`、`Image`和`MouseArea`。 `Item`是所有可視元素中最基本的一個。它是所有其它可視元素的父元素，可以說是所有其它可視元素都繼承`Item`。`Item`本身沒有任何繪制，它的作用是定義所有可視元素的通用屬性： | 分組 | 屬性 | | --- | --- | | 幾何 | `x`和`y`用于定義元素左上角的坐標，`width`和`height`則定義了元素的范圍。`z`定義了元素上下的層疊關系。 | | 布局 | `anchors`（具有 left、right、top、bottom、vertical 和 horizontal center 等屬性）用于定位元素相對于其它元素的`margins`的位置。 | | 鍵盤處理 | `Key`和`KeyNavigation`屬性用于控制鍵盤；`focus`屬性則用于啟用鍵盤處理，也就是獲取焦點。 | | 變形 | 提供`scale`和`rotate`變形以及更一般的針對 x、y、z 坐標值變換以及`transformOrigin`點的`transform`屬性列表。 | | 可視化 | `opacity`屬性用于控制透明度；`visible`屬性用于控制顯示/隱藏元素；`clip`屬性用于剪切元素；`smooth`屬性用于增強渲染質量。 | | 狀態定義 | 提供一個由狀態組成的列表`states`和當前狀態`state`屬性；同時還有一個`transitions`列表，用于設置狀態切換時的動畫效果。 | 前面我們說過，`Item`定義了所有可視元素都具有的屬性。所以在下面的內容中，我們會再次詳細介紹這些屬性。 除了定義通用屬性，`Item`另外一個重要作用是作為其它可視元素的容器。從這一點來說，`Item`非常類似于 HTML 中 div 標簽的作用。 `Rectangle`繼承了`Item`，并在`Item`的基礎之上增加了填充色屬性、邊框相關的屬性。為了定義圓角矩形，`Rectangle`還有一個`radius`屬性。下面的代碼定義了一個寬 100 像素、高 150 像素，淺金屬藍填充，紅色 4 像素的邊框的矩形： ~~~ Rectangle { id: rect width: 100 height: 150 color: "lightsteelblue" border { color: "#FF0000" width: 4 } radius: 8 } ~~~ [](http://files.devbean.net/images/2014/01/qml-rect.png) QML 中的顏色值可以使用顏色名字，也可以使用 # 十六進制的形式。這里的顏色名字同 SVG 顏色定義一致，具體可以參見[這個網頁](http://www.w3.org/TR/css3-color/#svg-color)。 `Rectangle`除了`color`屬性之外，還有一個`gradient`屬性，用于定義使用漸變色填充。例如： ~~~ Rectangle { width: 100 height: 150 gradient: Gradient { GradientStop { position: 0.0; color: "red" } GradientStop { position: 0.33; color: "yellow" } GradientStop { position: 1.0; color: "green" } } border.color: "slategray" } ~~~ `gradient`要求一個`Gradient`對象。該對象需要一個`GradientStop`的列表。我們可以這樣理解漸變：所謂漸變，就是我們指定在某個位置必須是某種顏色，這期間的過渡色則由計算而得。`GradientStop`對象就是用于這種指定，它需要兩個屬性：`position`和`color`。前者是一個 0.0 到 1.0 的浮點數，說明 y 軸方向的位置，例如元素的最頂部是 0.0，最底部是 1.0，介于最頂和最底之間的位置可以用這么一個浮點數表示，也就是一個比例；后者是這個位置的顏色值。例如上面的`GradientStop { position: 0.33; color: "yellow" }`說明在從上往下三分之一處是黃色。當前最新版本的 QML（Qt 5.2）只支持 y 軸方向的漸變，如果需要 x 軸方向的漸變，則需要執行旋轉操作，我們會在后文說明。另外，當前版本 QML 也不支持角度漸變。如果你需要角度漸變，那么最好選擇一張事先制作的圖片。這段代碼的執行結果如下： [](http://files.devbean.net/images/2014/01/qml-rect-gradient.png) 需要注意的是，`Rectangle`必須同時指定（顯式地或隱式地）寬和高，否則的話是不能在屏幕上面顯示出來的。這通常是一個常見的錯誤。 如果需要顯示文本，你需要使用`Text`元素。`Text`元素最重要的屬性當然就是`text`屬性。這個屬性類型是`string`。`Text`元素會根據文本和字體計算自己的初始寬度和高度。字體則可以通過字體屬性組設置（例如`font.family`、`font.pixelSize`等）。如果要設置文本顏色，只需要設置`color`屬性。`Text`最簡單的使用如下： ~~~ Text { text: "The quick brown fox" color: "#303030" font.family: "Century" font.pixelSize: 28 } ~~~ 運行結果： [](http://files.devbean.net/images/2014/01/qml-text.png) `Text`元素中的文本可以使用`horizontalAlignment`和`verticalAlignment`屬性指定對齊方式。為了進一步增強文本渲染，我們還可以使用`style`和`styleColor`兩個屬性。這兩個屬性允許我們指定文本的顯示樣式和這些樣式的顏色。對于很長的文本，通常我們會選擇在文本末尾使用 … ，此時我們需要使用`elide`屬性。`elide`屬性還允許你指定 … 的顯示位置。如果不希望使用這種顯示方式，我們還可以選擇通過`wrapMode`屬性指定換行模式。例如下面的代碼： ~~~ Text { width: 160 height: 120 text: "A very very long text" elide: Text.ElideMiddle style: Text.Sunken styleColor: '#FF4444' verticalAlignment: Text.AlignTop font { pixelSize: 24 } } ~~~ [](http://files.devbean.net/images/2014/01/qml-text-styled.png) 這里的`Text`元素的文本省略號位置這一行文本的中部；具有一個 #FF4444 顏色的樣式 Sunken。 `Text`元素的作用是顯示文本。它不會顯示文本的任何背景，這是另外的元素需要完成的事情。 `Image`元素則用于顯示圖像。目前 QML 支持的圖像格式有 PNG、JPG、GIF 和 BMP 等。除此之外，我們也可以直接給`source`屬性一個 URL 來自動從網絡加載圖片，也可以通過`fillMode`屬性設置改變大小的行為。例如下面代碼片段： ~~~ Image { x: 12; y: 12 // width: 48 // height: 118 source: "assets/rocket.png" } Image { x: 112; y: 12 width: 48 height: 118/2 source: "assets/rocket.png" fillMode: Image.PreserveAspectCrop clip: true } ~~~ [](http://files.devbean.net/images/2014/01/qml-image.png) 注意這里我們說的 URL，可以是本地路徑（./images/home.png），也可以使網絡路徑（http://example.org/home.png）。這也是 QML 的一大特色：網絡透明。如果還記得先前我們嘗試做的那個天氣預報程序，那時候為了從網絡加載圖片，我們費了很大的精力。但是在 QML 中，這都不是問題。如果一個 URL 是網絡的，QML 會自動從這個地址加載對應的資源。 上面的代碼中，我們使用了`Image.PreserveAspectCrop`，意思是等比例切割。此時，我們需要同時設置`clip`屬性，避免所要渲染的對象超出元素范圍。 最后一個我們要介紹的基本元素是`MouseArea`。顧名思義，這個元素用于用戶交互。這是一個不可見的矩形區域，用于捕獲鼠標事件。我們在前面的例子中已經見過這個元素。通常，我們會將這個元素與一個可視元素結合起來使用，以便這個可視元素能夠與用戶交互。例如： ~~~ Rectangle { id: rect1 x: 12; y: 12 width: 76; height: 96 color: "lightsteelblue" MouseArea { /* ~~ */ } } ~~~ `MouseArea`是 QtQuick 的重要組成部分，它將可視化展示與用戶輸入控制解耦。通過這種技術，你可以顯示一個較小的元素，但是它有一個很大的可交互區域，以便在界面顯示與用戶交互之間找到一個平衡（如果在移動設備上，較小的區域非常不容易被用戶成功點擊。蘋果公司要求界面的交互部分最少要有 40 像素以上，才能夠很容易被手指點中）。