如何将ListView与自定义项目QML一起使用 [英] How to use a ListView with custom item 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
PanelItemnot in a*Layout, you can't use the attached propertiesLayout.*. Therefore lines, such as Line 5:Layout.fillWidth = truewon't work. Usewidth: parent.widthoranchors { 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.
这篇关于如何将ListView与自定义项目QML一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
