Question

我有一个普通的QML对象Myrect.qml：

import QtQuick 2.0

Item
{
    property alias color: theRect.color;
    property string title: "default";

    Rectangle
    {
        id: theRect;

        Text
        {
            text: title;
        }

        width: 60;
        height: 80;
    }
}

还有我的主要代码main.qml：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window 
{
    visible: true
    width: 600
    height: 400
    title: qsTr("Model example")

    ListModel
    {
        id:  myModel;

        ListElement { name: "Apple"; col: "green"; }
        ListElement { name: "Orange"; col: "orange"; }
        ListElement { name: "Banana"; col: "yellow"; }
    }

    ListView
    {
        model: myModel;
        delegate: myRectComp;
    }

    Component
    {
        id: myRectComp;

        Myrect
        {
            color: col;
            title: name;
        }
    }
}

我想要实现的就是这样的效果：

a是到父元素左上角的距离，b是列表中元素之间的距离。到目前为止，我的代码将所有矩形堆叠在一起：

我不确定从这一点出发如何进一步发展。同样，最终可以旋转应用程序，并且矩形也应该旋转-该行将变成一列。我想知道QML是否提供了这样的功能？

如何在行和列中平均分配成员？

Answer 1

修改方向，间距和位置属性，以使布局与空间水平。要将视图更改为“垂直”，请将orientation属性设置为 Qt.Vertical 。

ListView
    {
        model: myModel;
        delegate: myRectComp;
        x: 100 // your 'a' start 'x' position for Listview
        width: parent.width
        height: parent.height
        spacing: 100 // 'b' space between elements
        orientation:  Qt.Horizontal
    }

下面是具有上面Listview属性的输出

ListView中的矩形

1 个答案: