区别
下面的笔记中将QtQuick.Controls 2简称为qml2,QtQuick.Controls简称为qml1。
最直观的的区别就是qml2的控件及界面风格更加美观,qml2提供了一套谷歌风格的控件,与安卓上的控件风格一样,基本不需要再自定义了,控件本身的外观和点击效果已经可以满足大部分环境。
详细说明见官方文档:QtQuick.Controls 2与QtQuick.Controls的区别
qml2中调用qml1中的控件
1、类型重命名
错误:直接在代码中同时调用QtQuick.Controls 2模块和QtQuick.Controls模块会出错,Cannot assign to non-existent property “style”。
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
//qml1
Button {
x: 100
y: 200
text: "A button"
style: ButtonStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: "#888"
radius: 4
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
}
}
}
//qml2
Button{
x: 300
y: 200
text: "B button"
}
}
正确:正确的做法是将使用到的QtQuick.Controls模块进行类型重命名,然后再调用其中的控件。
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4 as Controls14
import QtQuick.Controls.Styles 1.4 as Styles14
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
//qml1
Controls14.Button {
x: 100
y: 200
text: "A button"
style: Styles14.ButtonStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: "#888"
radius: 4
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
}
}
}
//qml2
Button{
x: 300
y: 200
text: "B button"
}
}
2、将控件封装成组件
MyButton.qml
import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Button {
x: 100
y: 200
text: "A button"
style: ButtonStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: "#888"
radius: 4
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
}
}
}
直接调用即可
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
//qml1
MyButton{
onClicked:
{
console.log("aaaa")
}
}
//qml2
Button{
x: 300
y: 200
text: "B button"
}
}