QML - 可以在单个视图中显示 3 个列表视图

Question

是否可以在一个页面中显示多个列表视图？

我有 3 个单独的列表视图，我想将它们显示在一个页面上，但我正在努力布置它们。它们都相互重叠。

简单的布局示例：

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 个 ListViews 的 Column 会给您带来相当奇怪的滚动体验，您不会像滚动单个视图一样滚动它，而是滚动单个列表视图。

只要您对模型尺寸（我的意思是数千个）不感兴趣，您就可以简单地使用带有 3 个中继器的 Flickable 和 Column。这将为您提供一个可以滚动浏览的连续列。

此解决方案对数千个模型项无效的原因是，在正常情况下，列表视图会根据需要创建和销毁委托，并且只创建屏幕上可见的内容以及一些可选的缓存。而此解决方案将创建所有项目，以便获得一个统一的列来滚动。

下面是一个简单的例子，展示了两种不同的行为：

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

Answer 2

你可以使用Column:

import QtQuick 2.0

Rectangle {
    width: 180; height: 200
    id: root

    Column {
        ListView {
            width: root.width; height: root.height/3
            model: myModel
            delegate: Text {
                text: name + ": " + number
            }
        }

        ListView {
            width: root.width; height: root.height/3

            model: myModel
            delegate: Text {
                text: name + ": " + number
            }
        }

        ListView {
            width: root.width; height: root.height/3

            model: myModel
            delegate: Text {
                text: name + ": " + number
            }
        }
    }

    ListModel {
        id: myModel
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
    }

}