首页 文章

如何制作QML ListView部分环绕项目？

提问于
浏览 次
0

我有一个QML ListView，模型来自C端 . 到目前为止一切都很好 . 现在列表项具有部分 Headers 属性，我想根据其部分对项目进行分组 . 部分委托UI元素应该包含属于该部分的所有项目 . 我似乎无法将section元素显示为另一个列表项 .

再次，而不是

--------- ------ ------ --------- ------ ------
|section| |item| |item| |section| |item| |item|
--------- ------ ------ --------- ------ ------

我要这个

------------------------ ------------------------
|        ------ ------ | |        ------ ------ |
|section |item| |item| | |section |item| |item| |
|        ------ ------ | |        ------ ------ |
------------------------ ------------------------

这基本上是我目前使用的代码：

ListView {
    width: styles.thumbnailListWidth
    height: styles.thumbnailListHeight

    orientation: ListView.Horizontal
    model: handler.stepList // stepList is generated in C++ code

    delegate: Column {

        Rectangle {
            id: thumbnailContainer

            width: 196
            height: styles.thumbnailHeight

            z: 100

            Image {
                id: screenshot

                anchors.fill: parent
                source: "image://steps/screenshot_" + index
            }
        }

    }
    section.property: "sectionHeadline"
    section.criteria: ViewSection.FullString
    section.delegate: Rectangle {
        id: sectionContainer
        anchors.left: thumbnailContainer.left
        width: 300
        height: 50
        z: 0

        Text {
            text: section

            color: colors.darkCharcoal05

            font.family: fonts.montserratBold.name
            font.pixelSize: 20
        }
    }
}

我认为对齐和z顺序可能会将section delegate元素放在list item元素后面，但事实并非如此 . 关于如何解决这个问题的任何想法？

c++ qt listview qml

1 回答

  • 0

    好吧，我认为你所谈论的那个项目不是 ListView . 也许 TreeView 更适合您的目的但需要C型号 . 作为 TreeView 的轻量级选项，您可以使用以下内容：

    import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 800
    height: 300

    RowLayout {
        id: rowView
        property var items: [
            {name: "France", color: "lightblue", children: ["Paris", "Lyon", "Nantes"]},
            {name: "Germany", color: "orange", children: ["Berlin", "Hamburg"]},
            {name: "Italy", color: "gold", children: ["Rome", "Milan", "Turin", "Venice"]},
        ]
        anchors.centerIn: parent
        spacing: 2
        Repeater {
            model: rowView.items
            Layout.alignment: Qt.AlignVCenter
            delegate: Rectangle {
                height: 40
                radius: 5
                width: itemRow.width + 2
                color: modelData.color
                RowLayout {
                    id: itemRow
                    spacing: 2
                    height: 30
                    anchors.verticalCenter: parent.verticalCenter
                    Text {
                        text: modelData.name
                        leftPadding: 10
                        rightPadding: 10
                    }
                    Repeater {
                        model: modelData.children
                        delegate: Rectangle {
                            radius: 5
                            color: "lightgreen"
                            width: itemText.width + 20
                            height: parent.height
                            Text {
                                id: itemText
                                text: modelData
                                anchors.centerIn: parent
                            }
                        }
                    }
                }
            }
        }
    }
}

    同样，我不知道你需要什么，所以上面的代码只是一个展示我的想法的例子 .

    回复于

相关问题