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

我已经通过

解决了这个问题

从itemDelegate

TableView

为每个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
}

最后为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 : ""
        }
    }
 }

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

1 个答案: