QML：使用矩形实现自定义控件

如何解决QML：使用矩形实现自定义控件

我想实现一个有 7 层矩形的控件。顶部和底部 2 个矩形的大小相同。但是中间的 3 个矩形是顶部和底部 2 个矩形的宽度的 1/3，也是其中两个矩形。矩形之间的间距将保持不变。

如何使用 QML 中的最少代码来实现。 （即使用 1 个中继器或嵌套中继器或某种方式通过模型？）

我使用重复的代码设计它，只需添加 10 个矩形并正确锚定它们，但是当可以使用中继器/模型完成任务时，这不是一个好习惯。

解决方法

可以使用 GridLayout 填充此类矩形。它在 Qml Online App 中运行良好。

import QtQuick 2.3
import QtQuick.Layouts 1.12

GridLayout {
    Repeater {
        model: [{row: 0,column: 0,columnSpan: 3},{row: 1,{row: 2,columnSpan: 1},column: 2,{row: 3,{row: 4,{row: 5,{row: 6,columnSpan: 3}]
                
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.row: modelData.row
            Layout.column: modelData.column
            Layout.rowSpan: 1
            Layout.columnSpan: modelData.columnSpan
            Layout.preferredWidth: Layout.columnSpan
            Layout.preferredHeight: Layout.rowSpan
            
            color: Qt.rgba(Math.random(),Math.random(),1);
        }
    }
}

,

您可以使用 ListView 将给定的矩形填充为委托。在这种情况下，您只需要处理委托。根据需要定义两个委托，并根据给定主题中的索引将它们分配给 ListView 模型：Different delegates for QML ListView

,

试试这个

Component{
    id:rec2
    Item{
        property bool flag: true
        width:300
        height:20
        Repeater{
            model:!flag?1:2
        Rectangle{
            anchors.left: (flag && index==1)?parent.left:undefined
            anchors.right: (flag && index==0)?parent.right:undefined
            color: "transparent"
            border.color: "black"
            border.width: 3
            height: parent.height
            width: (flag)?(parent.width/3):parent.width
        }
        }

    }
}

Column{
    anchors.centerIn: parent
    spacing: 10
    Repeater{
        id:repeter
        model: [false,false,true,false]
        Loader{
            sourceComponent: rec2
            onLoaded: item.flag=repeter.model[index]
        }
    }
}