QML使用HorizontalHeaderView显示TableModel自定义列标题的问题问询

• 布局冲突：你当前的TableView设置了anchors.fill: parent，占满了整个窗口，HorizontalHeaderView被完全遮挡，即使内容正确也无法显示。
• 表头数据读取逻辑错误：HorizontalHeaderView直接绑定TableModel作为模型时，默认的display角色对应的是列序号，不会自动读取TableModel中定义的TableModelColumn属性。

1. 调整布局，使用Column容器承载表头和表格，避免遮挡。
2. 修改HorizontalHeaderView的delegate逻辑，从TableModel的columns属性中读取对应列的配置作为表头文本。
3. 如果你需要显示和字段名不同的友好表头名称，可以给TableModelColumn新增自定义属性存储表头文本。

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

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    
    TableModel {
        id: myModel
        // 可自定义headerText属性存储友好表头名，也可以直接用原display的字段名
        TableModelColumn { display: "companyName"; headerText: "公司名称" }
        TableModelColumn { display: "info1"; headerText: "信息1" }
        TableModelColumn { display: "info2"; headerText: "信息2" }
        rows: [
            {
                companyName: "company 1",
                info1: "company 1 info 1",
                info2: "company 1 info 2"
            },
            {
                companyName: "company 2",
                info1: "company 2 info 1",
                info2: "company 2 info 2"
            },
            {
                companyName: "company 3",
                info1: "company 3 info 1",
                info2: "company 3 info 2"
            }
        ]
    }
    
    Column {
        anchors.fill: parent
        HorizontalHeaderView {
            id: horizontalHeader
            syncView: myTableView
            width: parent.width
            delegate: Rectangle {
                implicitWidth: 100
                implicitHeight: 50
                border.width: 1
                color: "#f0f0f0"
                Text {
                    // 不需要友好名的话可以替换为 myModel.columns[index].display
                    text: myModel.columns[index].headerText
                    anchors.centerIn: parent
                }
            }
        }
        
        TableView {
            id: myTableView
            width: parent.width
            height: parent.height - horizontalHeader.height
            clip: true
            model: myModel
            delegate: Rectangle {
                implicitWidth: 100
                implicitHeight: 50
                border.width: 1
                Text {
                    text: display
                    anchors.centerIn: parent
                }
            }
        }
    }
}

• 用Column容器排列表头和表格，解决了元素遮挡问题。
• 表头delegate通过index索引读取TableModel的columns数组中的对应列配置，直接获取预定义的表头文本。
• 额外提供了自定义友好表头的实现方式，不需要的话可以直接替换为读取display属性的值。

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