サーバデータ管理、商品情報モジュールは、シミュレートされた移動端末の効果(モバイル結果と一致端末)、使用を達成するために望んでいる間、データは、QWidgetの、QNetworkAccessManager処理プロジェクトを用いた処理QMLの実装をロードQQuickWidget。ここでは、インタフェースの実装を導入し、データ収集が導入されていません。
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
}
}
}
}
}
商品アイテム:
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は、モデル法にエクスポートされるヘルプドキュメントを参照することができます