Resolve resource ambiguity in QML imports

Question

I need to use both QtLabs and QtQuickControls. Both have the Button type but I need to use the one in QuickControls. The QML file is picking the button in labs. How do I force it to use the one in QuickControls?

import QtQuick 2.6
import QtQuick.Controls 1.5 //This is what I need the QML file to pick button from
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
import QtQuick.Dialogs 1.2
import QtMultimedia 5.6
import Qt.labs.controls 1.0 //This is where it is picking Button from

Answer 1

A fast/easy way to solve the issue is to make a named import with the as keyword. After you give a name to the import all the components in the module can be accessed through that name.

Example with your imports:

import QtQuick 2.6
import QtQuick.Controls 1.5 as Ctrl1 //name for old controls
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
import QtQuick.Dialogs 1.2
import QtMultimedia 5.6
import Qt.labs.controls 1.0 as Ctrl2 //name for new controls

Ctrl2.ApplicationWindow {
    id: root
    visible: true
    width: 400
    height: 300

    Column {
        anchors.fill: parent

        Ctrl1.Button {
            text: qsTr("one")
        }

        Ctrl2.Button {
            text: qsTr("two")
        }
    }
}

This approach can easily become too verbose. In that case I would separate the content in different files, physically separating the offending imports.