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

谁借莪１个温暖的怀抱￠ 2023-07-10 15:56 54阅读 0赞

# 一、前言 #

针对最新版本 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
            
            delegate: SysTableViewDelegate {
            }
            //左上角内容自定义类以 Rectangle 
            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
                    }
                }
            }
            //行头部
            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 { }
        }

# 三、图示 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0ODkwOTUz_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0ODkwOTUz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200303203157327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0ODkwOTUz,size_16,color_FFFFFF,t_70