项目中对服务器数据进行管理,数据处理使用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的方法可参考帮助文档