QML中TableView创建、自定义、数据库连接及列名不显示问题咨询

1. 列名不显示问题修复 #

Qt Quick Controls 2 原生的TableView组件默认不自带表头渲染逻辑，你没有手动实现表头部分，所以才看不到列名，修复方案如下：
在原有TableView上方新增表头布局，和表格列一一对应即可，修改后的核心代码如下：

import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt.labs.qmlmodels 1.0

Item {
    width: 1126
    height: 800

    Rectangle {
        id: rectangle
        color: "#e0e0e0" // 背景设为分割线颜色，靠spacing实现分割线效果
        anchors.fill: parent

        Column {
            anchors.fill: parent
            spacing: 1

            // 表头行
            Row {
                id: headerRow
                width: parent.width
                spacing: 1
                readonly property var headerNames: ["客户", "地址", "手机号", "邮箱", "城市", "州/省", "国家"]

                Repeater {
                    model: headerRow.headerNames.length
                    Rectangle {
                        implicitWidth: 160
                        height: 45
                        color: "#f0f0f0"
                        Text {
                            text: headerRow.headerNames[index]
                            anchors.centerIn: parent
                            font.bold: true
                        }
                    }
                }
            }

            TableView {
                id: tableView
                width: parent.width
                height: parent.height - headerRow.height
                columnSpacing: 1
                rowSpacing: 1
                clip: true

                // 列宽和表头保持一致
                columnWidthProvider: function(column) {
                    return 160
                }

                model: TableModel {
                    TableModelColumn { display: "customer" }
                    TableModelColumn { display: "address" }
                    TableModelColumn { display: "mobile" }
                    TableModelColumn { display: "email" }
                    TableModelColumn { display: "city" }
                    TableModelColumn { display: "state" }
                    TableModelColumn { display: "country" }

                    rows: [
                        {
                            "customer": "h",
                            "address": "down",
                            "mobile": "34556",
                            "email": "ty@gmail.com",
                            "city": "new york",
                            "state": "new york",
                            "country": "USA"

                        },
                        {
                            "customer": "h",
                            "address": "down",
                            "mobile": "34556",
                            "email": "ty@gmail.com",
                            "city": "new york",
                            "state": "new york",
                            "country": "USA"
                        },
                        {
                            "customer": "h",
                            "address": "down",
                            "mobile": "34556",
                            "email": "ty@gmail.com",
                            "city": "new york",
                            "state": "new york",
                            "country": "USA"
                        }
                    ]
                }

                delegate: Rectangle {
                    implicitHeight: 50
                    color: index % 2 == 0 ? "#ffffff" : "#fafafa" // 隔行变色效果

                    Text {
                        text: display
                        anchors.centerIn: parent
                    }

                    // 可选：添加hover效果
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: parent.color = "#e8f4ff"
                        onExited: parent.color = index % 2 == 0 ? "#ffffff" : "#fafafa"
                    }
                }
            }
        }
    }
}

2. QML表格自定义样式方法 #

你可以从以下几个维度自定义表格样式：

• 单元格样式：修改delegate内Rectangle的颜色、边框、圆角属性，可实现隔行变色、hover高亮、选中高亮效果，文本样式直接修改delegate内的Text属性即可。
• 表头样式：自定义表头的背景色、字体粗细、对齐方式，也可添加点击表头排序的交互逻辑。
• 分割线样式：把表格父容器的背景色设为分割线颜色，调整columnSpacing和rowSpacing的数值控制分割线粗细，不需要额外绘制分割线组件。
• 交互样式：可在delegate内添加MouseArea实现点击选中、双击编辑等交互，编辑状态直接替换Text为TextInput组件即可。

3. 对接后端数据库实现方案 #

推荐采用C++实现数据模型+QML渲染的分层方案：

1. 数据模型层：C++侧继承QAbstractTableModel类，实现rowCount、columnCount、data、headerData四个核心虚函数，如果需要支持编辑还要实现setData函数。
2. 数据库连接层：C++侧用QSqlDatabase连接MySQL、PostgreSQL等数据库，用QSqlQuery执行增删改查操作，把查询结果填充到自定义的QAbstractTableModel实例中。
3. QML侧绑定：把C++实现的表格模型通过setContextProperty或者qmlRegisterType注册到QML上下文，直接赋值给TableView的model属性即可，不需要修改原有QML渲染逻辑。
4. 大数据优化：如果数据量超过1万条，不要一次性加载全量数据，在C++模型中实现分页逻辑，监听TableView的滚动位置，滚动到底部时自动加载下一页数据插入模型。

如果是小型本地应用，也可以直接用QML内置的LocalStorage模块操作Sqlite数据库，无需编写C++代码。

内容的提问来源于stack exchange，提问作者Fakhr Ali