如何将ListView与自定义项目QML一起使用

本文介绍了如何将ListView与自定义项目QML一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我是QML的新手.我感谢互联网资源的这种手风琴:

I am a newbie in QML. I made thanks to internet ressources this accordion:

Item { default property var contentItem: null property string title: "panel" id: root Layout.fillWidth: true height: 30 Layout.fillHeight: current property bool current: false ColumnLayout { anchors.fill: parent spacing: 0 Rectangle { Drag.active: dragArea.drag.active id: bar Layout.fillWidth: true height: 30 color: root.current ? "#81BEF7" : "#CEECF5" Text { anchors.fill: parent anchors.margins: 10 horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter text: root.title } Text { anchors{ right: parent.right top: parent.top bottom: parent.bottom margins: 10 } horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter text: "^" rotation: root.current ? "180" : 0 } MouseArea { id: dragArea anchors.fill: parent cursorShape: Qt.PointingHandCursor drag.axis: Drag.YAxis drag.target: root onReleased: { root.Drag.drop() } onClicked: { if (root.parent.current !== root) { root.current = !root.current; root.parent.currentItem = root; } } } } Rectangle { id: container Layout.fillWidth: true anchors.top: bar.bottom implicitHeight: root.height - bar.height clip: true Behavior on implicitHeight { PropertyAnimation { duration: 100 } } } Component.onCompleted: { if(root.contentItem !== null) root.contentItem.parent = container; } } }

PanelItem.qml

Window { visible: true width: 400; height: 400 ColumnLayout { anchors.fill: parent spacing: 1 id: test property var currentItem: null PanelItem { title: "Panel 1" Rectangle { color: "orange" anchors.fill: parent } } PanelItem { title: "Panel 2" Rectangle { color: "lightgreen" anchors.fill: parent } } PanelItem { title: "Panel 3" Rectangle { color: "lightblue" anchors.fill: parent } } PanelItem { title: "Panel 4" Rectangle { color: "yellow" anchors.fill: parent } } Item { Layout.fillWidth: true Layout.fillHeight: true } } }

main.qml

但是，由于有了拖放"技术，我希望能够更改项目索引(位置).

However, I wanted to be able to change items index (position) thanks to a "drag & drop" technique.

我读到，更改列布局中的索引不是很好，也不容易. 因此，我尝试将手风琴放在 ListView 中，但我迷路了，它根本不起作用.

I read that it is not so good and easy to change index in a column layout. So I tried to put my accordion in a ListView but I am lost and it doesn't work at all.

我尝试过类似的事情:

Window { visible: true width: 400; height: 400 ListView { id: my_list anchors.fill: parent model: 14 delegate: PanelItem { id: my_delegate title: "Panel 1" Rectangle { color: "orange" anchors.fill: parent } } } }

main.qml

有人可以帮助我做些什么，并解释我做错了什么吗?

Could someone help me to do and explain what I am doing wrong ?

非常感谢！

推荐答案

好的，这里有些问题:

如果PanelItem不在*Layout中，则不能使用附加的属性Layout.*.因此，例如第5行:Layout.fillWidth = true的行将不起作用.使用width: parent.width或anchors { left: parent.left; right: parent.rigth }设置宽度.

If you have your PanelItem not in a *Layout, you can't use the attached properties Layout.*. Therefore lines, such as Line 5: Layout.fillWidth = true won't work. Use width: parent.width or anchors { left: parent.left; right: parent.rigth } to set the width.

我不建议使用default property var contentItem，因为这可能会导致一些被遗忘的对象.您可以将mutliple Items分配给此默认属性，其中每个新的Item都会踢出前一个Item.

I would not reccomend to use default property var contentItem, as this might lead to some forgotten objects. You can assign mutliple Items to this default property, where each new Item kicks out the former Item.

改用property Component contentItem，例如QtQuick.Controls 2.0. PanelItem展开后，请使用Loader实例化此Component. 如果不应该动态加载和卸载property Item contentItem，请使用property Item contentItem. 使用不作为default的属性可以确保通常仅分配一个Item. 通常，仅建议仅将default property与alias someItem.data之类的东西一起使用.如果使用default property var someData，则应收听onSomeDataChanged，然后将新添加的对象重新分配给某个适当的容器. 因此，如果要允许添加多个项目，请使其如下:

Use a property Component contentItem instead, as e.g the QtQuick.Controls 2.0 do. Then use a Loader to instantiate this Component, when the PanelItem is expanded. Use a property Item contentItem if it should not be dynamicaly loaded and unloaded. Using the properties not as default makes sure, there is usually only one Item assigned. Usually it is only recommended to use the default property only together with something like alias someItem.data. If you use default property var someData you should listen to onSomeDataChanged and reassign the newly added object to some appropriate container. So if you want to allow multiple Items to be added, make it like this:

example.qml

example.qml

Item { default property alias contentItem.data Item { id: contentItem width: childrenRect.width height: childrenRect.height } }

使用诸如implicitHeight: barHeight + contentItemHeight的线条，其中barHeight是条形的高度，始终可见，而contentItemHeight是(collapsed ? 0 : loadedContentItem.height)

Use some line such as implicitHeight: barHeight + contentItemHeight where barHeight is the height of the bar, that is always visible, and the contentItemHeight is (collapsed ? 0 : loadedContentItem.height)

如果只是为了重新排序Item，则可以使用ObjectModel.然后，您不应该提供委托，因为ObjectModel会提供 delegate 本身-或者更确切地说，是要显示的对象而不是委托.

You might use a ObjectModel if it is just for the sake of reordering of the Items. Then you should not provide a delegate, as the ObjectModel supplies the delegate itself - or well rather the Object to be displayed than a delegate.