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
}