[英]StackPanel Equivalent In Qt Quick 2 / QML - Problem With Width
我正在尝试与wpf stackpanel等效,我已经有了一个逻辑并实现了它,但是宽度有些问题,我不知道如何在不进入宽度循环绑定的情况下创建新组件,这是我的stackpanel:
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{
}
}
您需要将其添加到main.cpp中 :
qmlRegisterUncreatableType<UOrientation>("KiMa.Models",1,0,"UOrientation","its not creatable type!");
这段代码有效,如果您有什么建议我可以更改,或者您认为我弄错了,请告诉我,我在这里看到的唯一问题是宽度装订。
我已经尝试过使用childrenRect
但是它不起作用 :
width: childrenRect.width
height: childrenRect.height
注意 :stackpanel允许您将一个接一个的项目堆叠在一起,您可以将方向设置为水平或垂直,因此在qt中将其列和行放在一起就可以了。
纵向一:
水平一:
通过设置columns
数,您可以使用Grid
轻松做到这一点。 如果需要单独的组件,则可以使用以下命令创建StackPanel.qml:
import QtQuick 2.0
Grid {
property int orientation: Qt.Horizontal
columns: orientation === Qt.Horizontal ? -1 : 1
}
如果要使用可滚动对象,则还可以将ListView
与ObjectModel
模型一起使用。 ListView
具有orientation
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.