在 qml 中创建一个 table，它的自定义和与数据库的连接

Question

所以我想创建一个类似于图片中的table。

所以在搜索之后我决定使用table查看我的代码如下。

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

Item {
    width: 1126
    height: 800

    Rectangle {
        id: rectangle
        color: "#ffffff"
        anchors.fill: parent
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        anchors.topMargin: 0

        TableView {
            anchors.fill: parent
            columnSpacing: 1
            rowSpacing: 1
            clip: true

            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
                implicitWidth: 100
                border.width: 1

                Text {
                    text: display
                    anchors.centerIn: parent
                }
            }
        }
    }
}

我怎么看不到列名？

Answer 1

TableModel 类型旨在支持非常简单的模型，而无需在 C++ 中创建自定义 QAbstractTableModel 子类。

如果您需要在不使用 C++ 的情况下对 table 进行更多控制，最好使用另一种模型，例如 ListModel。这里有一个例子：

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

Item {
    width: 1126
    height: 800

    Rectangle {
        id: rectangle
        color: "#ffffff"
        anchors.fill: parent
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        anchors.topMargin: 0

        TableView {
            anchors.fill: parent
            clip: true

            TableViewColumn {
                role: "customer"
                title: "Customer"
            }

            TableViewColumn {
                role: "address"
                title: "Address"
            }

            TableViewColumn {
                role: "mobile"
                title: "Mobile"
            }

            model: ListModel {

                ListElement {
                    customer: "h1"
                    address: "down1"
                    mobile: "345561"
                }
                ListElement {
                    customer: "h2"
                    address: "down2"
                    mobile: "345562"
                }
                ListElement {
                    customer: "h3"
                    address: "down3"
                    mobile: "345563"
                }
            }
        }
    }
}

在 qml 中创建一个 table，它的自定义和与数据库的连接

Creating a table in qml, its customization and connection with database

qt

qml