qml实现ListView中多个代理

qml中的ListView官方的例子里代理只能代理(delegate)一种组件，但很多时候我们的布局需要多种组件，则需要ListView代理多种组件。
这里的方法主要是用了一个博主的博客链接，这里我们需要将ListModuel与delegate分开成两个qml文件，然后在第三个qml文件用ListView去调用他们。

// ListModuel部分，注意是写在第一个qml文件中，Myitem.qml
ListModel {
     id: dataBank

     ListElement {
         value: "qrc:/new/prefix1/Image/obama2.jpg"
         type: "image"
     }
     ListElement {
         value: "Dummy text 1"
         type: "text"
     }
     ListElement {
         value: "qrc:/new/prefix1/Image/obama2.jpg"
         type: "image"
     }
     ListElement {
         value: "Dummy text 2"
         type: "text"
     }
 }

// delegate部分，注意是写在第二个qml文件中，Test2.qml
Item {
 id: multiDelegate
 height: {
     if(type==="image"){
         300
     }
     else{
         100
     }
 } //实现不同代理有不同高度的Item

//  width: multiDelegate.ListView.view.width-20
 anchors.left: parent.left
 anchors.right: parent.right
 anchors.leftMargin: 10
 anchors.rightMargin: 10
 function bestDelegate(t) {
   if(t === "image")
     return imgDelegate;
   return txtDelegate; // t == "text"
 }

 Component {
   id: imgDelegate
   Rectangle{
//        width: parent.width
//        height: 100
       radius: 10
       color: "green"
       Image {
         id: img
         source: value
         fillMode: Image.PreserveAspectFit
         asynchronous: true
         anchors.fill: parent
       }
   }
 }
 Component {
   id: txtDelegate
   Rectangle{
//         width: parent.width
//         height: 300
        radius: 10
        color: "red"
        Text {
          id: txt
          text: value
          verticalAlignment: Text.AlignVCenter
          horizontalAlignment: Text.AlignHCenter
          anchors.centerIn: parent
        }
   }
 }
 Loader {
   id: itemDisplay
   anchors.fill: parent;
   anchors.topMargin: 2
   anchors.bottomMargin: 2
   sourceComponent: bestDelegate(type)
 }
}

// 最后第三个文件中ListView调用他们
  ListView {
          id: dataView
          height: contentHeight
          anchors.fill: parent
          spacing: 20
          model: Myitem{}
          delegate: Test2{}
        }
        WebView{
            id: webVie1;
            anchors.fill: parent;
            url: "xxxx"
        }

看代码就知道主要是先在ListModuel设置type，然后自定义一个函数通过不同的参数用Loader加载不同的组件。这里我还在Item的height属性上加了一个判断，让不同的type组件有不同的高度。