首页 文章

QML中继器用于多个项目而没有包装项目

提问于
浏览
2

我想创建一个类似的视图(为了简洁起见我留下了一个专栏)

__________
| text     |
|__________|
|    |headr|
|____|_____|
|text|item1|
|    |item2|
|    |     |
|text|item3|
|    |item4|
|    |item5|
|    |item6|
|____|_____|

并一直试图用GridLayout做到这一点 . 问题是我可能有很多行 . 这取决于我的模型 . 所以,我希望能够有一个重复相同n个元素的转发器 . 但是,似乎只需要一个组件 . 我想重复一个元素,但这不是GridLayout如何计算间距 . 因此,除了使用动态对象创建之外,似乎这是不可能的 .

我试图重复的实际项目的代码是这个

Text {
                Layout.alignment: Qt.AlignHCenter
                text: abbr
                color: "#545454"
            }
            VerticalRule {
                Layout.fillHeight: true
            }
            ColumnLayout {
                Repeater {
                    model: getModel()
                    Image {}
                }
            }
            VerticalRule {
                Layout.fillHeight: true
            }
            ColumnLayout {
                Repeater {
                    model: getModel()
                    Image {}
                }
            }

那么,有没有办法在qml中轻松完成这项工作,或者我对这种超级特定的表格格式有点独立 .

2 回答

  • 4

    你可以用GridLayout做到这一点;使用多个中继器,一个用于Gridlayout中的每一列 . 以下代码段会重现您的文字布局:

    GridLayout {
        columns: 2
    
        Text {
            Layout.columnSpan: 2
            Layout.alignment: Qt.AlignHCenter
            text: 'text'
        }
        Text {
            Layout.column: 1
            Layout.row: 1
            text: 'header'
        }
        Repeater {
            model: list
    
            Text {
                Layout.column: 0
                Layout.row: index + 2
                Layout.alignment: Qt.AlignTop
                text: label
            }
        }
        Repeater {
            model: list
    
            Column {
                Layout.column: 1
                Layout.row: index + 2
    
                Repeater {
                    model: items
    
                    Text { text: item }
                }
            }
        }
        ListModel {
            id: list
    
            ListElement {
                label: 'text1'
                items: [
                    ListElement { item: 'item1' },
                    ListElement { item: 'item2' }
                ]
            }
            ListElement {
                label: 'text2'
                items: [
                    ListElement { item: 'item3' },
                    ListElement { item: 'item4' },
                    ListElement { item: 'item5' },
                    ListElement { item: 'item6' },
                    ListElement { item: 'item7' }
                ]
            }
        }
    }
    
  • 0

    除非我找到办法,否则你不能 . 你可以使用ListView来创建他们自己拥有GridViews的行....我想 .

相关问题