Qt QML QWidget utiliza en conjunción con el servidor de gestión de la información del producto

gestión de datos del servidor, el procesamiento de los datos usando QWidget, proyectos de tratamiento de QNetworkAccessManager, mientras que el módulo de información de la mercancía quiere lograr el efecto de terminal móvil simulado (terminales móviles consistentes con los resultados), el uso deQQuickWidget cargar la aplicación QML. Aquí se introduce la implementación de la interfaz, no se introduce la adquisición de datos.

QQuickWidget cargado 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
                }
            }
        }
    }

}

Artículo de producto:

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 se exportará en el Método de los modelos se puede referir a la documentación de ayuda