How to move a component with a custom property to a separate file in QML

Question

I have a delegate for a language-selection list. Each item in the list contains an icon and text. I'd like to move the component definition to a different file and provide the string currently defined by IMGDIR as a property.

Simply moving the entire text below to a separate LandDelegate.qml file and including it as:

LangDelegate { id: langDlg }

doesn't work.

Below is the declaration of the component.

Component {
    id: langDlg
    Item {
        id: wrapper

        width: langView.width
        height: langImg.height+10*2

        Rectangle {
            id: background
            x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
            color: "lightgrey"
            border.color: "orange"
            radius: 5
        }

        states: State {
            name: "Current"
            when: wrapper.ListView.isCurrentItem
            PropertyChanges { target: wrapper; x: 20 }
        }
        transitions: Transition {
            NumberAnimation { properties: "x"; duration: 200 }
        }
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: { wrapper.ListView.view.currentIndex = index; }
            onClicked: { wrapper.ListView.view.currentIndex = index; langSelect.visible = false; docView.visible  = true }
        }

        Row {
            id: topLayout
            x: 10; y: 10; height: langImg.height + 10*2; width: parent.width
            spacing: 10

            Image {
                id: langImg
                //width: 50; height: 50
                source: IMGDIR+licon
            }

            Column {
                width: background.width - langImg.width - 20; height: langImg.height
                spacing: 5

                Text {
                    text: lname
                    font.bold: true; font.pointSize: 16
                }
            }
        }
    }
}

@Mitch no, doesn't work. Thank you for your contribution anyway :-) — Valentin H, Jun 28 '16 at 08:45

Tarod · Accepted Answer · 2016-06-27T05:30:07.413

2

As far as I know and according to the documentation,

The Component type essentially allows QML components to be defined inline, within a QML document, rather than as a separate QML file.

Here we have more information related to this question,

A component is an instantiable QML definition, typically contained in a .qml file. For instance, a Button component may be defined in Button.qml.

So, in your case, your LangDelegate.qml file doesn't need the root Component element. Use Item instead of Component.

Example:

LangDelegate.qml

import QtQuick 2.0

Item {
    id: langDlg

    width: 100
    height: 100

    Rectangle {
        id: background
        x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
        color: "lightgrey"
        border.color: "orange"
        radius: 5
    }
}

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    LangDelegate { id: langDlg }
}

edited Jun 27 '16 at 05:30

answered Jun 24 '16 at 10:32

Tarod

6,732
5
44
50

The extra `langDlg` item can be left out. :) – jpnurmi Jun 24 '16 at 21:11
Thank you very much for the explanation. Seems to be easy indeed. P.S.: Unfortunately, I gave up QML and switched to C++ again. Anyway any not trivial Quick application requires C++ to be touched. In my case I failed on models and filters – Valentin H Jun 28 '16 at 08:43
1

@ValentinHeinitz I agree with you. QML applications usually need C++ to do complex tasks. Thanks to you, anyway! Happy coding :) – Tarod Jun 28 '16 at 09:08

How to move a component with a custom property to a separate file in QML

1 Answers1