Qt QML与QWidget联合使用管理服务器中商品信息

项目中对服务器数据进行管理，数据处理使用QWidget，QNetworkAccessManager处理，而商品信息模块想实现仿移动端效果（与移动端效果一致），因此使用QQuickWidget加载QML实现。此处主要介绍界面实现，数据获取不进行介绍。

QQuickWidget中加载的QML

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.3

Item {
    Material.foreground: Material.Teal
    signal buttonClicked(string id);

    Rectangle {
        id: rectangle
        color: "#ffffff"
        radius: 5
        border.width: 0
        border.color: "#00000000"
        anchors.fill: parent

        Rectangle {
            id: rectangle2
            width: 160
            color: "#00000000"
            border.width: 2
            border.color: "#00a881"
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0

            ButtonGroup {
                id:classifyGroup
                buttons: listView.children
            }

            ListView {
                id: listView
                anchors.bottomMargin: 5
                clip: true
                keyNavigationWraps: false
                anchors.fill: parent
                highlight: Rectangle {
                    color: "lightskyblue"; radius: 5
                    x: 3
                    y: listView.currentItem.y
                    Behavior on y {
                        SpringAnimation {
                            spring: 3
                            damping: 0.2
                        }
                    }
                }
                spacing: 3
                topMargin:3
                model:classityModel
                header:Rectangle{
                    width: 160
                    height: 40
                    color: "#00a881"
                    z:3
                    Text{
                        color: "#ffffff"
                        anchors.fill: parent
                        text: "商品类别"
                        font.letterSpacing: 5
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        font.family: "方正粗倩简体"
                        font.pointSize: 15
                    }
                }
                headerPositioning:ListView.OverlayHeader
                delegate:ItemDelegate {
                    property var id: modelData.id
                    height: 60
                    text: modelData.name
                    autoExclusive: true
                    checkable: true
                    checked: false
                    display: AbstractButton.TextBesideIcon
                    anchors.right: parent.right
                    anchors.rightMargin: 3
                    anchors.left: parent.left
                    anchors.leftMargin: 3
                    icon.source: modelData.url
                    font.family: "方正粗倩简体"
                    font.pointSize: 18
                    icon.width: 50
                    icon.height: 50
                    icon.color: "transparent"
                    onClicked:{
                        listView.currentIndex = index
                        emit:buttonClicked(id)
                    }
                }
            }
        }

        GridView {
            id: gridView
            anchors.bottomMargin: 10
            anchors.topMargin: 10
            anchors.rightMargin: 5
            anchors.leftMargin: 175
            anchors.fill: parent
            cellWidth: 220
            cellHeight: 280
            highlight: Rectangle{
                color: "lightsteelblue"
                radius: 5
                x: gridView.currentItem.x
                y: gridView.currentItem.y
                Behavior on x{
                    SpringAnimation{
                        spring: 3
                        damping: 0.2
                    }
                }

                Behavior on y {
                    SpringAnimation {
                        spring: 3
                        damping: 0.2
                    }
                }
            }
            model: detailModel
            delegate: ListItem{
                width: 230
                height: 280
                title: modelData.title
                price: "¥ "+modelData.price
                url:modelData.url
                mouseArea.onClicked: {
                    gridView.currentIndex = index
                }
            }
        }
    }

}

商品Item：

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.3

Item {
    id: item1
    width: 200
    height: 260
    property alias mouseArea: mouseArea
    property string title: "衬衫/T恤衫 预计3天"
    property string price: "¥ 15.00"
    property string url: ""



    Column {
        id: column
        width: 200
        height: 240
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        spacing: 5

        Image {
            id: image
            width: 160
            height: 170
            anchors.horizontalCenter: parent.horizontalCenter
            source: url
        }

        Text {
            id: text_title
            height: 30
            color: "#999999"
            text: title
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pointSize: 13
            font.family: "微软雅黑"

        }

        Text {
            id: text_title1
            height: 30
            color: "#0084cf"
            text: price
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 15
            font.family: "微软雅黑"
            anchors.horizontalCenter: parent.horizontalCenter
        }

    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

}

将C++导出成QML中的Model的方法可参考帮助文档