ScrollView 内的 ColumnLayout 不会调整其内容的大小

Posted 2023-03-17

【中文标题】ScrollView 内的 ColumnLayout 不会调整其内容的大小

【英文标题】：ColumnLayout inside ScrollView doesn't resize its content

【发布时间】：2020-10-21 05:06:20

【问题描述】：

它的外观如下：

第三个和第四个Card 都用ColumnLayout 布局。唯一的区别是第四个Card 中的ColumnLayout 在ScrollView 内部。这是main.qml：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Window 
    visible: true
    width: 640
    height: 480
    title: "Test Window"

    GridLayout
        anchors.fill: parent
        columns: 2
        rows: 2
        Card
            header: "H1"
            ColumnLayout
                Texttext: "text 1"
                Texttext: "text 2"
                Texttext: "text 3"
            
        
        Card
            header: "H2"
            Texttext: "text 2"
        
        Card
            header: "H3"
            ColumnLayout
                Field
                    label: "Name"
                    placeholder: "name"
                
                Field
                    label: "Age"
                    placeholder: "age"
                
            
        
        Card
            header: "H4"
            ScrollView
                /*
                anchors.fill: parent
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.minimumWidth: parent.width
                Layout.preferredWidth: parent.width
                contentWidth: parent.width
                width: parent.width
                */

                clip: true
                ColumnLayout
                    //anchors.fill: parent
                    Field
                        label: "Name"
                        placeholder: "name"
                    
                    Field
                        label: "Age"
                        placeholder: "age"
                    
                    Field
                        label: "Address"
                        placeholder: "address"
                    
                    Field
                        label: "Age"
                        placeholder: "age"
                    
                    Field
                        label: "Address"
                        placeholder: "address"
                    
                
            
        
    

我已经尝试过在 4th Card 中注释掉的所有内容，但这些都没有帮助！这是Card.qml：

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3

Item 
    default property alias content: content.children /*content.data*/
    property alias header: header.text
    property double margin: 10
    property double separatorMargin: 5

    Layout.fillHeight: true
    Layout.fillWidth: true
    Layout.margins: 10

    Rectangle
        id: rect
        anchors.fill: parent
        ColumnLayout
            anchors.fill: parent
            Text
                id: header
                font.bold: true
                leftPadding: margin
                topPadding: margin
            
            Rectangle
                id: separator
                Layout.fillWidth: true
                Layout.leftMargin: separatorMargin
                Layout.rightMargin: separatorMargin
                height: 2
                border.color: "black"
            
            StackLayout 
                id: content
                Layout.preferredHeight: parent.height
                Layout.leftMargin: margin
                Layout.rightMargin: margin
            
        
    
    DropShadow
        anchors.fill: rect
        source: rect
        radius: 10
        samples: 15
        color: "black"
    

这里是Field.qml：

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

RowLayout
    property alias label: label.text
    property alias placeholder: field.placeholderText

    Label
        id: label
        Layout.minimumWidth: 50
    
    TextField
        id: field
        Layout.fillWidth: true
        Layout.preferredHeight: 30
        font.pointSize: 12
        verticalAlignment: Qt.AlignVCenter
    

【参考方案1】：

我不知道为什么发布问题后我会得到一些答案！

This 有一个解决方案，我想补充一下：

width: Math.max(implicitWidth, scrollview.availableWidth)

在ColumnLayout内。

编辑

如果我添加，这不起作用：

ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

以下是关闭水平条后的样子：