如何在qml中将groupbox与滚动视图水平居中对齐

我做了一些更改：

1. 替换为ScrollViewFlickable
2. 将 配置为从子项中获取宽度，但从父项中获取高度。我们这样做，因为您指出需要垂直，因此无法从孩子身上获取高度FlickableScrollBar
3. 将 配置为具有用于水平对齐的锚点Flickable
4. 应用于胖滚动条并将其宽度设置为像素ScrollBar.verticalFlickable20
5. 将 和 设置为父级。这样做有助于计算出内容的几何形状与contentWidthcontentHeightColumnLayoutScrollBarFlickable

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    Flickable {
        id: flickable
        anchors.fill: parent
        clip: true
        contentWidth: columnLayout.width
        contentHeight: columnLayout.height
        ScrollBar.vertical : ScrollBar {
            width: 20
            policy: ScrollBar.AlwaysOn
        }
        ColumnLayout {
            id: columnLayout
            width: flickable.width
            spacing: 10
            GroupBox {
                Layout.alignment: Qt.AlignHCenter
                title: qsTr("Sample1")
                ColumnLayout { //Arrange child Items in column wise
                    Text { id: gr1text1; text: qsTr("Group 1, Text 1") }
                    Text { id: gr1text2; text: qsTr("Group 1, Text 2") }
                }
            }
            GroupBox {
                Layout.alignment: Qt.AlignHCenter
                title: qsTr("Sample2")
                ColumnLayout { //Arrange child Items in column wise
                    Text { id: gr2text1; text: qsTr("Group 2, Text 1") }
                    Text { id: gr2text2; text: qsTr("Group 2, Text 2") }
                }
            }
        }
    }
}

您可以在线试用！

此外，请考虑使用，因为它具有应用 .以下示例演示了如何使用 a 和 a 来表示您的示例：ListViewScrollBarListViewmodel

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    ListView {
        anchors.fill: parent
        width: contentItem.childrenRect.width + 20
        height: parent.height
        model: [ {
            title: qsTr("Sample 1"),
            text1: qsTr("Group 1, Text 1"),
            text2: qsTr("Group 1, Text 2")
        }, {
            title: qsTr("Sample 2"),
            text1: qsTr("Group 2, Text 1"),
            text2: qsTr("Group 2, Text 2")
        } ]
        clip: true
        spacing: 10
        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AlwaysOn
            width: 20
        }
        delegate: GroupBox {
            anchors.horizontalCenter: parent.horizontalCenter
            title: modelData.title
            ColumnLayout {
                Text { text: modelData.text1 }
                Text { text: modelData.text2 }
            }
        }
    }
}

您可以在线试用！