QT += quick //添加quick模块
QQuickView //视图 用来链接QML和程序
QQuickView viewer;//Quick视图
viewer.setSource(QUrl(QLatin1String(
"qrc:///qml/qmlvideofx/Main.qml")));//加载视图QML文件
viewer.setResizeMode(QQuickView::
SizeRootObjectToView);//视图将自动将根项调整为视图的大小
viewer.show();//显示
QQmlApplicationEngine //qml引擎 用来链接程序和qml文件
QT += qml
QQmlApplicationEngine ::load(QUrl(QLatin1String(
"qrc:///qml/qmlvideofx/Main.qml")));//加载QML文件（需链接信号与曹）
[signal] void QQmlApplicationEngine::
objectCreated([QObject](../qtcore/qobject.html#QObject) **object*,
const [QUrl](../qtcore/qurl.html) &*url*)
该信号在对象完成加载时发出。如果加载成功，对象包含一个指向加载对象的指针，
否则指针为空。还提供了对象来自的组件的url。
注意:如果组件的路径是作为包含相对路径的QString提供的，
那么url将包含文件的完全解析路径。-
如果要在QML中调用c++中得函数 那么在定义函数时须在返回值前面添加一个标记 Q_INVOKABLE（注册一个方法到QML） 或者是qt中得槽函数
将c++对象作为属性注册到QML
#include<QQmlContext>
//上下文允许将数据公开给由QML引擎实例化的QML组件。
QQuickView viewer;//视图
QQmlContext*x=view.rootContext();//返回上下文里的根指针QQmlContext类型
xxx data;//自定义类对象
x->setContextProperty("在QML中访问的自定义对象名 xxx",&data);
/*注册一个对象到QML 设置属性将&data注册到QML中data是自定义类对象
这样在 qML中就可以使用自定义类对象的方法了在自定义类中
data对象的方法需加 Q_INVOKABLE */
//QML中
import QtCharts 2.0
Item //QML中最基本得对象
{
xxx.xxx//这里就是自定义对象名，和他的方法
Text
{
text:
}
//可声明一些属性或者添加一些对象
}
viewer.setSource(QUrl(QLatin1String(
"qrc:///qml/qmlvideofx/Main.qml")));//加载视图QML文件
viewer.setResizeMode(QQuickView::
SizeRootObjectToView);//视图将自动将根项调整为视图的大小
viewer.show();//显示
在c++中调用QML中的函数
//QML中
import QtCharts 2.0
Item //QML中最基本得对象
{
Text
{
id：qmlf
function qmlFunction(msg)//QML中自定义函数
{
console.log("打印",msg)
return "abc"
}
qmlFunction("数据")//QML中调用自定义函数
}
//可声明一些属性或者添加一些对象
qmlf.qmlFunction("数据")//QML中调用自定义函数
}
程序中用引擎
QQmlApplicationEngine engine;//qml引擎 用来链接程序和qml文件
QQmlCompoent compen(&engine,"QML文件路径");
//QML组件并添加到引擎//如果路径是在下层目录需加../否则直接写名称即可
QObject *object=compen.create();//创建一个组件并用QObject指针指向他
QVariant msg="hello qml";//QVariant对象每次保存单个类型()的单个值。
QVariant retVal;
QMetaObject::invokeMethod(obj, "qmlFunction",
Q_RETURN_ARG(QVariant,retVal),//这个是返回值
Q_ARG(QVariant, msg));//这个是传参
// Q_RETURN_ARG,Q_ARG必须指定QVariant类型 //程序中调用QML函数
c++中调用QML中的信号
import QtCharts 2.0
Item //QML中最基本得对象
{
Item
{
id：item
width：100
height：100
signal:qmlsignal(string msg)
MouseArea//鼠标
{
anchors.fill:parent//鼠标的点击的区域为父窗口的区域
onClicked:item.qmlSignal("wai")//鼠标点击了发射信号
}
}
//可声明一些属性或者添加一些对象
}
c++程序中
#include<QQuickItem>//Quick项
QQuickView viewer(QUrl(QLatin1String(
"qrc:///qml/qmlvideofx/Main.qml");//视图
QObject*item=viewer.rootObject();//返回跟对象 QQuickItem类型
xxx xxx;//自定义类
QObject::commect(item,SIGNAL(
qmlSignal(QString)),&xxx,SLOT(自定义类的槽函数(QString)));
viewer.show();//视图显示
QML
QML支持许多基本类型。
基本类型是引用简单值的类型，例如int或string。这与QML对象类型形成对比，QML对象类型是指具有属性、信号、方法等的对象。与对象类型不同，基本类型不能用于声明QML对象:例如，不可能声明int{}对象或size{}对象。
基本类型可指:
单个值(例如int指单个数字，var可以指单个项目列表)
包含一组简单属性-值对的值(例如，大小指v)
mport QtQuick 2.0
import QtCharts 2.0
Item //QML中最基本得对象
{
Item
{
signal:QML自定义信号
text:
}
//可声明一些属性或者添加一些对象
}
QML设计模式 QT其他项目Qt Quick UI
demo
import QtQuick 2.0
Rectangle//矩形组件 定义函数和调用
{
id:murect
width: 200
height: 200
//QML中的函数 参数无需指定类型
function init(y)
{
console.log("控制台的日志" + y ) //后面加一个参数传进来的
}//函数
MouseArea//鼠标活动区域
{
anchors.fill: parent//锚 鼠标活动区域为父部件的所有区域
onClicked:murect.init("kongzhi")//点击事件槽函数
}
}
//定义信号和调用*************************************************
Item//通常作为容器
{
width:5000
height: 5000
MouseArea//鼠标活动区域
{
anchors.fill: parent//锚 鼠标活动区域为父部件的所有区域
onClicked:zhang.btnClicked()//点击事件发送信号
}
Rectangle//自定义信号槽函数
{
id:zhang
x:200+500
y:250
z:3
width: 200
height: 200
color: "pink"
signal btnClicked//信号
onBtnClicked: //槽函数
{
console.log("控制台的日志")
}
}
//**************************************************************
Image //图片
{
//id: li
//x:250
//y:250
width: parent.width
height: parent.height
source: "li.jpeg"//相对路径
fillMode:Image.Tile//填充方式 （帮助文档）
opacity:0.8//透明度
z:1//重叠 越大越靠近用户
}
//*********************************************************** *
Column//列
{
x:700
y:300
spacing:20//间隙
Text//文本默认坐标0，0
{
id: q
width:20
color:"green"
text: qsTr("你想说什么")
elide:Text.ElideLeft//缩略模式靠左 居中等一行显示不了显示****
font.pointSize:24//字体大小
z:4
}
Text//文本默认坐标0，0
{
id: q1
width:20
text: qsTr("我爱你吗")
z:4
}
Text//文本默认坐标0，0
{
id: q2
width:20
text: qsTr("我不接受")
z:4
}
TextEdit//文本编辑器
{
width: 200
text: "<b>hell qml</b> ni"
}
TextInput//文本输入框
{
width:200
}
}
}
//键盘事件
Rectangle
{
width: 100
height: 100
focus:true//是否获取焦点
Keys.onPressed: //键盘事件的槽函数
{
if(event.key==Qt.Key_Q)
{
onsole.log("Q被按下了") //后面加一个参数传进来的
event.accepted=true //事件接受 不再将这个事件传递到父组件
}
}
}
//导航键
Grid//格线布局
{
Rectangle
{
id:upL
width:50;height:50
color:focus?"yellow":"#668123"//是否获取了焦点
focus:true//焦点
KeyNavigation.right: upM//导航键焦点忘右
KeyNavigation.down: midL//导航键焦点往下
}
Rectangle
{
id:upM
width:50;height:50
color:focus?"yellow":"#ffecae"//是否获取了焦点
KeyNavigation.right: upR//导航键忘右
KeyNavigation.down: midM//导航键往下
KeyNavigation.left: upL//导航键往左
}
Rectangle
{
id:upR
width:50;height:50
color:focus?"yellow":"#32cd32"//是否获取了焦点
KeyNavigation.left: upM//导航键左
KeyNavigation.down: midR//导航键往下
}
//*******************************************************
Timer//定时器
{
Item {
Timer
{
interval: 500
running: true
repeat: true
onTriggered: time.text = Date().toString()
}
Text { id: time }
}
}
//*********************************************************
Loader//动态加载组件
{
Item {
width: 200; height: 200
Loader { id: pageLoader }
MouseArea
{
anchors.fill: parent
onClicked: pageLoader.source = "Page1.qml"
}
}
}
}
