20200303-03 QML TableView(Qt5.12) 设置行/列表头

一、前言

  针对最新版本 TableView 如何设置表头,在新版中直接继承 Flickable 所以各项效果更加完备,由于需要频繁弹出和压入数据以保证资源的最大利用,官方建议不太适合静态类型的 delegate

       新版中,使用 index 进行数据索引,不再使用 styleData 关键字

二、示例

    TableView {
        anchors {
            top: parent.top
            bottom: bottomCheckGroup.top
            left: parent.left
            right: parent.right
            topMargin: 0
            leftMargin: 0
            rightMargin: 0
            bottomMargin: 2
        }

        id: tableView
        //QML 新出的设置行宽和列宽的方式,如果需要某一行隐藏,只需要将这一行返回值设置为 0 即可
        //具体看官方文档
        columnWidthProvider: function (column) { return __headWidth; }
        rowHeightProvider: function (column) { return 25; }


        leftMargin: rowsHeader.implicitWidth
        topMargin: columnsHeader.implicitHeight
        model: MyAdjustModel {

            id: table_model
        }


        ScrollBar.horizontal: ScrollBar{}
        ScrollBar.vertical: ScrollBar{}
        clip: true

        //用于关闭拖动效果
        boundsBehavior: Flickable.OvershootBounds
        reuseItems: false
        delegate: SysTableViewDelegate {
        }
        //左上角内容
        SysTableLeftTopMaskDelegate {

        }
        //列头部 利用 Repeater 自动重复生成
        //SysTableTextColumnsHeaderDelegate 是本人自定义变量需要替换
        //新版 TableView 使用 index 进行数据索引        
        Row {
            id: columnsHeader
            y: tableView.contentY
            z: 2

            Repeater {
                model: tableView.columns > 0 ? tableView.columns : 1
                SysTableTextColumnsHeaderDelegate{
                    width: tableView.columnWidthProvider(modelData)
                    height: 65
                    color: __bordColor
                    titleWorkObj: table_model.getTitleParent(index)
                }
            }
        }
        //行头部
        Column {
            id: rowsHeader
            x: tableView.contentX
            z: 2
            Repeater {
                model: tableView.rows > 0 ?  tableView.rows : 1
                Rectangle {
                    width: 60
                    height: tableView.rowHeightProvider(modelData)
                    color: __bordColor
                    Label {
                         anchors.fill: parent
                         anchors {bottomMargin: 2}
                         anchors.centerIn: parent
                         text: table_model.headerData(modelData, Qt.Vertical)
                         color: '#7785a9'
                         font.pixelSize: 15
                         padding: 10
                         verticalAlignment: Text.AlignVCenter
                         horizontalAlignment: Text.AlignHCenter
                         background: Rectangle { color: "white" }
                    }
                }
            }
        }

        ScrollIndicator.horizontal: ScrollIndicator { }
        ScrollIndicator.vertical: ScrollIndicator { }
    }

三、图示

20200303-03 QML TableView(Qt5.12) 设置行/列表头

 

上一篇:JTextArea设置滚动条/与自动换行


下一篇:更改内容时停止滚动文本小部件