一個tableview中可以有顯示在下面的屏幕截圖 <a href="https://i.stack.imgur.com/8w6Tw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8w6Tw.png" alt="enter image description here"></a></p> <p>據我所知是採取複選框，圖像

Question

我試圖創建QML組件列，TableView中是我應該使用創建使用這樣的組件QML。看看here的例子，它似乎可以支持多列，並且樣式是可配置的。但是，我不知道如何在列中添加複選框控件和圖像元素。

Answer 1

你可以從這裏開始：

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編寫模型++和拋光界面，但它是一個很好的起點。