QML表视图图像作为单元格元素

Question

我正在尝试在QML表视图组件的行中显示图像和文本，我选择了itemDelegate来完成它，但结果显示为每行上的粗体文本，并且在图像列中显示图像和文本。它似乎是模型项目在桌面上显示的两倍。

代码：

Rectangle{
        width:parent.width
        height:parent.height
        color: "#333333"
        id: root


    ListModel {
        id: live_alertmodel

    }

    TableView {
       // anchors.top: download_bt.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        width: root.width
        height: 100

        TableViewColumn {
            role: "time"
            title: "Time"
            width: root.width/4
        }
        TableViewColumn {
            role: "location"
            title: "Location"
            width: root.width/4
        }

        TableViewColumn {
            role: "alert"
            title: "Alert"
            width: root.width/4
        }

        TableViewColumn {
            role: "image"
            title: "Image"
            width: root.width/4

        }
        model: live_alertmodel

       itemDelegate: Item {
            Text {
                anchors.verticalCenter: parent.verticalCenter
                color: styleData.textColor
                //elide: styleData.elideMode
                text: styleData.value
            }

            Text {
                anchors.verticalCenter: parent.verticalCenter
                color: styleData.textColor
                //elide: styleData.elideMode
                text: styleData.value
            }

            Text {
                anchors.verticalCenter: parent.verticalCenter
                color: styleData.textColor
                //elide: styleData.elideMode
                text: styleData.value
                font.bold: false
            }

            Image {
                id: myIcon;
                width:root.width/4;
                //height:50;
                anchors.horizontalCenter: parent.horizontalCenter;
                source: styleData.value;
                fillMode: Image.PreserveAspectFit
                height:20
                cache : true;
                asynchronous: true;
            }
       }


        Component.onCompleted: {
            for(var i=0;i<10;i++)
              live_alertmodel.append({ time:"12/15/2015",
                              location:"location",
                              alert:"access",
                              image:"http://images.freeimages.com/images/premium/previews/4852/48521810-globe-icon-flat-icon-with-long-shadow.jpg" })
        }
    }
    }

还可以通过上面的代码查看屏幕截图。

上述代码有什么问题吗？

Answer 1

我已经通过

解决了这个问题

1. 从itemDelegate

中删除TableView

2. 为每个delegate定义TableViewColumn项，例如

   TableViewColumn {
       role: "time"
       title: "Time"
       width: root.width/4
       delegate:textDelegate
   }
   TableViewColumn {
       role: "location"
       title: "Location"
       width: root.width/4
        delegate:textDelegate
   }
   TableViewColumn {
       role: "alert"
       title: "Alert"
       width: root.width/4
       delegate:textDelegate
   }
   
   TableViewColumn {
       role: "image"
       title: "Image"
       width: root.width/4
       delegate:imageDelegate
   }
   

3. 最后为text和image列

   创建了单独的委托项

    Component  {
                   id: textDelegate
                   Item {
                       id: f_item
                       height: cell_txt.height
                       Text {
                           id: cell_txt
                           width: parent.width
                           verticalAlignment: Text.AlignVCenter
                           horizontalAlignment: Text.AlignHCenter
                           //font.bold: true
                           text: styleData.value
                           elide: Text.AlignHCenter
                           color: "white"
                           renderType: Text.NativeRendering
                       }
                   }
               }
   
   
   Component {
       id: imageDelegate
       Item {
           Image {
               anchors.verticalCenter: parent.verticalCenter
               anchors.horizontalCenter: parent.horizontalCenter
               fillMode: Image.PreserveAspectFit
               height:20
               cache : true;
               asynchronous: true;
               source: styleData.value// !== undefined  ? styleData.value : ""
           }
       }
    }