代码之家 › 专栏 › 技术社区 › CLiown

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

qt-quick qtquick2 qt5 qml qt

CLiown · 技术社区 · 8 年前

是否可以在一个页面中显示多个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
}

2 回复 | 直到 8 年前

dtech 8 年前

请注意 Column 有3个 ListView 其中的将给您一种相当奇怪的滚动体验,您不会像滚动单个视图一样滚动所有视图,而是滚动单个列表视图。

只要你不喜欢模型的尺寸(我的意思是数千),你可以简单地使用 Flickable 用一个 柱 有3个中继器。这将为您提供一个可以滚动浏览的连续列。

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

下面是一个演示两种不同行为的快速示例:

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

eyllanesc 8 年前

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

}