QML学习

qml页面相关

注: F1可以跳转到对应帮助文档

常用标签

Item

相当于vue中的template

Rectangle

相当于div

ListView

列表页

delegate:  SimpleLauncherDelegate

model:  ListModel

enabled

Image

图片

source

Component

用于创建组件

Loader

用于加载页面

focus

source   目标路径

MouseArea

用于鼠标事件触发

属性

acceptedButtons: 允许触发事件的按钮

Qt.LeftButton 默认 | Qt.RightButton | Qt.AllButtons

 

cursorShape: 鼠标样式

Qt.ArrowCursor 默认

 

hoverEnabled: true  

enabled   是否启用

 

方法   

onClicked

onDoubleClicked

onCanceled

onEntered

onExited

onPositionChanged

onPressAndHold

onPressed

onReleased

onWheel

判断鼠标左右键

mouse.button == Qt.LeftButton

 

 

Canvas

antialiasing

方法

onLineWidthChanged: requestPaint()重新进行绘制

onFillChanged

onStrokeChanged

onScaleChanged

onRotateChanged

 

onPaint:{

  var ctx = canvas id.getContext('2d')

}

 

Behavior    ?

可以做动画

Behavior on height {

  NumberAnimation {

    duration: 300

  }

}

 

定义变量

也可以接受上级组件的值

property  type  name:  value

自定义信号

signal 'name'

例如：自定义一个button

Button {

id: root

signal: myClick;

 

text: "按钮"

onClicked: {

root.myClick();

}

}

 

引用自定义Button

myButton {

text: "自定义按钮"

onMyClick: {

console.log("自定义信号 发送了")

}

}

 

常用属性

id

anchors   用于定位盒子

fill

left

top

right

bottom

verticalCenter  垂直居中

verticalCenterOffset  偏移

mergin  外边距

leftMergin   单外边距

centerIn   居中

 

border

color

antialiasing   ？

radius

width

height

color

clip

visible

opacity

 

渐变

gradient: Gradient {

   GradientStop { position: 0; color: "#eee"}

   GradientStop { position: 1; color: "#ccc"}

}

 

动画

ParalleAnimation

SequentialAnimation

NumberAnimation {

  target       目标id

  property   需要修改的属性

  from

  to

  duration   延迟

}

ScriptAction {

  script   动画需要执行的 script 代表

}

 

开始动画

动画id.start()

 

url相关

Qt.resolvedUrl(qml相对地址)