QML

Question

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

我有 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

您可以使用 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"
        }
    }

}

Answer 2

请注意，其中包含 3 个 ListView 的 Column 会给您带来相当奇怪的滚动体验，您不会像滚动单个视图那样滚动所有内容，但是滚动单个列表视图。

只要您不对模型尺寸（我的意思是几千）着迷，您可以简单地使用 Flickable 和 Column 以及其中的 3 个中继器。这将为您提供一个可以滚动浏览的连续列。

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

这是一个演示 2 种不同行为的简单示例：

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

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

QML - Possible to display 3 listViews in a single view

qt

qt5

qtquick2

qt-quick