Qt开发QTQuick

　　前言
　　QTQuick和Qtwidgets这两种技术，官方是强推QTQuick的。
　　QTQuick中布局一般有如下四种方式，绝对坐标：x、y、z、width、height、top、left锚（anchors）布局定位器（Row、Column、Grid、Flow）布局管理器（RowLayout、ColumnLayout、GridLayout、StackLayout）
　　绝对布局很好理解，给值就显示，但是不灵活；
　　anchors实际上是Item的一个属性集
　　Row则是一个单独的Item，专门用来管理其它Item的，后面介绍的几种布局，也是类似的。
　　锚（anchors）布局的参数：左上右下对齐anchors。left：AnchorLineanchors。top：AnchorLineanchors。right：AnchorLineanchors。bottom：AnchorLineMarginanchors。leftMargin：realanchors。topMargin：realanchors。rightMargin：realanchors。bottomMargin：realanchors。margins：real基线对齐及偏移anchors。baseline：AnchorLineanchors。baselineOffset：realanchors。mirrored：boolanchors。fill：Item居中与偏移anchors。centerIn：Itemanchors。horizontalCenter：AnchorLineanchors。verticalCenter：AnchorLineanchors。horizontalCenterOffset：realanchors。verticalCenterOffset：real
　　其中real具体的数值Item是组建的ID或者parentbool是true或falseAnchorLine示例anchors。horizontalCenter：parent。horizontalCenter
　　注意
　　不要在Row或RowLayout相关的组件中使用anchors，会导致组件本身的特性不生效。窗口设置
　　窗口的属性Window｛title：qsTr（一个普通标题窗口）窗口标题width：640宽度height：480高度visible：true是否可见，缺省为truecolor：ffffff窗口背景色00000000为窗口透明QML支持black等颜色样式（没有）QML支持11cfff等颜色样式QML同样支持RGB格式flags：Qt。Window窗口标志说明是什么窗口使用分割，缺省为Qt。WindowQt。Window普通窗口模式，带标题栏Qt。FramelessWindowHint隐藏标题栏窗口opacity：1透明度数值区间为01支持小数，缺省为1x：0位于父窗体的x位置，以左上角为起点，缺省为0（此时window的父窗体就是桌面了）y：0位于父窗体的y位置，以左上角为起点，缺省为0（此时window的父窗体就是桌面了）｝
　　无边框Window｛width：640height：480visible：truecolor：fefefetitle：qsTr（主页面）flags：FramelessWindowHint｝
　　显示标题栏，但是没有关闭最大最小化按钮Window｛width：640height：480visible：truecolor：fefefetitle：qsTr（主页面）flags：CustomizeWindowHint｝
　　背景透明无边框窗口Window｛width：640height：480visible：truecolor：00000000title：qsTr（主页面）flags：Qt。FramelessWindowHintopacity：1｝
　　opacity这个属性是对当前组件以及子组件都设置不透明度，所以不太适用
　　color：Qt。rgba（0，0，0，0）是对当前设置透明度，不会传到子组件组件
　　基本组件
　　这里面的这几个内部也可以填充其它组件MouseAreaRectangle
　　定位组件和布局管理器
　　定位器（Row、Column、Grid、Flow）
　　布局管理器（RowLayout、ColumnLayout、GridLayout、StackLayout）Layout
　　要使用layout布局的属性需要引用importQtQuick。Layouts1。12示例1
　　一个简单的示例
　　横向分布，最后一个填充剩余空间。importQtQuick2。14importQtQuick。Window2。14importQtQuick。Layouts1。12Window｛width：640height：480visible：truecolor：f3f3f3title：qsTr（主页面）RowLayout｛id：rowheight：200spacing：0anchors。left：parent。leftanchors。right：parent。rightRectangle｛id：rectanglewidth：200height：parent。heightcolor：red｝Rectangle｛id：rectangle2width：200height：parent。heightcolor：green｝Rectangle｛id：rectangle3height：parent。heightcolor：blueLayout。fillWidth：true｝｝｝
　　显示效果
　　其中RowLayout｛id：rowheight：200spacing：0anchors。left：parent。leftanchors。right：parent。right｝
　　和RowLayout｛id：rowheight：200width：parent。widthspacing：0｝
　　是等效的，前者就用了锚（anchors）布局
　　只有在Layout相关的空间中才能使用Layout。fillWidth：true相关的属性。
　　所以RowLayout可以实现元素填充剩余空间，而Row是不可以的，除非我们复制宽度是通过计算的值。
　　代码如下importQtQuick2。14importQtQuick。Window2。14importQtQuick。Layouts1。12Window｛width：640height：480visible：truecolor：f3f3f3title：qsTr（主页面）Row｛id：rowheight：200spacing：0anchors。left：parent。leftanchors。right：parent。rightRectangle｛id：rectanglewidth：200height：parent。heightcolor：red｝Rectangle｛id：rectangle2width：200height：parent。heightcolor：green｝Rectangle｛id：rectangle3height：parent。heightwidth：parent。widthrectangle。widthrectangle2。widthcolor：blue｝｝｝示例2
　　基本的事件和按钮按压变色及点击事件importQtQuick2。14importQtQuick。Window2。14importQtQuick。Layouts1。12Window｛width：640height：480visible：truecolor：f3f3f3title：qsTr（主页面）MouseArea｛width：200height：200anchors。centerIn：parentRectangle｛id：myrectanchors。fill：parentcolor：blueText｛text：点击color：whitefont。pixelSize：16anchors。centerIn：parent｝｝onClicked：｛console。log（区域点击）｝onPressedChanged：｛if（pressed）｛myrect。colorgreen｝else｛myrect。colorblue｝console。log（pressed）｝｝Component。onCompleted：｛console。log（加载完毕）｝｝Rectangle的事件Rectangle｛width：600height：400anchors。centerIn：parentcolor：lightgrayTapHandler｛点击屏幕时，修改了pressed属性，触发onPressedChangedonPressedChanged：｛console。log（press？：，pressed）｝长按时触发onLongPressedonLongPressed：｛console。log（longpressed）｝｝｝QML信号与槽方式1
　　对于QML中的属性如果其值发生改变，QML自动会发生相关信号
　　onChanged这种格式
　　举例：MouseArea｛onPressedChanged：console。log（value：，pressed）｝方式2
　　比较适合在同一个QML文件内signalname（typeparameter，typeparameter）onName
　　例如：signaltestSignal（realx，realb）testSignal（x，b）执行也就是发送信号类似quick中的emitsignal（）onTestSignal：console。log（xxx）槽用于接收信号
　　举例：Item｛signalclickTest（）；MouseArea｛onPressed：｛clickTest（）｝｝onClickTest：consloe。log（received）｝方式3
　　适合一对多或者跨QML断开就使用disconnect就好1：跟信号在同一个范围，可这么写signalsendSignal（）；MouseArea｛sendSignal（）｝Component。onCompleted：｛sendSignal。connect（send21）sendSignal。connect（send22）sendSignal。connect（send23）｝functionsend21（）｛console。log（1：receivedsignal）；｝functionsend22（）｛console。log（2：receivedsignal）；｝functionsend23（）｛console。log（3：receivedsignal）；｝
　　2：如果与信号不在同一范围MyTest｛signaltestT（）id：mytestMouseArea｛onPressed：｛mytest。testT（）｝｝｝Component。onCompleted：｛mytest。testT。connect（send21）mytest。testT。disconnect（send21）mytest。testT。connect（send22）mytest。testT。connect（send23）｝functionsend21（）｛console。log（1：receivedsignal）；｝functionsend22（）｛console。log（2：receivedsignal）；｝functionsend23（）｛console。log（3：receivedsignal）；｝
　　3、Connections最主要的优势可以连接到没有定义在QML的东西格式：Connections｛target：信号的来源onSignal：｝Connections｛target：mytestonTestT：｛send21（）；｝｝