QML中多样化的ListModel(MultiDelegate)

最新推荐文章于 2025-11-12 02:20:41 发布

翻译最新推荐文章于 2025-11-12 02:20:41 发布 · 2.8k 阅读

Qt 专栏收录该内容

28 篇文章

订阅专栏

在QML的官方例子里面, 基本上都是一样的Delegate, 也就是说不管数据怎样, 样式都是不变的.

如果我们想要根据不同的数据类型来显示不同的UI该怎么办? 这里有一个例子.

DataBank

ListModel {
     id: dataBank

     ListElement {
         value: "http://www.wondericons.com/dogs/myspace_dogs_icons_02.gif"
         type: "image"
     }
     ListElement {
         value: "Dummy text 1"
         type: "text"
     }
     ListElement {
         value: "http://www.wondericons.com/dogs/myspace_dogs_icons_08.gif"
         type: "image"
     }
     ListElement {
         value: "Dummy text 2"
         type: "text"
     }
 }

MultiDelegate

Item {
  id: multiDelegate
  height: 80
  width: multiDelegate.ListView.view.width

  function bestDelegate(t) {
    if(t == "image")
      return imgDelegate;
    return txtDelegate; // t == "text"
  }

  Component {
    id: imgDelegate

    Image {
      id: img
      source: value
      fillMode: Image.PreserveAspectFit
      asynchronous: true
    }
  }

  Component {
    id: txtDelegate

    Text {
      id: txt
      text: value
      verticalAlignment: Text.AlignVCenter
      horizontalAlignment: Text.AlignHCenter
    }
  }

  Loader {
    id: itemDisplay
    anchors.fill: parent;
    anchors.topMargin: 2
    anchors.bottomMargin: 2
    sourceComponent: bestDelegate(type)
  }

  Rectangle {
    id: separator
    width: parent.width; height: 1; color: "#cccccc"
    anchors.bottom: parent.bottom
  }
}

Main

Rectangle {

    ListView {
      id: dataView
      height: contentHeight
      anchors.fill: parent
      spacing: 2
      model: DataBank{}
      delegate: MultiDelegate{}
    }
}

重点就在JavaScript函数 bestDelegate(type); 和QML的Loader元素;

在ListView选择delegate的时候会动态地根据数据类型来显示不同的样式;