QML Listview 空间项目填充宽度答案

【问题标题】：QML Listview space items to fill widthQML Listview 空间项目填充宽度
【发布时间】：2021-12-27 14:05:59
【问题描述】：

我的 qml 中有一个 ListView（水平方向），其中包含一些固定大小的元素。我希望将项目隔开以填充 ListView 元素的整体宽度。因此，如果元素较少，我希望它们间隔更多。基本上我需要的和Layout.fillWidth = true RowLayout 的属性完全一样，但是对于 ListView。

我可以计算我有多少项目，然后从 ListView 宽度中减去总项目宽度，除以项目数并分配间距，但这似乎太愚蠢了。有没有办法像在 RowLayout 中那样自动执行此操作？

或者我可能需要为此使用与 ListView 不同的东西？类似于 RowLayout 但我可以将列表数据模型分配给的东西？

【问题讨论】：

使用 ListView 你会得到this。 RowLayout 和 Repeater 可能会让您接近或完全符合您的要求。不过要注意元素的数量。
@scopchanov 谢谢，我会看看中继器

标签： qt listview qml spacing

【解决方案1】：

您可以使用ListView 完成您想要的操作，您只需要根据您拥有的代表数量动态调整间距。如果您的代理大小不同（因为这仅基于第一个代理的宽度），或者如果代理累积超过 ListView 的宽度，则此示例将失效。

ListView {
    width: 500
    orientation: Qt.Horizontal
    model: 6
    spacing: {
        if (count > 0) {
            return (width - (itemAtIndex(0).width * count))/(count - 1)
        } else {
            return 0
        }
    }

    delegate: Rectangle {
        implicitHeight: 50
        implicitWidth: 50
        color: "red"
        border.width: 1
    }
}

ListView 可能不是最适合此任务的容器。我这么说是因为它有一个内置的ScrollView 和其他听起来你不需要的行为。如果您只需要一排大小相同的代表，我同意 scopchanov 的观点，并相信 RowLayout 内的 Repeater 将是最佳选择。这是一个简单的例子：

RowLayout {
    width: 500

    Repeater {
        model: 6
        delegate: Rectangle {
            implicitHeight: 50
            implicitWidth: 50
            color: "tomato"
            border.width: 1
            Layout.alignment: Qt.AlignHCenter // must be set to align the rectangles within their empty space
        }
    }
}

您可能会注意到这会在左侧和右侧引入间隙，如果这些间隙不可接受，您可能需要以与 ListView 示例相同的方式在 RowLayout 上设置 spacing。

【讨论】：