4.基本元素的使用例子
- Item位置是0,0 寬高分別是200
Item {
x: 0; y: 0;
width: 200; height: 200;
}
- Rectangle位置是：0,0寬高分別是200，顏色是紅色
Rectangle {
x: 0; y: 0;
width: 200; height: 200;
color: “red”
}
- 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” }
}
}
- Image 設置一張圖片
Image {
source: “../Images/button1.png”
}
- 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”
}
- 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”
}
}
- Text 顯示文本(具體的其他設置請看文檔)
Text {
text: “text”
}
- 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;
}
- 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;
}
- 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;
}
- TextEdit
顯示一段helloworld的html文本和TextInput相同
TextEdit {
width: 240
text: “HelloWorld!”
font.family: “Helvetica”
font.pointSize: 20
color: “blue”
focus: true
}