Qt tableview是否可以包含包含复选框和图像的列

我正在尝试在QML中创建一个组件，如所附的屏幕截图所示

---

好的，TableView是我应该使用QML创建类似这样的组件。看看这个例子，它似乎可以支持多个列，并且样式是可配置的。但是，我不知道如何在列中添加复选框控件和图像元素。

您可以从这里开始：

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    visible: true

    width:1000; height: 500

    ListModel {
        id: mymodel

        ListElement {
            title: "my_name.mp4"
            check: true
            img: "1450465860217s.jpg" //your own img url here
            filesize: "1.5GB"
           lenght: "20:00"
           lastMod: "12/02/2014"
        }

        ListElement {
            title: "my_nam2.mp4"
            check: false
            img: "1450465860217s.jpg" //your own img url here
            filesize: "400MB"
            lenght: "8:00"
            lastMod: "01/01/2015"
        }

        ListElement {
            title: "my_nam2.mp4"
            check: false
            img: "1450465860217s.jpg" //your own img url here
            filesize: "1.5GB"
            lenght: "1:20:00"
            lastMod: "12/13/2016"
       }
    }

TableView {
    width: 1000; height: 500

    anchors.centerIn: parent
    TableViewColumn {
        role: "title"
        title: "Title"
        width: 200
    }

    TableViewColumn {
        role: "filesize"
        title: "FileSize"
    }

    TableViewColumn {
        role: "lenght"
        title: "Lenght"

    }

    TableViewColumn {
        role: "lastMod"
        title: "Last Modified"
    }


    model: mymodel

    rowDelegate: Rectangle{
        color: "white"
        height: 40
    }

    itemDelegate: RowLayout {
        width: parent == null? 0 : parent.width

        Loader{
            sourceComponent: styleData.column == 0 ?
                             things : null
        }

        Component {
            id: things

            RowLayout{
                height: 30
                CheckBox{
                    id: itemCheckBox
                    checked:  mymodel.get(styleData.row).check
                }

                Image{
                    Layout.preferredWidth: 80
                    Layout.preferredHeight: 40
                    source: mymodel.get(styleData.row).img
                }
            }
        }


        Text {
            //anchors.centerIn: parent
            text: styleData.value
        }
    }
}
}

---

你需要在C++中对模型进行编码并擦亮界面，但这是一个很好的起点。

< P>你可以从这里开始：

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    visible: true

    width:1000; height: 500

    ListModel {
        id: mymodel

        ListElement {
            title: "my_name.mp4"
            check: true
            img: "1450465860217s.jpg" //your own img url here
            filesize: "1.5GB"
           lenght: "20:00"
           lastMod: "12/02/2014"
        }

        ListElement {
            title: "my_nam2.mp4"
            check: false
            img: "1450465860217s.jpg" //your own img url here
            filesize: "400MB"
            lenght: "8:00"
            lastMod: "01/01/2015"
        }

        ListElement {
            title: "my_nam2.mp4"
            check: false
            img: "1450465860217s.jpg" //your own img url here
            filesize: "1.5GB"
            lenght: "1:20:00"
            lastMod: "12/13/2016"
       }
    }

TableView {
    width: 1000; height: 500

    anchors.centerIn: parent
    TableViewColumn {
        role: "title"
        title: "Title"
        width: 200
    }

    TableViewColumn {
        role: "filesize"
        title: "FileSize"
    }

    TableViewColumn {
        role: "lenght"
        title: "Lenght"

    }

    TableViewColumn {
        role: "lastMod"
        title: "Last Modified"
    }


    model: mymodel

    rowDelegate: Rectangle{
        color: "white"
        height: 40
    }

    itemDelegate: RowLayout {
        width: parent == null? 0 : parent.width

        Loader{
            sourceComponent: styleData.column == 0 ?
                             things : null
        }

        Component {
            id: things

            RowLayout{
                height: 30
                CheckBox{
                    id: itemCheckBox
                    checked:  mymodel.get(styleData.row).check
                }

                Image{
                    Layout.preferredWidth: 80
                    Layout.preferredHeight: 40
                    source: mymodel.get(styleData.row).img
                }
            }
        }


        Text {
            //anchors.centerIn: parent
            text: styleData.value
        }
    }
}
}

---

你需要在C++中对模型进行编码，并对接口进行润饰，但这是一个很好的起点。

我想你需要实现一个自定义委托来实现这个目标。我会使用列表视图，并使用该视图中的代理。谢谢您的回答。我们将调查并更新@iksemyonov设法让复选框显示出来，我相信图像应该是相似的。我认为您需要实现一个自定义委托来实现这一点。我会使用列表视图，并使用该视图中的代理。谢谢您的回答。我们将调查并更新@iksemyonov设法让复选框显示出来，我相信图像应该是相似的。