Using ColumnLayout with a ScrollView

qcoderpro

Hi all,

I'm going to use a TextArea inside a ScrollView within a CoumnLyout the following way which must be OK but doesn't look that way! Any reason, please?

Markkyboy

Try this;

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    color: "lightblue"
    title: qsTr("qcoderpro")

    Column {
        Label {
            text: "Input text below"
            anchors.horizontalCenter: parent.horizontalCenter
        }
        ScrollView {
            width: 200; height: width; clip: true
            TextArea { text: "QCODERPRO"; selectionColor: "lightblue"; font.pixelSize: 224 }
        }
    }
}

To try and clarify the differences between Column and ColumnLayout, have a read of the second comment from Gianluca; https://forum.qt.io/topic/47844/solved-column-vs-columnlayout-bug-or-feature/3

qcoderpro

@Markkyboy

Probably I need to use implicitWidth and implicitHeight for the ScrollView.

Markkyboy

probably?, meaning what exactly?

qcoderpro

@Markkyboy
For

Column {
        anchors.fill: parent
        Label { text: " Type your text below" }
        spacing: 10

        ScrollView {
            width: parent.width / 2
            height: width / 6
            clip: true
            TextArea {
                wrapMode: "WordWrap"
            }
        }
    }

I get the error: QML TextArea: Binding loop detected for property "implicitHeight" when the entered text exceeds the width boundary of the textArea.

Markkyboy

@qcoderpro - I cannot reproduce your error. It compiles as I expected, as does my code example., odd indeed.

Perhaps to try running qmake before building and clean the build as well , as you are not referencing implicitHeight in your code, so I'm not quite sure where your error is coming from. I sometimes experience errors that do relate to a previous project, but usuall y this occurs with I have several projects open in SDK.

lemons

You have to tweak the layout behavior to match your requirements.
Per default, all available space will be distributed equally between all children.

import QtQuick.Window 2.15
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12

Window {
    width: 500
    height: 400
    visible: true

    ColumnLayout {
        // set outer bounderies for layout, not in the children
        anchors.fill: parent
        anchors.rightMargin: parent.width / 2

        spacing: 10
        anchors.margins: 10

        Label {
            Layout.fillWidth: true
            // disable taking more height then required
            Layout.fillHeight: false
            color: "darkgray"
            text: qsTr("Type your text below")
            wrapMode: "Wrap"
            font.pointSize: 14
        }

        ScrollView {
            Layout.fillWidth: true
            // automatically fill empty height
            // > if you would set this to TRUE for multiple children, the available
            // space will be equally distributed between them
            Layout.fillHeight: true
            TextArea {
                // you don't need width&height or anchors.fill here
                // TextArea automatically fills ScrollView
                background: Rectangle {
                    color: "red"
                }

                // use Wrap instead of WordWrap to avoid long single
                // words to overflow
                // > Wrap automatically prefers WordWrap
                wrapMode: "Wrap"
                padding: 10
            }
        }
    }
}