QML ListView Demo（2）

效果图：

这是在之前的文章中增加了对每一个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 )
			}
		}
	}
}           

整个Item的高度再根据model的count来变化：

Component {
	id: main_view_delegate
	Item {
		id: wrapper
		width: parent.width
		height: spread ? 24 * (sub_model.count + 1) : 24