Question

假设我有一个TableView，可以在其中添加或删除列。

该表最终将具有一个水平滚动，在其中我可以向右滚动，但是如果我更改了该表的列/内容（在其中向右滚动），那么在我看来出现了bug ），现在宽度小于原来的空白！如果我向左滚动一点，它将获得正确的宽度。

让我以图片为例。我启动有3列的应用程序（其中一列不可见）

现在，我单击options: column 3（它具有更多列，并且我将所有内容滚动到右侧）

最后，我再次单击options: columns 1，然后发生bug

运行此示例的代码：

    import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.1

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    width: 300
    ListModel {
        id: libraryModel
        ListElement {
            title: "A Masterpiece"
            author: "Gabriel"
        }
        ListElement {
            title: "Brilliance"
            author: "Jens"
        }
        ListElement {
            title: "Outstanding"
            author: "Frederik"
        }
    }

    Page {
        id: page
        anchors.fill: parent

        RowLayout {
            id:chooseColum
            Layout.bottomMargin: 10
            Text {
                id: txtpn
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: "Options :"
            }
            ComboBox {
                implicitWidth:200
                textRole: "text"
                model: ListModel {
                    ListElement { text: qsTr("columns 1"); cb: "column1" }
                    ListElement { text: qsTr("columns 2"); cb: "column2" }
                    ListElement { text: qsTr("columns 3"); cb: "column3" }
                }
                onCurrentIndexChanged: {
                    var cb = model.get(currentIndex).cb
                    if (cb === "column1") {
                        table.showcolumn1()
                    } else if (cb === "column2") {
                        table.showcolumn2()
                    } else if (cb === "column3") {
                        table.showcolumn3()
                    }
                }
            }
        }



        TableView{
            id:table
            anchors{
                top:chooseColum.bottom
                topMargin:10
                left:parent.left
                right:parent.right
                bottom:parent.bottom
            }
            model: libraryModel

            function showColumns (columns, preoffset, posoffset) {
                if (preoffset === undefined) {
                    preoffset = 0
                }
                if (posoffset === undefined) {
                    posoffset = 0
                }
                var i = columnCount - posoffset
                if (i == 0) {
                    return
                }
                for (; i>preoffset; i--) {
                    removeColumn(preoffset)
                }
                for (i=0; i<columns.length; i++) {
                    insertColumn(i+preoffset, columns[i])
                }
                resizeColumnsToContents()
            }

            function showcolumn1 () {
                showColumns([col2, col3], 1)
                //table.width = col2.implicitWidth + col3.implicitWidth
            }
            function showcolumn2 () {
                showColumns([col4, col5], 1)
                //table.width = col4.implicitWidth + col5.implicitWidth
            }
            function showcolumn3 () {
                showColumns([col6, col7, col8, col9 , col10], 1)
                //table.width = col6.implicitWidth + col7.implicitWidth + col8.implicitWidth + col9.implicitWidth + col10.implicitWidth
            }
            function columnWidth () {
                return ((table.width / table.columnCount) - 5)< 150 ? 150 :((table.width / table.columnCount) - 5)
            }


            style: TableViewStyle{
                handle: Rectangle {
                    implicitWidth: 15
                    implicitHeight: 15
                    color:  "#000000"
                }
            }
            headerDelegate: Rectangle{
                id:recHeader
                width:styleData.width+20
                height:30
                color:"blue"
                border.color: "black"
                border.width: 1
                Text {
                    anchors.fill:parent
                    //color:globals.text.textColor
                    text:styleData.value
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
            itemDelegate: Rectangle {
                border.color:"black"
                border.width: 1
                Text
                {
                  text: styleData.value
                  elide: Text.ElideRight
                }
            }
            Component.onCompleted: {
                showcolumn1()
            }

            TableViewColumn {
                id: col1
                role: "title"
                title: "Title"
                //width: (table.width / table.columnCount) - 1
            }
            Component {
                id: col2
                TableViewColumn {
                    //id: col2
                    role: "author"
                    title: "Authors of this tutorial"
                    //width: (table.width / table.columnCount) - 1
                }
            }
            Component {
                id: col3
                TableViewColumn {
                    //id: col3
                    title: "Column spinbox 1"
                    //width: (table.width / table.columnCount) - 1
                    delegate: SpinBox {
                        minimumValue: 0
                        maximumValue: 100
                        implicitWidth: 200
                    }
                }
            }
            Component {
                id: col4
                TableViewColumn {
                    //id: col4
                    title: "Column spinbox 2"
                    //width: (table.width / table.columnCount) - 1
                    delegate: SpinBox {
                        minimumValue: 0
                        maximumValue: 100
                        implicitWidth: 200
                    }
                }
            }
            Component {
                id: col5
                TableViewColumn {
                    //id: col5
                    title: "Column spinbox 3"
                    //width: (table.width / table.columnCount) - 1
                    delegate: SpinBox {
                        minimumValue: 0
                        maximumValue: 100
                        implicitWidth: 200
                    }
                }
            }
            Component {
                id: col6
                TableViewColumn {
                    //id: col6
                    title: "Column spinbox 4"
                    //width: (table.width / table.columnCount) - 1
                    delegate: SpinBox {
                        minimumValue: 0
                        maximumValue: 100
                        implicitWidth: 200
                    }
                }
            }
            Component {
                id: col7
                TableViewColumn {
                    //id: col7
                    title: "Column spinbox 5"
                    //width: (table.width / table.columnCount) - 1
                    delegate: SpinBox {
                        minimumValue: 0
                        maximumValue: 100
                        implicitWidth: 200
                    }
                }
            }
            Component {
                id: col8
                TableViewColumn {
                    //id: col8
                    title: "Column spinbox 5"
                    //width: (table.width / table.columnCount) - 1
                    delegate: SpinBox {
                        minimumValue: 0
                        maximumValue: 100
                        implicitWidth: 200
                    }
                }
            }
            Component {
                id: col9
                TableViewColumn {
                    //id: col9
                    title: "Column spinbox 5"
                    //width: (table.width / table.columnCount) - 1
                    delegate: SpinBox {
                        minimumValue: 0
                        maximumValue: 100
                        implicitWidth: 200
                    }
                }
            }
            Component {
                id: col10
                TableViewColumn {
                    //id: col10
                    title: "Column spinbox 5"
                    //width: (table.width / table.columnCount) - 1
                    delegate: SpinBox {
                        minimumValue: 0
                        maximumValue: 100
                        implicitWidth: 200
                    }
                }
            }
        }
    }
}

Answer 1

在更改显示的列后，我进行了水平滚动以解决此问题。所以我添加了以下行

table.flickableItem.contentX=0

到功能

    function showColumns (columns, preoffset, posoffset) {

        if (preoffset === undefined) {
            preoffset = 0
        }
        if (posoffset === undefined) {
            posoffset = 0
        }
        var i = columnCount - posoffset
        if (i == 0) {
            return
        }
        for (; i>preoffset; i--) {
            removeColumn(preoffset)
        }
        for (i=0; i<columns.length; i++) {
            insertColumn(i+preoffset, columns[i])
        }
        resizeColumnsToContents()
        table.flickableItem.contentX=0
    }

现在，在更改列之后，滚动条将自动定位在左侧，列将出现，并且滚动条将与显示的内容保持同步。

在QML中使用内容更改进行TableView更新的问题

1 个答案: