QML學習:Rectangle,Text,TextEdit,Flickable,Flipable元素
本文博客鏈接:
http://blog.csdn.net/jdh99
,作者:jdh,轉載請注明.
參考文檔<<Qt及Qt Quick開發實戰精解.pdf>>
環境:
主機:WIN7
開發環境:Qt
Rectangle元素:
代碼:
import QtQuick 2.0 Item { Rectangle { color: "blue" width: 50 height: 50 border.color: "green" border.width: 10 radius: 20 } }
運行效果:
說明:
border屬性設置邊框顏色和寬度
radius設置四角圓角的半徑
Text元素:
代碼:
import QtQuick 2.0 Item { Rectangle { color: "blue" width: 50 height: 50 border.color: "green" border.width: 10 radius: 20 } Text { //文本 text: "Hello JDH!" //字體 font.family: "Helvetica" //字大小 font.pointSize: 24 //顏色 color: "red" } }
運行效果:
TextEdit元素:
代碼:
import QtQuick 2.0 Item { Rectangle { color: "blue" width: 50 height: 50 border.color: "green" border.width: 10 radius: 20 } Text { //文本 text: "Hello JDH!" //字體 font.family: "Helvetica" //字大小 font.pointSize: 24 //顏色 color: "red" } TextEdit { width: 240 text: "This is TextEdit" font.pointSize: 10 focus: true x : 20 y : 40 } }
運行效果:
說明:
focus屬性設置焦點為輸入框.
Flickable元素:
它可以將子元素設置在一個可以拖拽和彈動的界面上,使得子項目的視圖可以滾動.
比如一張大圖片,窗口顯示不全,則可以用拖動它查看不同的部分.
代碼1:
import QtQuick 2.0 Flickable { id: flick width: 300 height: 200 //可拖拽內容大小 contentWidth: image.width contentHeight: image.height Image { id: image source: "pics/1.jpg" } }
利用clip屬性,將大于Flickable窗口的部分隱藏.
圖片可被拖動,用來顯示未顯示的部分.
import QtQuick 2.0 Rectangle { width: 480 height: 320 color: "blue" Flickable { id: flick width: 300 height: 200 //可拖拽內容大小 contentWidth: image.width contentHeight: image.height //隱藏大于顯示窗口的部分 clip: true; Image { id: image source: "pics/1.jpg" } } }運行效果:
實現滾動條功能:
import QtQuick 2.0
Rectangle
{
width: 480
height: 320
color: "blue"
Flickable
{
id: flick
width: 300
height: 200
//可拖拽內容大小
contentWidth: image.width
contentHeight: image.height
//隱藏大于顯示窗口的部分
clip: true;
Image
{
id: image
source: "pics/1.jpg"
}
}
//豎滾動條
Rectangle
{
id: scrollbar_vertical
anchors.right: flick.right
//當前可視區域的位置.為百分比值,0-1之間
y: flick.visibleArea.yPosition * flick.height
width: 10
//當前可視區域的高度比例,為百分比值,0-1之間
height: flick.visibleArea.heightRatio * flick.height
color: "black"
}
//橫滾動條
Rectangle
{
id: scrollbar_horizontal
anchors.bottom: flick.bottom
//當前可視區域的位置.為百分比值,0-1之間
x: flick.visibleArea.xPosition * flick.width
height: 10
//當前可視區域的寬度比例,為百分比值,0-1之間
width: flick.visibleArea.widthRatio * flick.width
color: "black"
}
}
運行效果:
Flipable元素:
可以實現翻轉效果
代碼:
import QtQuick 2.0 Flipable { id: flip width: 300 height: 200 //定義屬性 property bool flipped: false //正面圖片 front:Image { source: "pics/1.jpg" anchors.centerIn: parent } //背面圖片 back:Image { source: "pics/2.jpg" anchors.centerIn: parent } //旋轉設置,延Y軸旋轉 transform: Rotation { id: rotation origin.x:flip.width / 2 origin.y:flip.height / 2 axis.x: 0 axis.y: 1 axis.z: 0 angle: 0 } //狀態改變 states:State { name: "back" PropertyChanges { target: rotation;angle:180 } when:flip.flipped } //轉換方式 transitions: Transition { NumberAnimation { target:rotation properties: "angle" duration:4000 } } //鼠標區域 MouseArea { anchors.fill: parent onClicked: flip.flipped = !flip.flipped } }效果圖:
正面: 背面:
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
