Qt QML：列表代理之间的分隔符

有没有人找到在QML列表委托之间添加分隔符的好方法

这里已经有一个非常类似的问题，但我的问题有点复杂：

大多数时候，我都会使用类似的答案：

ListView {
  delegate: ItemDelegate {
      ...
      Separator {
          anchors { left: parent.left; bottom: parent.bottom; right: parent.right }
          visible: index < ListView.View.count
      }
  }
}

现在，这两种方法都有效，但总是记住并键入分隔符是非常烦人的。经过多次尝试，我仍然无法找到一个组件来处理它

我最接近这样的自定义布局组件（例如ItemGroup.qml）：

项目{
默认属性别名内容：layout.data
列布局{
id:布局
}
中继器{
模型：布局。儿童
代表：分隔符{
父项：布局。子项[索引]
锚定{left:parent.left；bottom:parent.bottom；right:parent.right}
可见：索引

现在，这对于手动将项目添加到这样一个组很好，但在许多情况下，它同样不起作用。例如，将一个

中继器

放入这样一个

项目组

，也会为中继器创建一个分隔符（假设它继承了项目，因此包含在

子项

），这会导致一个看起来浮动分隔符过多的视觉故障

有人想出了一个更聪明的解决方案吗？

我会尝试这种方法：

基于ColumnLayout创建自定义组件

使用

defaultproperty…

语法将添加到其中的子项捕获到单独的列表属性中

为ColumnLayout的

children

属性创建一个绑定，该绑定将默认属性列表中的每个真实子级与一个分隔符交错（使用组件声明它，并使用createObject（）创建每个子级）

下面是一个工作示例：

分隔符.qml

import QtQuick 2.0
import QtQuick.Layouts 1.12

Rectangle {
    Layout.fillWidth: true
    height: 1
    color: "red"
}

SeparatedColumnLayout.qml

import QtQuick 2.15
import QtQuick.Layouts 1.12

ColumnLayout {
    id: layout

    default property list<Item> actualChildren

    property Component separatorComponent: Qt.createComponent("Separator.qml")

    children: {
        var result = [];
        for(var i = 0;i < actualChildren.length;++i) {
            result.push(actualChildren[i]);
            if (i < actualChildren.length - 1) {
                result.push(separatorComponent.createObject(layout));
            }
        }
        return result;
    }
}

结果是：

---

谢谢。这与我的示例中使用

数据

而不是

实际儿童

的问题相比有点好。但是，我认为如果将它与模型和手动项混合使用，就会遇到同样的问题，例如：``` SeparatedColumnLayout{anchors.fill:parent Repeater{model:someModel Text{…}}Text{…}```假设Repeater也会在这里出现在子对象中。我认为一种解决方法是检查项目是否为中继器并跳过它，但afaik QML没有提供确定方法。

instanceOf

操作符确实处理组件。更多信息请点击此处：

import QtQuick 2.0
import QtQuick.Layouts 1.12

Rectangle {
    Layout.fillWidth: true
    height: 1
    color: "red"
}

import QtQuick 2.15
import QtQuick.Layouts 1.12

ColumnLayout {
    id: layout

    default property list<Item> actualChildren

    property Component separatorComponent: Qt.createComponent("Separator.qml")

    children: {
        var result = [];
        for(var i = 0;i < actualChildren.length;++i) {
            result.push(actualChildren[i]);
            if (i < actualChildren.length - 1) {
                result.push(separatorComponent.createObject(layout));
            }
        }
        return result;
    }
}

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.12

ApplicationWindow {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    SeparatedColumnLayout {
        anchors.fill: parent

        Text {
            Layout.alignment: Qt.AlignHCenter
            text: "1"
        }

        Text {
            Layout.alignment: Qt.AlignHCenter
            text: "2"
        }

        Text {
            Layout.alignment: Qt.AlignHCenter
            text: "3"
        }
    }
}