qml基本元素运用示例.docVIP

1.?Item位置是0,0?宽高分别是200 Item?{ 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，在接