Wrapping Text in a vertical Flickable

patrickkidd

I am trying to make a vertically-flickable Flickable of GroupBoxes with long wrapped text elements. How can I do this? Here is my qml:

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12

Flickable {
    property int margins: 10
    
    anchors.fill: parent
    interactive: true
    contentHeight: outer.implicitHeight
    contentWidth: width
    ColumnLayout {
        id:outer
        anchors.margins: 10
        anchors.fill: parent
        GroupBox {
            title: 'One'
            Layout.fillWidth: true
            ColumnLayout {
                id: inner
                anchors.fill: parent
                spacing: 10
                CheckBox {
                    text: "Hide Interactive Process"
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                }
                
                CheckBox {
                    text: "Hide Layers"
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                }
                
                CheckBox {
                    text: "Hide ToolBars"
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                }
            }
        }
        GroupBox {
            title: 'Two'
            width: parent.width
            ColumnLayout {
                anchors.fill: parent
                spacing: 10
                CheckBox {
                    text: "Hide Interactive Process"
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                }
                
                CheckBox {
                    text: "Hide Layers"
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                }
                
                CheckBox {
                    text: "Hide ToolBars"
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                }
            }
        }
    }
}

patrickkidd

I figured it out. The Text element does indeed need to have its width dictated according to its container. The proper way to do this dynamically in my example is Layout.fillWidth: true.

Further, to get Flicker.contentHeight to work without a binding loop I had to set static coordinates for the ColumnLayout inside the Flicker. See code below:

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12

Flickable {

    id: root
    property int margins: 10

    interactive: true
    contentHeight: outer.implicitHeight + margins * 2
    contentWidth: width

    ColumnLayout {
        id: outer
        y: margins
        x: margins
        width: parent.width - margins * 2
        GroupBox {
            title: 'One'
            Layout.fillWidth: true
            ColumnLayout {
                id: inner
                anchors.fill: parent
                spacing: 10
                CheckBox {
                    text: "Hide Interactive Process"
                    Layout.fillWidth: true
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
                
                CheckBox {
                    text: "Hide Layers"
                    Layout.fillWidth: true
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
                
                CheckBox {
                    text: "Hide ToolBars"
                    Layout.fillWidth: true
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
            }
        }
        GroupBox {
            title: 'Two'
            Layout.fillWidth: true
            ColumnLayout {
                anchors.fill: parent
                spacing: 10
                CheckBox {
                    text: "Hide Interactive Process"
                    Layout.fillWidth: true
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
                
                CheckBox {
                    text: "Hide Layers"
                    Layout.fillWidth: true

                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
                
                CheckBox {
                    text: "Hide ToolBars"
                    Layout.fillWidth: true
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
            }
        }
    }
}

Shrinidhi Upadhyaya

Hi @patrickkidd , you need to set the width for the wrapMode to work.

Sample Code:-

Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.preferredWidth: 400
                    color: "red"
                }

Note:- For more information about wrapMode[https://doc.qt.io/qt-5/qml-qtquick-text.html#wrapMode-prop]

patrickkidd

@shrinidhi-upadhyaya said in Wrapping Text in a vertical Flickable:

Hi @patrickkidd , you need to set the width for the wrapMode to work.

Sample Code:-

Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.preferredWidth: 400
                    color: "red"
                }

Note:- For more information about wrapMode[https://doc.qt.io/qt-5/qml-qtquick-text.html#wrapMode-prop]

I would like the root to dictate the size of the elements within it as opposed to setting an absolute width. Surely that is possible...

patrickkidd

I figured it out. The Text element does indeed need to have its width dictated according to its container. The proper way to do this dynamically in my example is Layout.fillWidth: true.

Further, to get Flicker.contentHeight to work without a binding loop I had to set static coordinates for the ColumnLayout inside the Flicker. See code below:

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12

Flickable {

    id: root
    property int margins: 10

    interactive: true
    contentHeight: outer.implicitHeight + margins * 2
    contentWidth: width

    ColumnLayout {
        id: outer
        y: margins
        x: margins
        width: parent.width - margins * 2
        GroupBox {
            title: 'One'
            Layout.fillWidth: true
            ColumnLayout {
                id: inner
                anchors.fill: parent
                spacing: 10
                CheckBox {
                    text: "Hide Interactive Process"
                    Layout.fillWidth: true
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
                
                CheckBox {
                    text: "Hide Layers"
                    Layout.fillWidth: true
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
                
                CheckBox {
                    text: "Hide ToolBars"
                    Layout.fillWidth: true
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
            }
        }
        GroupBox {
            title: 'Two'
            Layout.fillWidth: true
            ColumnLayout {
                anchors.fill: parent
                spacing: 10
                CheckBox {
                    text: "Hide Interactive Process"
                    Layout.fillWidth: true
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
                
                CheckBox {
                    text: "Hide Layers"
                    Layout.fillWidth: true

                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
                
                CheckBox {
                    text: "Hide ToolBars"
                    Layout.fillWidth: true
                }
                Text {
                    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
            }
        }
    }
}