gistfile1.txt

import QtQuick 2.7
Item {
    id: contentColumnView
    clip: true
    property bool hideHeader: true
    property var headerTextList: ["t1","t2","t3"]
    property ListModel model
    property int rowHeight: 150
    property int columnCount: 2

    property var widthList: {
        switch (columnCount) {
        case 2:
            return [width * 0.7, width * 0.3]
        case 3:
            return [width * 0.4, width * 0.3, width * 0.3]
        case 4:
            return [width * 0.2, width * 0.4, width * 0.2, width * 0.2]
        }
    }

    Row {
        id: contentHeader
        spacing: 50
        height: hideHeader ? 0 : 150
        width: parent.width
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
        Repeater {
            model: columnCount
            Item {
                clip: true
                height: parent.height
                width: widthList.length === 0 ? 400 : widthList[index]
                Text {
                    id: t01
                    elide: Text.ElideRight
                    anchors {
                        centerIn: parent
                    }

                    text: contentColumnView.headerTextList[index]
                    wrapMode: Text.WrapAnywhere
                    horizontalAlignment: {
                        //The valid values for horizontalAlignment are
                        //Text.AlignLeft, Text.AlignRight, Text.AlignHCenter and Text.AlignJustify.
                        //The valid values for verticalAlignment are
                        //Text.AlignTop, Text.AlignBottom and Text.AlignVCenter.
                        switch (index) {
                        case 0:
                            return Text.AlignLeft
                        case 1:
                            return Text.AlignHCenter
                        case 2:
                            return Text.AlignHCenter
                        case 3:
                            return Text.AlignHCenter
                        case 4:
                            return Text.AlignHCenter
                        }
                    }

                    verticalAlignment: Text.AlignVCenter
                    height: parent.height
                    width: parent.width - 50
                    color: "#1ac3bf"
                    font {
                        family: "微软雅黑"
                        pixelSize: 50
                    }
                }
            }
        }
    }

    Flickable {
        id: flickable
        clip: true

        flickableDirection: Flickable.VerticalFlick
        anchors {
            top: contentHeader.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }

        contentHeight: {
            var subHeight = 0
            for (var i = 0; i < repeater.count; ++i){
                subHeight += repeater.itemAt(i).height
            }
            console.info(subHeight)
            return subHeight
        }
        contentWidth: height

        Column {
            id: column
            width: parent.width
            height: parent.height

            Repeater {
                id: repeater
                model: contentColumnView.model
                Item
                {

                    height: contentColumnView.rowHeight
                    width: contentColumnView.width
                    Rectangle {
                        height: 1
                        width: parent.width
                        color: "#3fffffff"
                        visible: index === 0
                        anchors {
                            left: parent.left
                            top: parent.top
                        }
                    }
                    Rectangle {
                        height: 1
                        width: parent.width
                        color: "#3fffffff"
                        anchors {
                            left: parent.left
                            bottom: parent.bottom
                        }
                    }
                    Row {
                        id: contentPiece
                        spacing: 50
                        height: contentColumnView.rowHeight
                        width: column.width / 2
                        Rectangle {
                            height: parent.height
                            width: 5
                            color: index % 2 === 0 ? "transparent" : "#1ac3bf"
                        }

                        Repeater {
                            model: columnCount
                            property int outIndex: index
                            Item {
                                clip: true
                                height: parent.height
                                width: widthList.length === 0 ? 400 : widthList[index]

                                Text {
                                    id: t1
                                    elide: Text.ElideRight
                                    anchors {
                                        centerIn: parent
                                    }

                                    text: {
                                        var array = modelText.split(",")
                                        return array[index]
                                    }

                                    wrapMode: Text.WrapAnywhere

                                    horizontalAlignment: {
                                        //The valid values for horizontalAlignment are
                                        //Text.AlignLeft, Text.AlignRight, Text.AlignHCenter and Text.AlignJustify.
                                        //The valid values for verticalAlignment are
                                        //Text.AlignTop, Text.AlignBottom and Text.AlignVCenter.
                                        switch (index) {
                                        case 0:
                                            return Text.AlignLeft
                                        case 1:
                                            return Text.AlignHCenter
                                        case 2:
                                            return Text.AlignHCenter
                                        case 3:
                                            return Text.AlignHCenter
                                        case 4:
                                            return Text.AlignHCenter
                                        }
                                    }
                                    verticalAlignment: Text.AlignVCenter
                                    height: parent.height
                                    width: parent.width - 50
                                    color: "#9fffffff"
                                    font {
                                        family: "微软雅黑"
                                        pixelSize: 50
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}