如何将 TableViewColumn 列表传播到子 TableView? [英] How propagate TableViewColumn list to child TableView?

问题描述

我正在尝试为 QML 中的可编辑表格制作自定义组件，如下所示:

I'm trying to make custom component for editable tables in QML, like this:

// BaseTableView.qml
import QtQuick 2.3
import QtQuick.Controls 1.2

Item {
    signal addActionPerformed()
    signal editActionPerformed(int id)
    signal deleteActionPerformed(int id)

    property var model

    ToolBar {
        id: toolBar
        anchors.left: parent.left
        anchors.right: parent.right

        Row {
            ToolButton {
                id: addButton
                iconSource: "qrc:/icons/actions/add.png"
                onClicked: addActionPerformed()
            }

            ToolButton {
                id: editButton
                enabled: false
                iconSource: "qrc:/icons/actions/edit.png"
            }

            ToolButton {
                id: deleteButton
                enabled: false
                iconSource: "qrc:/icons/actions/delete.png"
            }
        }
    }

    TableView {
        id: tableView
        model: parent.model
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: toolBar.bottom
        anchors.bottom: parent.bottom

        onCurrentRowChanged: {
            editButton.enabled = currentRow !== null
            deleteButton.enabled = currentRow !== null
        }
    }
}

并在另一个文件中使用此组件，如下所示:

and use this component in another file like this:

// Another.qml file
import QtQuick 2.3
import QtQuick.Controls 1.2

import "../common" // Here is BaseTableView.qml

BaseTableView {

    TableViewColumn {
        role: "id"
        title: qsTr("Id")
    }

    TableViewColumn {
        role: "object_expression"
        title: qsTr("Expression")
    }
}

那么，问题是如何将表视图列从用法传递到底层 TableView?我试图在 BaseTableView 中创建属性列表并在 Aother.qml 中为该属性分配一个对象列表?但没有成功.

So, problem is how i can pass table view columns from usage to underlying TableView? I've tried to make property list in BaseTableView and assign a list of objects to this property in Aother.qml? but unsuccessfully.

推荐答案

使用 默认属性:

一个对象定义可以有一个默认属性.如果在另一个对象的定义中声明了一个对象，而没有将其声明为特定属性的值，则默认属性是为其分配值的属性.

An object definition can have a single default property. A default property is the property to which a value is assigned if an object is declared within another object's definition without declaring it as a value for a particular property.

与您的场景更相关:

您会注意到，可以将子对象添加到任何基于 Item 的类型中，而无需将它们显式添加到 children 属性中.这是因为 Item 的默认属性是它的 data 属性，并且为 Item 添加到此列表中的任何项都会自动添加到其子项列表中.默认属性可用于重新分配项目的子项.请参阅 TabWidget 示例，该示例使用默认属性自动将 TabWidget 的子项重新分配为内部 ListView 的子项.

You will notice that child objects can be added to any Item-based type without explicitly adding them to the children property. This is because the default property of Item is its data property, and any items added to this list for an Item are automatically added to its list of children. Default properties can be useful for reassigning the children of an item. See the TabWidget Example, which uses a default property to automatically reassign children of the TabWidget as children of an inner ListView.

如果你看看 TabWidget例子最后一段所指的，你应该有你需要的一切:

If you take a look at the TabWidget example that the last paragraph refers to, you should have all you need:

import QtQuick 2.0

Item {
    id: tabWidget

    // Setting the default property to stack.children means any child items
    // of the TabWidget are actually added to the 'stack' item's children.
    // See the "Property Binding"
    // documentation for details on default properties.
    default property alias content: stack.children

    property int current: 0

    onCurrentChanged: setOpacities()
    Component.onCompleted: setOpacities()

    function setOpacities() {
        for (var i = 0; i < stack.children.length; ++i) {
            stack.children[i].opacity = (i == current ? 1 : 0)
        }
    }

    Row {
        id: header

        Repeater {
            model: stack.children.length
            delegate: Rectangle {
                width: tabWidget.width / stack.children.length; height: 36

                Rectangle {
                    width: parent.width; height: 1
                    anchors { bottom: parent.bottom; bottomMargin: 1 }
                    color: "#acb2c2"
                }
                BorderImage {
                    anchors { fill: parent; leftMargin: 2; topMargin: 5; rightMargin: 1 }
                    border { left: 7; right: 7 }
                    source: "tab.png"
                    visible: tabWidget.current == index
                }
                Text {
                    horizontalAlignment: Qt.AlignHCenter; verticalAlignment: Qt.AlignVCenter
                    anchors.fill: parent
                    text: stack.children[index].title
                    elide: Text.ElideRight
                    font.bold: tabWidget.current == index
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: tabWidget.current = index
                }
            }
        }
    }

    Item {
        id: stack
        width: tabWidget.width
        anchors.top: header.bottom; anchors.bottom: tabWidget.bottom
    }
}

在这种情况下，如果您想复制由 Qt 提供的项目完成的某些事情，查看 您要复制的源代码.但是，文档更容易阅读.:)

In cases like this, where you want to replicate something that is done by an item offered by Qt, it can also be helpful to take a look at the source code of what you're trying to replicate. However, the documentation is a bit easier to read. :)

这篇关于如何将 TableViewColumn 列表传播到子 TableView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！