QML实战笔记1——相同类型，另建qml组件供调用

HomeIcons.qml 

import QtQuick 2.9

Item{
    id: item
    width: window.width/2
    height: window.height/3

    signal clicked()

    Image{
        id: homeImage
        anchors.centerIn: parent
        source: sr
        sourceSize{width: 120; height: 120}

        MouseArea{
            id: mousearea
            anchors.fill: parent
            hoverEnabled: true
            onClicked:
            {
                item.clicked()
            }
        }

        states:State{
            when: mousearea.containsMouse
            PropertyChanges {
                target: homeImage
                width:200
                height:200
            }
        }
    }

    Text{
        id:homeText
        anchors.horizontalCenter: homeImage.horizontalCenter
        text: description
        font.pointSize: 20
        anchors{top: homeImage.bottom; topMargin: 20}
    }
}

Home.qml

import QtQuick 2.0
import QtQuick.Controls 2.3

Item {
    id:item

    function addExample(source, desc) {
        myModel.append({"sr": source, "description": desc})
    }

    Rectangle {
        id: rect
        anchors.fill: parent
        gradient: Gradient
        {
            GradientStop { position: 0; color: "transparent"}
            GradientStop { position: 0.25; color: "lightblue"}
        }

        GridView{// 附加isCurrentItem属性到每个他创建的代理上
            id: launcherList
            anchors.fill: rect
            cellWidth: rect.width/2; cellHeight: rect.height/3
            interactive: false
            delegate: HomeIcons{}
            model: ListModel {id: myModel}
            enabled: opacity == 1.0
        }
    }
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import "./Home" as Home

Window {
    id: window   //id  //QQuickWindowQmlImpl
    visible: true
    minimumWidth: 800
    minimumHeight:  680
    title: qsTr("MainWindow")

    Home.Home{
        id: ll
        anchors.fill: parent
        Component.onCompleted: {
            addExample("../resource/homeIcons/program.svg", "Program",/* Qt.resolvedUrl*/("../Program/Program.qml"))
            addExample("../resource/homeIcons/fmcs.svg", "FMCS", Qt.resolvedUrl("../FMCS/Fmcs.qml"))
            addExample("../resource/homeIcons/calibration.svg", "Calibration", Qt.resolvedUrl("../Calibration/Calibration.qml"))
            addExample("../resource/homeIcons/production.svg", "Production", Qt.resolvedUrl("../Production/Production.qml"))
            addExample("../resource/homeIcons/settings.svg", "Settings", Qt.resolvedUrl("../Settings/Settings.qml"))
        }
    }
}

 main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtQuickWidgets/QQuickWidget>
#include <QQmlContext>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}