qt - QML - 可以在单个 View 中显示 3 个 ListView

Question

是否可以在一个页面中显示多个listView？

我有 3 个单独的 ListView ，我想将它们显示在一个页面上，但我很难对它们进行布局。它们都相互重叠。

布局的简单示例:

ListView {
    id: listOne
    property string headertitle: "list one header"
    spacing: 5
    header: headerComponent
    model: ListOneModel
}

ListView {
    id: listTwo
    property string headertitle: "list two header"
    spacing: 5
    header: headerComponent
    model: ListTwoModel
}

ListView {
    id: listThree
    property string headertitle: "list three header"
    spacing: 5
    header: headerComponent
    model: ListThreeModel
}

Answer 1

请注意，其中包含 3 个 ListView 的 Column 会给您带来相当奇怪的滚动体验，您不会像滚动一样滚动它单个 View ，但滚动单个 ListView 。

只要您不对模型大小(我的意思是几千)着迷，您可以简单地使用带有 3 个中继器的 Column 的 Flickable在里面。这将为您提供一个可以滚动浏览的连续列。

此解决方案对数以千计的模型项无效的原因是，在正常情况下， ListView 会根据需要创建和销毁委托(delegate)，并仅保留屏幕上可见的内容以及一些可选的缓存。而此解决方案将创建所有项目，以便滚动浏览一个统一的列。

这是一个简单的例子，展示了这两种不同的行为:

  Row {
    anchors.fill: parent
    Flickable {
      width: parent.width * .5
      height: parent.height
      flickableDirection: Flickable.VerticalFlick
      contentHeight: contentItem.childrenRect.height
      Column {
        spacing: 2
        Repeater {
          model: 5
          delegate: Rectangle { width: 100; height: 100; color: "red" }
        }
        Repeater {
          model: 5
          delegate: Rectangle { width: 100; height: 100; color: "green" }
        }
        Repeater {
          model: 5
          delegate: Rectangle { width: 100; height: 100; color: "blue" }
        }
      }
    }
    Column {
      width: parent.width * .5
      height: parent.height
      spacing: 2
      ListView {
        spacing: 2
        width: parent.width
        height: parent.height / 3
        model: 5
        clip: true
        delegate: Rectangle { width: 100; height: 100; color: "red" }
      }
      ListView {
        spacing: 2
        width: parent.width
        height: parent.height / 3
        model: 5
        clip: true
        delegate: Rectangle { width: 100; height: 100; color: "green" }
      }
      ListView {
        spacing: 2
        width: parent.width
        height: parent.height / 3
        model: 5
        clip: true
        delegate: Rectangle { width: 100; height: 100; color: "blue" }
      }
    }
  }