fillWidth not working for Layout in ScrollView

sirhcybe

I am having some trouble with my QML layouts. I have a ColumnLayout inside a ScrollView and the fillWidth property does not work for it the way it does outside the ScrollView. This seems very similar to this issue:
Re: ColumnLayout in ScrollView : fill width ?
However, the solution there appears to work because the width of the button is set using the width of the window. I'd like to avoid this since my components are broken out into many different QML files and referencing parent elements like this would be complicated. Furthermore, it seems to break the intent of the Layout components.

I have created a sample (below) and I expect that text2 would appear the same as text1. Instead text1 fills the whole screen (as expected) and text2 just appears with a default width. Can anyone tell me why my sample doesn't work and what I would need to do to make it work?

import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.1

Window {
    visible: true
    width: 640
    height: 480
    StackView {
        anchors.fill: parent
        initialItem: ColumnLayout {
            anchors.fill: parent

            TextField {
                id: text1
                Layout.fillWidth: true
            }

            ScrollView {
                Layout.fillWidth: true
                Layout.fillHeight: true

                ColumnLayout {
                    anchors.fill: parent
                    TextField {
                        id: text2
                        Layout.fillWidth: true
                    }
                }
            }
        }
    }
}

EDIT:
I tried this without a Layout, just using anchoring positioning and am getting similar results. With this layout I am not even seeing the text2 TextField show up (but it will if I remove the anchors).

import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 640
    height: 480
    StackView {
        anchors.fill: parent
        initialItem: Column {
            anchors.fill: parent

            TextField {
                id: text1
                anchors.left: parent.left
                anchors.right: parent.right
            }

            ScrollView {
                anchors.left: parent.left
                anchors.right: parent.right

                Column {
                    anchors.fill: parent
                    TextField {
                        id: text2
                        anchors.left: parent.left
                        anchors.right: parent.right
                    }
                }
            }
        }
    }
}

ODБOï

@sirhcybe hi

add Layout.preferredWidth: stack.width on the TextField

import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.1

Window {
    visible: true
    width: 640
    height: 480
    StackView {
        id:stack
        anchors.fill: parent
        initialItem: ColumnLayout {
            anchors.fill: parent

            TextField {
                id: text1
                Layout.fillWidth: true
            }

            ScrollView {
                Layout.fillWidth: true
                Layout.fillHeight: true

                ColumnLayout {
                    anchors.fill: parent
                    TextField {
                        id: text2
                        Layout.fillWidth: true
                       Layout.preferredWidth: stack.width // add this
                    }
                }
            }
        }
    }
}

sirhcybe

Thanks for the reply. I was trying to avoid a solution like that but I guess that's the only way. In the end I found giving up on using RowLayout/ColumnLayout and just setting widths on Row/Column components to work better.