qml - 如何使用 QML 工具按钮填充 QTableview

Question

我需要按下红色圆圈下的创建按钮，然后按下此按钮，我试图填充表格视图的第一行。我是 QT Quick 的新用户，请帮助我。我浪费了很多时间，但没有办法做到这一点。

我也提供 UI 和代码，请看一下。

谢谢 ！

    import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.0
import QtQuick.Dialogs 1.0
import "content"
import "images"

ApplicationWindow {
    visible: true
    title: "Mask Editor: Subsystem"

    width: 720
    height: 420
    minimumHeight: 400
    minimumWidth: 720

    statusBar: StatusBar {
        id: minstatusbar

            RowLayout {
                id:row1
              spacing: 2
              width: parent.width
              Button {
                  text:"Unmask"

              }
              Item { Layout.fillWidth: true }
                Button {
                    text:"OK"

                }
                Button {
                    text:"Cancel"

                }
                Button {
                    text:"Help"

                }
                Button {
                    text:"Apply"
                }
            }
        }

  /*  ListModel {
        id: largeModel
        Component.onCompleted: {
            for (var i=0 ; i< 10 ; ++i)
                largeModel.append({"index":i , "prompt": "pmpt", "variable":i+10, "type" : "Female","tabname":"something"})
        }
    }*/


    Action {
        id: openAction
        text: "&Open"
        shortcut: "Ctrl+O"
        iconSource: "images/document-open.png"
        onTriggered: fileDialog.open()
        tooltip: "Open an Image"
    }
    TabView {
        id:frame
        enabled: enabledCheck.checked
        tabPosition: controlPage.item ? controlPage.item.tabPosition : Qt.TopEdge
        anchors.fill: parent
        anchors.margins: Qt.platform.os === "osx" ? 12 : 2

        Tab {
            id: controlPage
            title: "Parameters"
            Item {
                id:root
                anchors.fill: parent
                anchors.margins: 8

                ColumnLayout {
                    id: mainLayout
                    anchors.fill: parent
                    spacing: 4


                    GroupBox {
                        id: gridBox
                        title: "Grid layout"
                        Layout.fillWidth: true
                        ListModel {
                            id: nestedModel
                            ListElement{index:"1";prompt:"pmt";variable:10; type: "to be defined";tabname:"something"}

                        }

                        GridLayout {
                            id: gridLayout
                            anchors.fill: parent
                            rows: 3
                            flow: GridLayout.TopToBottom

                            ToolButton {  iconSource: "images/window-new.png"
                                action:filldata
                                Accessible.name: "New window"
                                onClicked: {

                                 nestedmodel.append({"index":i , "prompt": "pmpt", "variable":i+10, "type" : "Female","tabname":"something"})


                                  }
                                tooltip: "Toggle visibility of the second window" }

                            ToolButton { iconSource: "images/view-refresh.png"
                                onClicked: window1.visible = !window1.visible
                                Accessible.name: "New window"
                                tooltip: "Toggle visibility of the second window" }

                            ToolButton { Accessible.name: "Save as"
                                iconSource: "images/document-save-as@2x.png"
                                tooltip: "(Pretend to) Save as..." }

                            TableView{
                                model: modelcontl
                                Layout.rowSpan: 3
                                Layout.fillHeight: true
                                Layout.fillWidth: true
                                //anchors.fill: parent

                                TableViewColumn {
                                    role: "index"
                                    title: "#"
                                    width: 36
                                    resizable: false
                                    movable: false
                                }
                                TableViewColumn {
                                    role: "prompt"
                                    title: "Prompt"
                                    width: 120
                                }
                                TableViewColumn {
                                    role: "variable"
                                    title: "Variable"
                                    width: 120
                                }
                                TableViewColumn {
                                    role: "type"
                                    title: "Type"
                                    width: 200
                                    visible: true
                                }
                                TableViewColumn {
                                    role: "tabname"
                                    title: "Tab Name"
                                     Layout.fillWidth: true
                                    visible: true
                                }
                            }
                        }
                    }

                    Rectangle{
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                    GridLayout {
                        //id: gridLayout
                                rows: 1
                                flow: GridLayout.TopToBottom
                                anchors.fill: parent
                           GridLayout{
                                      id: grid1
                                      columns: 2
                                      anchors.fill: parent
                                      GroupBox {
                                          //id: gridBox
                                          title: "Grid layout"
                                          Layout.fillHeight: true
                                          Layout.fillWidth: true
                                      }
                                      GroupBox {
                                          //id: gridBox
                                          title: "Grid layout"
                                          Layout.fillHeight: true
                                          Layout.fillWidth: true
                                      }
                                    }

                              }
                          }
              }
            }
        }



        Tab {
            title: "Documentation"
           Controls { }
        }
        Tab {
            title: "dialog"
           MessageDialogs { }
        }


    }

}

Answer 1

如果您想将 QML 控件添加到单元格中，您只需定义自定义委托。由于您需要为不同的列使用不同的代表，因此可以使用 Loader 以有点“棘手”的方式完成。请参阅下面的示例：

Component {
    id: comboDelegate
    ComboBox {
        model: ListModel {
            ListElement { text: "Banana" }
            ListElement { text: "Apple" }
            ListElement { text: "Coconut" }
        }
    }
}

Component {
    id: textDelegate
    Text {
        text: itemText
    }
}

TableView {
    Layout.fillWidth: true
    Layout.fillHeight: true
    TableViewColumn{ role: "col1" ; title: "Column1" }
    TableViewColumn{ role: "col2" ; title: "Column2" }
    TableViewColumn{ role: "col3" ; title: "Column3" }
    model: ListModel {
        id: myModel

    }
    itemDelegate: Item {
        height: 25
        Loader {
            property string itemText: styleData.value
            sourceComponent: styleData.column === 0 ? comboDelegate : textDelegate
        }
    }
}

Answer 2

尝试这个：

TableView {
    TableViewColumn{ role: "col1" ; title: "Column1" }
    TableViewColumn{ role: "col2" ; title: "Column2" }
    TableViewColumn{ role: "col3" ; title: "Column3" }
    model: ListModel {
        id: myModel
    }
}
Button {
    text: "Add row"
    onClicked: {
        myModel.append({col1: "some value", 
                        col2: "Another value", 
                        col3 : "One more value" });
    }
}