QML ListView Demo（1）

效果图：

代码：

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    id: main_window
    visible: true
    width: 300
    height: 400

    Rectangle {
        id: view_rect
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: 300
        color: "#ebebeb"
        clip: true

        ScrollView {
            anchors.fill: parent
            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
            Rectangle {
                id: view_background
                anchors.top: parent.top
                anchors.left: parent.left
                width: 300
                height: view_rect.height
                color: "#006c76"
                clip: true
                function updateHeight() {
                    var total_height = 0
                    for( var i = 0; i < main_view.count; ++i ) {
                        main_view.currentIndex = i
                        var crt_view = main_view.currentItem
                        if( crt_view ) {
                            total_height += crt_view.height
                        }
                    }
                    height = total_height
                }
                ListView {
                    id: main_view
                    anchors.fill: parent
                    boundsBehavior: Flickable.StopAtBounds
                    delegate: main_view_delegate
                    model: view_model
                    Component.onCompleted: {
                        view_background.updateHeight()
                    }
                    onCountChanged: {
                        view_background.updateHeight()
                    }
                }
            }
        }        
    }
    ListModel {
        id: view_model
        ListElement {
            titleName: "Query"
        }
        ListElement {
            titleName: "Number"
        }
        ListElement {
            titleName: "Time"
        }
        ListElement {
            titleName: "Name"
        }
        ListElement {
            titleName: "Kind"
        }
        ListElement {
            titleName: "Cool"
        }
        ListElement {
            titleName: "Home"
        }
        ListElement {
            titleName: "Shift"
        }
        ListElement {
            titleName: "Enter"
        }
        ListElement {
            titleName: "Ctrl"
        }
    }
    Component {
        id: main_view_delegate
        Item {
            id: wrapper
            width: parent.width
            height: spread ? 24 * 4 : 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"
                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"
                    Text {
                        text: "AAAAAAAAAAAAAAAAAA"
                    }
                }
            }
        }
    }
}

代码中用ScrollView调试ListView每次展开后高度的变化时遇到个问题，在获取整个View的高度的方法用的是一次次去currentItem获取height再相加，原本可以是ScrollView内直接写一个ListView界面，但因获取height的函数使index都切换都最后的index，每次展开后页面都会滚动到最下面。所以现在又套了一层Rectangle。