c++ - Qt Quick 2/QML 中等效的 StackPanel - 宽度问题

Question

我正在尝试做一个与 wpf stackpanel 等效的东西，我已经有了一个逻辑并实现了它但是宽度有问题，我不知道如何在不进入宽度循环绑定(bind)的情况下创建新组件，这是我的堆栈面板:

StackPanel.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import KiMa.Models 1.0
Item {
    id:root
    property var orientation : UOrientation.Horizontal
    property int itemSpacing : 10
    default property list<Item> pageData
    Loader{
        property var childs
        anchors.fill: parent
        id:loader
        onChildsChanged: {
            if(root.pageData != null){
                for(var z = 0;z<root.pageData.length;++z){
                    root.pageData[z].parent = loader.childs
                }
            }
        }

    }
    state: orientation == UOrientation.Horizontal ? "row": "col"
    states: [
        State {
            name: "row"
            PropertyChanges {
                target: loader
                sourceComponent : row
            }
        },
        State{
            name: "col"
            PropertyChanges {
                target: loader
                sourceComponent : col
            }
        }

    ]
    Component{
        id:col
        Column{
            Component.onCompleted: {
                childs = _col;
            }
            id:_col
            width: parent.width
            spacing: root.itemSpacing
        }
    }
    Component{
        id:row
        Row{
            Component.onCompleted: {
                childs = _row
            }
            id:_row
            width: parent.width
            layoutDirection: Qt.RightToLeft
            spacing: root.itemSpacing
        }
    }
}

我的方向枚举是这样的:

#ifndef UORIENTATION_H
#define UORIENTATION_H
#include<QObject>

class UOrientation
{
    Q_GADGET
public:
    explicit UOrientation();
    enum Orientation{
        Horizontal,
        Vertical
    };
    Q_ENUM(Orientation)
};

#endif // UORIENTATION_H

用法示例应该是这样的:

StackPanel{
    x: 320
    height: 50
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 25
    Button{

    }
    Button{

    }
}

您需要将其添加到 ma​​in.cpp 中:

qmlRegisterUncreatableType<UOrientation>("KiMa.Models",1,0,"UOrientation","its not creatable type!");

此代码有效，如果您有任何建议我更改或您认为我犯了错误，请告诉我，我在这里看到的唯一问题是宽度绑定(bind)。

我已经尝试使用 childrenRect 但它不起作用:

width: childrenRect.width
height: childrenRect.height

注意:堆栈面板允许您将项目一个接一个地堆叠在一起，您可以将方向设置为水平或垂直，因此在 qt 中它是一列和一行，我已经做到了。
垂直一:
横向一:

Answer 1

通过设置列 的数量，您可以使用Grid 轻松地做到这一点。如果您想要一个单独的组件，您可以使用以下内容创建 StackPanel.qml:

import QtQuick 2.0

Grid {
    property int orientation: Qt.Horizontal
    columns: orientation === Qt.Horizontal ? -1 : 1
}

如果你想要一个可滚动的对象，你也可以使用带有 ObjectModel 的 ListView模型。 ListView 有一个 orientation 属性。