QML 基本元素

2019-11-08 02:04:16

字體：大中小

來源：轉載

供稿：網友

1. 介紹QML是一種描述語言，主要是對界面效果等的一種描述，它可以結合javaScript來進行更復雜的效果及邏輯實現。比如做個游戲，實現一些更有趣的功能等2. 簡單的例子import Qt 4.7Rectangle { width: 200 height: 200 color: "blue"}代碼是繪制一個藍色的矩形，寬 200 高 200， import包含一個qt4.7的包3.基本元素的介紹（自己翻譯意思會有出入，敬請見諒）基本可視化項Item 基本的項元素在QML中所有可視化的向都繼承他Rectangle 基本的可視化矩形元素Gradient 定義一個兩種顏色的漸變過程GradientStop 定義個顏色，被Gradient使用Image 在場景中使用位圖BorderImage(特殊的項) 定義一張圖片并當做邊界AnimatedImage 為播放動畫存儲一系列的幀Text 在場景中使用文本TextInput 顯示可編輯為文本IntValidator int 驗證器DoubleValidator double 驗證器RegExpValidator 驗證字符串正則表達式TextEdit 顯示多行可編輯文本基本的交互項MouseArea 鼠標句柄交互FocusScope 鍵盤焦點句柄Flickable 提供一種瀏覽整張圖片的一部分的效果,具體看例子Flipable 提供一個平面，可以進行翻轉看他的前面或后面,具體看例子狀態State 定義一個配置對象和屬性的集合PRopertyChanges 使用一個State描述屬性的改變StateGroup 包含一個狀態集合和狀態變換ParentChange 重新定義父集，也就是換個父節點AnchorChanges 在一個狀態中改變anchors動畫和變換Behavior 默認的屬性變換動畫SequentialAnimation 對定義的動畫串行播放ParallelAnimation 對定義的動畫并行播放PropertyAnimation 屬性變換動畫NumberAnimation 對實數類型屬性進行的動畫Vector3dAnimation 對QVector3d進行的屬性ColorAnimation 顏色進行的變換動畫RotationAnimation 對旋轉進行的變換動畫ParentAnimation 對父節點進行變換的動畫，改變綁定的父節點AnchorAnimation 對anchor 進行改變的動畫PauseAnimation 延遲處理SmoothedAnimation 允許屬性平滑的過度SpringAnimation 一種加速的效果PropertyAction 允許在動畫過程中對屬性的直接改變ScriptAction 允許動畫過程中調用腳本Transition 在狀態變換中加入動作變化工作中的數據Binding 在創建的時候綁定一些數據到一些屬性ListModel 定義鏈表數據ListElement 定義ListModel的一個數據項VisualItemModel 包含可視化項(visual items)到一個view中，相當是一個容器VisualDataModel 包含一個model和一個delegate，model包含需要的數據，delegate設計顯示的項的信息，具體的去看例子Package 他的目的是把VisualDataModel共享給多個view，具體還要學習xmlListModel 特殊的一個模式使用XPath表達式，使用xml來設置元素，參考例子XmlRole XmlListModel的一個特殊的角色試圖ListView 提供一個鏈表顯示模型試圖GridView 提供一個網格顯示模型試圖PathView 提供一個內容沿著路徑來顯示的模型Path 定義一個PathView使用的軌跡PathLine 定義一個線性的軌跡PathQuad 定義一個二次貝塞爾曲線的軌跡PathCubic 定義一個三次貝塞爾曲線的軌跡PathAttribute 允許綁定一個屬性上，具體看例子PathPercent 修改item分配的軌跡不是很明了其中的意思WebView 允許添加網頁內容到一個canvas上定位器Column 整理它的子列(縱)Row 整理它的子行(橫)Grid 設置它的子到一個網格上Flow 目的是不讓他的子項重疊在一起實用Connections 明確連接信號和信號句柄Component 封裝QML items 想一個組件一樣Timer 提供時間觸發器QtObject 基本的元素只包含objectName屬性Qt qml全局Qt object提供使用的枚舉和函數WorkerScript 允許在QML使用線程Loader 控制載入item或組件Repeater 使用一個模型創建多個組件SystemPalette 為Qt palettes提供一個通道FontLoader 載入字體根據名字或URLLayoutItem 允許聲明UI元素插入到qtGraphicsView 布局中變換Scale 分派item 縮放行為Rotation 分派item 旋轉行為Translate 分派item 移動行為4.基本元素的使用例子1. Item位置是0,0 寬高分別是200Item { x: 0; y: 0; width: 200; height: 200;}2. Rectangle位置是：0,0寬高分別是200，顏色是紅色Rectangle { x: 0; y: 0; width: 200; height: 200; color: "red"}3. Gradient GradientStop 分別在總高度的0 顏色紅色總高度的1/3 黃色總高度的1是綠色Rectangle { width: 100; height: 100 gradient: Gradient { GradientStop { position: 0.0; color: "red" } GradientStop { position: 0.33; color: "yellow" } GradientStop { position: 1.0; color: "green" } }}4. Image 設置一張圖片Image { source: "../Images/button1.png"}5. BorderImage 他將一張圖片分成9部分當圖片進行縮放的時候A．1 3 7 9 位置的都不會進行縮放B. 2 8將根據屬性horzontalTileMode 進行縮放C．4 6 將根據屬性verticalTileMode 進行縮放D．5 將根據屬性horzontalTileMode 和 verticalTileMode 進行縮放BorderImage { width: 180; height: 180 // 分割1~9塊的4個點是根據border設置的坐標來實現的 // 本別是距離坐標上邊右邊下邊的距離 border { left: 30; top: 30; right: 30; bottom: 30 } horizontalTileMode: BorderImage.Stretch verticalTileMode: BorderImage.Stretch source: "../Images/button1.png"}6. AnimatedImage 主要用于播放gif圖片Rectangle { width: animation.width; height: animation.height + 8 AnimatedImage { id: animation; source: "animation.gif" } Rectangle { property int frames: animation.frameCount width: 4; height: 8 x: (animation.width - width) * animation.currentFrame / frames y: animation.height color: "red" }}7. Text 顯示文本(具體的其他設置請看文檔)Text { text: "text"}8. TextInput 下面是設置一個輸入文本框，框中的字符串是Text, 并設置鼠標可以選擇文本TextInput{ text: "Text" selectByMouse: true; // 鼠標可以選擇}9．IntValidator int 型驗證器，和輸入框結合后就是只能輸入整型數據TextInput{ // 最高可以輸入100，最低輸入10 IntValidator{id: intval; bottom: 10; top: 100;} width: 100; height: 20; text: ""; // 使用校驗器 validator: intval;}10. DoubleValidator 只能輸入浮點數TextInput{ // 最高可以輸入100，最低輸入10 decimals最多有多少位小數 // notation 表示是使用科學計數法還是(默認),還是直接的小數當獲取里面的數據 DoubleValidator{id: intval; decimals: 4; bottom: 10; top: 100; notation:DoubleValidator.StandardNotation} width: 100; height: 20; text: ""; // 使用校驗器 validator: intval;}11. RegExpValidator 使用正則表達式TextInput{ // 使用一個正則表達式來控制輸入的字符串 // /^[a-zA-Z]{1}[0-1]{0,2}[a-z]{1,3}$/ 表示開始位置必須是一個大寫或小寫字母 // 接下來是0~2個的數字而且是0或1，在接下來是1~3個的小寫字母 RegExpValidator{id: intval; regExp:/^[a-zA-Z]{1}[0-1]{0,2}[a-z]{1,3}$/;} width: 100; height: 20; text: ""; // 使用校驗器 validator: intval;}12. TextEdit顯示一段hello world的html文本和TextInput相同TextEdit { width: 240 text: "Hello World!" font.family: "Helvetica" font.pointSize: 20 color: "blue" focus: true}13. MouseArea主要是用來判斷鼠標事件的區域Rectangle{ x: 0; y: 0; width: 100; height:100; Rectangle{ id: mousrect x: 20; y: 20; width: 20; height: 20; color: "blue" MouseArea{ // 使用父的區域作為鼠標判斷的區域及 x: 20; y: 20; width: 20; height: 20; anchors.fill: parent; // 但鼠標按下后 mousrect變成紅色，當鼠標松開后變成藍色 onPressed: { mousrect.color = "red";} onReleased: { mousrect.color = "blue";} } }}14. FocusScope不是很清楚說的什么，好像是說同一個時刻只有一個item有焦點15. Flickable顯示一個200x200的框，框中顯示圖片上200x200的部分Flickable { width: 200; height: 200 // 設置使用圖片的寬高，而現實的是 200x200的現實框 contentWidth: image.width; contentHeight: image.height Image { id: image; source: "../Images/need.png" }}16. Flipable包含兩個面，一個前面，一個后面，實現一個控件前后的翻轉效果，并且在后面可以添加一些控制Flipable { id: flipable width: 240 height: 240 property int angle: 0 property bool flipped: false front: Image { source: "front.png" } // 前面 back: Image { source: "back.png" } // 后面 // 旋轉動畫前后面交換 transform: Rotation { origin.x: flipable.width/2; origin.y: flipable.height/2 axis.x: 0; axis.y: 1; axis.z: 0 // rotate around y-axis angle: flipable.angle } states: State { name: "back" PropertyChanges { target: flipable; angle: 180 } when: flipable.flipped } transitions: Transition { NumberAnimation { properties: "angle"; duration: 1000 } } MouseArea { anchors.fill: parent onClicked: flipable.flipped = !flipable.flipped }}17. State// 當鼠標按下后改變 myRect 的顏色Rectangle { id: myRect width: 100; height: 100 color: "black" MouseArea { id: mouseArea anchors.fill: parent onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked'; } // 設置狀態 states: [ State { name: "clicked" PropertyChanges { target: myRect; color: "red" } } ]}18. PropertyChanges// 當鼠標按下后改變狀態// 狀態里面的屬性改變包含了文本和顏色的改變Text { id: myText width: 100; height: 100 text: "Hello" color: "blue" states: State { name: "myState" // 當這個狀態被設置的時候，將改變myText的文本和顏色 PropertyChanges { target: myText text: "Goodbye" color: "red" } } MouseArea { anchors.fill: parent; onClicked: myText.state = 'myState' }}19. StateGroup一個狀態組中可以包含很多的狀態和變化，而狀態也可以和變換綁定.20. StateChangeScript在狀態中可以對腳本中的函數進行調用// Sc.jsfunction changeColor() // 返回藍色{ return "blue";}// test.qmlimport "Sc.js" as CodeRectangle{ id: rect width: 50; height: 50 color: "red" MouseArea { anchors.fill: parent onClicked: rect.state = "first" // 鼠標按下改變狀態 } states: State {name: "first"; StateChangeScript{ name: "myScript"; script: rect.color = Code.changeColor(); } }}21. ParentChang把指定的item換一個item父節點Item { width: 200; height: 100 Rectangle { id: redRect width: 100; height: 100 color: "red" } // 本來blueRect的父節點是Item 當鼠標按下后他被設置到 redRect上 Rectangle { id: blueRect x: redRect.width width: 50; height: 50 color: "blue" states: State { name: "reparented" // 改變父節點 ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 } } MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" } }}22. AnchorChangesRectangle { id: window width: 120; height: 120 color: "black" Rectangle { id: myRect; width: 50; height: 50; color: "red" } states: State { name: "reanchored" AnchorChanges { // 改變 myRect 的anchors屬性 target: myRect anchors.top: window.top anchors.bottom: window.bottom } PropertyChanges { target: myRect anchors.topMargin: 10 anchors.bottomMargin: 10 } } // 鼠標事件 MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }}23. BehaviorRectangle { id: rect width: 100; height: 100 color: "red" // 針對寬度的動畫 Behavior on width { NumberAnimation { duration: 1000 } } MouseArea { anchors.fill: parent onClicked: rect.width = 50 }}24. SequentialAnimation串行播放多個動畫Rectangle { id: rect1 width: 500; height: 500 Rectangle{ id: rect; color: "red" width: 100; height: 100 // 串行播放多個動畫，先橫向移動，在縱向移動 SequentialAnimation{ running: true; NumberAnimation {target:rect; properties:"x"; to: 50; duration: 1000 } NumberAnimation {target:rect; properties:"y"; to: 50; duration: 1000 } } }}25. ParallelAnimationRectangle { id: rect1 width: 500; height: 500 Rectangle{ id: rect; color: "red" width: 100; height: 100 // 并行播放動畫，同時橫向和縱向移動 ParallelAnimation{ running: true; NumberAnimation {target:rect; properties:"x"; to: 50; duration: 1000 } NumberAnimation {target:rect; properties:"y"; to: 50; duration: 1000 } } }}26. PropertyAnimationRectangle { id: rect width: 100; height: 100 color: "red" states: State { name: "moved" PropertyChanges { target: rect; x: 50 } } transitions: Transition { // 屬性動畫這里是當屬性 x或y發生變化的時候，就播放這樣一個動畫 PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad } } MouseArea{ anchors.fill: parent; onClicked: rect.state = "moved"; }}27. NumberAnimationRectangle { width: 100; height: 100 color: "red" // 對當前item的x進行移動，目標移動到x = 50 NumberAnimation on x { to: 50; duration: 1000 }}28. Vector3dAnimation29. ColorAnimation顏色的過度Rectangle { width: 100; height: 100 color: "red" ColorAnimation on color { to: "yellow"; duration: 1000 }}30. RotationAnimation默認是繞z軸進行的旋轉Item { width: 300; height: 300 Rectangle { id: rect width: 150; height: 100; anchors.centerIn: parent color: "red" smooth: true states: State { name: "rotated"; PropertyChanges { target: rect; rotation: 180 } } transitions: Transition { RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise } } } MouseArea { anchors.fill: parent; onClicked: rect.state = "rotated" }}31. ParentAnimation一個切換父節點的動畫,平滑的過度Item { width: 200; height: 100 Rectangle { id: redRect width: 100; height: 100 color: "red" } Rectangle { id: blueRect x: redRect.width width: 50; height: 50 color: "blue" states: State { name: "reparented" ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 } } transitions: Transition { ParentAnimation { NumberAnimation { properties: "x,y"; duration: 1000 } } } MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" } }}32. AnchorAnimationItem { id: container width: 200; height: 200 Rectangle { id: myRect width: 100; height: 100 color: "red" } states: State { name: "reanchored" AnchorChanges { target: myRect; anchors.right: container.right } } transitions: Transition { // smoothly reanchor myRect and move into new position AnchorAnimation { duration: 1000 } } // 當控件加載完成后 Component.onCompleted: container.state = "reanchored"}33. PauseAnimation延遲效果Item { id: container width: 200; height: 200 Rectangle { id: myRect width: 100; height: 100 color: "red" SequentialAnimation { running: true; NumberAnimation {target: myRect;to: 50; duration: 1000; properties: "x"; } PauseAnimation { duration: 5000 } // 延遲100毫秒 NumberAnimation {target: myRect; to: 50; duration: 1000; properties: "y"; } } }}34. SmoothedAnimation平滑過度Rectangle { width: 800; height: 600 color: "blue" Rectangle { width: 60; height: 60 x: rect1.x - 5; y: rect1.y - 5 color: "green" Behavior on x { SmoothedAnimation { velocity: 200 } } Behavior on y { SmoothedAnimation { velocity: 200 } } } Rectangle { id: rect1 width: 50; height: 50 color: "red" } focus: true Keys.onRightPressed: rect1.x = rect1.x + 100 Keys.onLeftPressed: rect1.x = rect1.x - 100 Keys.onUpPressed: rect1.y = rect1.y - 100 Keys.onDownPressed: rect1.y = rect1.y + 100}35. SpringAnimation平滑的過度過程，在動畫結束的時候有種彈性的效果Item { width: 300; height: 300 Rectangle { id: rect width: 50; height: 50 color: "red" Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } } Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } } } MouseArea { anchors.fill: parent onClicked: { rect.x = mouse.x - rect.width/2 rect.y = mouse.y - rect.height/2 } }}36. PropertyAction主要是在動畫過程中直接的改變一個屬性transitions: Transition { ... PropertyAction { target: theImage; property: "smooth"; value: true } ...}38. ScriptAction在動畫過程中嵌入腳本的調用SequentialAnimation { NumberAnimation { ... } ScriptAction { script: doSomething(); } NumberAnimation { ... }}39. TransitionRectangle { id: rect width: 100; height: 100 color: "red" MouseArea { id: mouseArea anchors.fill: parent } states: State { name: "moved"; when: mouseArea.pressed PropertyChanges { target: rect; x: 50; y: 50 } } transitions: Transition { NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad } }}40. BindingItem { width: 300; height: 300 Text {id: app; text: "xxxfa"} TextEdit { id: myTextField; text: "Please type here..." } // 把myTextField和app的enteredText屬性進行綁定 Binding { target: app; property: "enteredText"; value: myTextField.text }}41. ListModel直接看效果Rectangle { width: 200; height: 200 ListModel { id: fruitModel ListElement { name: "Apple" cost: 2.45 } ListElement { name: "Orange" cost: 3.25 } ListElement { name: "Banana" cost: 1.95 } } Component { id: fruitDelegate Row { spacing: 10 Text { text: name } Text { text: '$' + cost } } } ListView { anchors.fill: parent model: fruitModel delegate: fruitDelegate }}42. ListElement請參照ListModel43. VisualItemModel把可視化圖元添加到鏈表試圖Rectangle { width: 100; height: 100; VisualItemModel { id: itemModel Rectangle { height: 30; width: 80; color: "red" } Rectangle { height: 30; width: 80; color: "green" } Rectangle { height: 30; width: 80; color: "blue" } } ListView { anchors.fill: parent model: itemModel }}44. VisualDataModel看下面效果Rectangle { width: 200; height: 100 VisualDataModel { id: visualModel model: ListModel { ListElement { name: "Apple" } ListElement { name: "Orange" } } delegate: Rectangle { height: 25 width: 100 Text { text: "Name: " + name} } } ListView { anchors.fill: parent model: visualModel }}45. Package具體請參考declarative/modelviews/package46. XmlListModel XmlRole從網絡獲取xml，暫時沒有測試成功47. ListView參考 ListModel VisualDataModel48. GridView看效果Rectangle { width: 200; height: 400; ListModel { id: fruitModel ListElement { name: "Apple" cost: 2.45 } ListElement { name: "Orange" cost: 3.25 } ListElement { name: "Banana" cost: 1.95 } } GridView { anchors.fill: parent model: fruitModel delegate: Column{ Text {text:"name" + name} Text {text:"cost"+ cost} } }}49．PathView Path看例子Rectangle { width: 200; height: 400; ListModel { id: fruitModel ListElement { name: "Apple" cost: 2.45 } ListElement { name: "Orange" cost: 3.25 } ListElement { name: "Banana" cost: 1.95 } } PathView { anchors.fill: parent model: fruitModel delegate: Column{ Text {text:"name" + name} Text {text:"cost"+ cost} } path:Path{ startX: 120; startY: 100 PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 } } }}50．PathLine具體的看運行的例子Rectangle { width: 200; height: 400; ListModel { id: fruitModel ListElement { name: "Apple" cost: 2.45 } ListElement { name: "Orange" cost: 3.25 } ListElement { name: "Banana" cost: 1.95 } } PathView { anchors.fill: parent model: fruitModel delegate: Column{ Text {text:"name" + name} Text {text:"cost"+ cost} } path:Path{ startX: 150; startY: 120 PathLine { x: 200; y: 80; } PathLine { x: 100; y: 80; } PathLine { x: 150; y: 120; } } }}51．PathQuad參考 PathView Path52．PathCubic還要看53．PathAttribute可以直接針對一些屬性進行改變Rectangle { width: 200; height: 400; ListModel { id: fruitModel ListElement { name: "Apple" cost: 2.45 } ListElement { name: "Orange" cost: 3.25 } ListElement { name: "Banana" cost: 1.95 } } PathView { anchors.fill: parent model: fruitModel delegate: Item { id: delitem; width: 80; height: 80; Column{ // 這里使用圖片試試 Rectangle { width: 40; height: 40; scale: delitem.scale; color: "red" } Text {text:"name" + name} Text {text:"cost"+ cost} } } // path: Path { startX: 120; startY: 100 PathAttribute { name: "Scale"; value: 1.0 } PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } PathAttribute { name: "Scale"; value: 0.3 } PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 } } }}54．PathPercent具體請看QML文檔55．WebViewimport QtWebKit 1.0WebView { url: "http://www.nokia.com" preferredWidth: 490 preferredHeight: 400 scale: 0.5 smooth: false}56 Column橫向排列Rectangle{ width: 100; height: 100; // 縱向排列 Column { spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 } }}57 RowRectangle{ width: 100; height: 100; // 橫向排列 Row { spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 } }}58 GridRectangle{ width: 100; height: 100; // 網格排列 Grid { columns: 3 spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 } Rectangle { color: "cyan"; width: 50; height: 50 } Rectangle { color: "magenta"; width: 10; height: 10 } }}59 FlowRectangle{ width: 100; height: 100; // 網格排列 Flow { spacing: 2 width: 100; height: 100; Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50; height: 20 } Rectangle { color: "cyan"; width: 50; height: 50 } Rectangle { color: "magenta"; width: 10; height: 10 } }}60 Connections下面是3中情況下會使用的，具體的不好翻譯Multiple connections to the same signal are required有多個連接要連接到相同的信號時Creating connections outside the scope of the signal sender創建的連接在范圍之外Connecting to targets not defined in QML創建的連接沒有在QML中定義的Rectangle{ width: 100; height: 100; MouseArea { id: area anchors.fill: parent; } Connections { target: area onClicked: { console.log(" ok");} }}61 Component組件是可以重用的QML元素，具體還是看QML的文檔翻譯不是很好Item { width: 100; height: 100 // 定義一個組件他包含一個10x10的紅色矩形 Component { id: redSquare Rectangle { color: "red" width: 10 height: 10 } } // 動態的載入一個組件 Loader { sourceComponent: redSquare } Loader { sourceComponent: redSquare; x: 20 }}62 TimerItem { width: 200; height: 40; // 和QTimer 差不多 Timer { interval: 500; running: true; repeat: true onTriggered: time.text = Date().toString() // 使用Javascript獲取系統時間 } Text { id: time }}63 QtObject他是不可見的只有objectName一個屬性通過這個屬性我們可以在c++中找到我們想要的對象// MyRect.qmlimport Qt 4.7Item { width: 200; height: 200 Rectangle { anchors.fill: parent color: "red" objectName: "myRect" }}// main.cppQDeclarativeView view;view.setSource(QUrl::fromLocalFile("MyRect.qml"));view.show();QDeclarativeItem *item = view.rootObject()->findChild<QDeclarativeItem*>("myRect");if (item) item->setProperty("color", QColor(Qt::yellow));64 Qt提供全局有用的函數和枚舉，具體的看QML文檔65. WorkerScript使用它可以把操作放到一個新的線程中，使得它在后臺運行而不影響主GUI具體可以看QML中它的文檔66. Loader可以參考Component還有QML中的文檔67 Repeater他可以創建很多相似的組件，QML中還有幾個例子Row { Repeater { model: 3 Rectangle { width: 100; height: 40 border.width: 1 color: "yellow" } }}68 SystemPalette具體看效果和文檔Rectangle { SystemPalette { id: myPalette; colorGroup: SystemPalette.Active } width: 640; height: 480 color: myPalette.window Text { anchors.fill: parent text: "Hello!"; color: myPalette.windowText }}69. FontLoader載入一種字體，可以是網絡上的，也可以是本地的Column { FontLoader { id: fixedFont; name: "Courier" } FontLoader { id: webFont; source: "http://www.mysite.com/myfont.ttf" } Text { text: "Fixed-size font"; font.family: fixedFont.name } Text { text: "Fancy font"; font.family: webFont.name }}70 LayoutItem不清楚71 Scale對縮放的控制Rectangle { width: 100; height: 100 color: "blue" Rectangle{ x: 50; y: 50; width: 20; height: 20; color: "red" // 這里是在當前矩形的中間位置沿x軸進行3倍縮放 transform: Scale { origin.x: 10; origin.y: 10; xScale: 3} }}72 RotationRectangle { width: 100; height: 100 color: "blue" // 繞位置25,25 旋轉45度 transform: Rotation { origin.x: 25; origin.y: 25; angle: 45}}73 TranslateRow { Rectangle { width: 100; height: 100 color: "blue" // 沿y軸正方向移動20個像素 transform: Translate { y: 20 } } Rectangle { width: 100; height: 100 color: "red" // 沿y軸負方向移動20個像素 transform: Translate { y: -20 } }}

上一篇：使用匿名內部類排序對象

下一篇：django部署admin后臺static文件丟失問題解決