QML表視圖圖像作爲單元格

我試圖在一行QML表視圖組件中顯示圖像和文本，我選擇了itemDelegate來完成它，但結果顯示爲每行上的粗體文本和圖像列中的粗體文本顯示圖像和文字。似乎有兩次模型項目正在桌面上顯示。QML表視圖圖像作爲單元格

代碼：

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" }) 
     } 
    } 
    }

還看到屏幕截圖中，放出來的外觀與上面的代碼。

任何問題上面的代碼？

來源

2015-11-10 Haris

我已經

刪除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 
}

文本和圖像最後創建單獨的委託項目列

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 : "" 
     } 
    } 
}

來源

2015-11-10 07:52:50 Haris

QML表視圖圖像作爲單元格

回答

相關問題