QML之在QtQuick.Controls 2项目中使用QtQuick.Controls模块中的控件

区别

下面的笔记中将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"
    }
}