效果图：
这是在之前的文章中增加了对每一个ListView中Item的编辑，在Delegate中修改即可，因为考虑到会动态增加个数，所以在实现Delegate时还是用了ListView，这是一个ListView嵌套ListView的例子。
Delegate的代码：
Component {
id: main_view_delegate
Item {
id: wrapper
width: parent.width
height: spread ? 24 * (sub_model.count + 1) : 24
property bool spread: false
clip: true
onHeightChanged: {
view_background.updateHeight()
}
Rectangle {
id: background
anchors.fill: parent
width: parent.width
height: parent.height
color: "#006c76"
property var colorDlg: null
Button {
id: spread_btn
width: 18
height: 18
text: wrapper.spread ? "-" : "+"
anchors.top: parent.top
anchors.topMargin: 3
anchors.left: parent.left
anchors.leftMargin: 3
onClicked: {
wrapper.spread = !wrapper.spread
}
}
Text {
id: title
anchors.verticalCenter: spread_btn.verticalCenter
anchors.left: spread_btn.right
anchors.leftMargin: 5
color: "white"
text: titleName
}
Rectangle {
anchors.right: parent.right
anchors.left: parent.left
anchors.top: spread_btn.bottom
anchors.bottom: parent.bottom
anchors.leftMargin: 20
anchors.topMargin: 3
color: "#ebebeb"
ListView {
id: sub_view
anchors.fill: parent
model: sub_model
delegate: sub_view_delegate
}
ListModel {
id: sub_model
ListElement {
headName: "Color"
realValue: "red"
}
ListElement {
headName: "Setting Mode"
realValue: "Auto"
}
}
Component {
id: sub_view_delegate
Item {
id: wrapper
width: parent.width
height: 24
Rectangle {
id: sub_background
anchors.fill: parent
color: "#ebebeb"
Text {
id: head_name
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
text: headName
}
Rectangle {
id: row_trans
height: parent.height
width: 1
color: "#006c76"
anchors.left: parent.left
anchors.leftMargin: 80
}
Rectangle {
id: color_area
visible: index === 0
width: 20
height: 20
color: String( realValue )
border.color: "black"
border.width: 1
anchors.left: row_trans.right
anchors.leftMargin: 5
anchors.verticalCenter: parent.verticalCenter
MouseArea {
anchors.fill: parent
onClicked: {
sub_background.selectionColor()
}
}
}
ComboBox {
id: setting_combobox
width: 200
height: 24
anchors.left: row_trans.right
anchors.verticalCenter: parent.verticalCenter
visible: index === 1
model: ListModel {
ListElement {
text: "Auto"
}
ListElement {
text: "Manual"
}
}
onCurrentIndexChanged: {
if( currentText === "Manual" ) {
sub_model.append( {"headName": "Max", "realValue": "10" } )
sub_model.append( {"headName": "Min", "realValue": "0" } )
} else if( currentText === "Auto" ) {
if( sub_model.count > 2 ) {
sub_model.remove( 2, 2 )
}
}
}
}
Text {
id: real_value
anchors.verticalCenter: parent.verticalCenter
anchors.left: row_trans.right
anchors.leftMargin: 5
text: realValue
visible: index > 1
}
Rectangle {
id: bottom_trans
height: 1
width: parent.width
color: "#006c76"
anchors.bottom: parent.bottom
}
function selectionColor() {
if( background.colorDlg === null ) {
background.colorDlg = Qt.createQmlObject(
'import QtQuick 2.2;import QtQuick.Dialogs 1.1;ColorDialog{}',
background, "colorDlg");
background.colorDlg.accepted.connect(setColor);
background.colorDlg.accepted.connect(onColorDlgClosed);
background.colorDlg.rejected.connect(onColorDlgClosed);
background.colorDlg.visible = true
}
}
function setColor() {
sub_model.setProperty( 0, "realValue", String(background.colorDlg.color) )
}
function onColorDlgClosed() {
background.colorDlg.destroy()
background.colorDlg = null
}
}
}
}
}
}
}
}嵌套的ListView的Delegate实现了多个组件的显示，通过判断index来设置visible属性：
Rectangle {
id: color_area
visible: index === 0
width: 20
height: 20
color: String( realValue )
border.color: "black"
border.width: 1
anchors.left: row_trans.right
anchors.leftMargin: 5
anchors.verticalCenter: parent.verticalCenter
MouseArea {
anchors.fill: parent
onClicked: {
sub_background.selectionColor()
}
}
}
嵌套的ListView的动态增加实现，只要给内部ListView的model增加数据即可：
ComboBox {
id: setting_combobox
width: 200
height: 24
anchors.left: row_trans.right
anchors.verticalCenter: parent.verticalCenter
visible: index === 1
model: ListModel {
ListElement {
text: "Auto"
}
ListElement {
text: "Manual"
}
}
onCurrentIndexChanged: {
if( currentText === "Manual" ) {
sub_model.append( {"headName": "Max", "realValue": "10" } )
sub_model.append( {"headName": "Min", "realValue": "0" } )
} else if( currentText === "Auto" ) {
if( sub_model.count > 2 ) {
sub_model.remove( 2, 2 )
}
}
}
}Component {
id: main_view_delegate
Item {
id: wrapper
width: parent.width
height: spread ? 24 * (sub_model.count + 1) : 24