[Interest] QML and ScrollView

[Jérôme Godbout]

What you may want to try is something similar to this, note the parent of
GridLayout is a flickarable item and not the scrollview, this flickerable
does'nt have any size it take the children size, so you need to bind to
scrollview sizing to resize the width properly:

Item
{
id: component
width: 800
height: 600
ScrollView
{
id: scrollView_
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 200

GridLayout
{
columns: 2
columnSpacing: 5
rowSpacing: 10
property int scrollBarSpacing: 20
width: scrollView_.width - scrollBarSpacing
flow: GridLayout.LeftToRight

Text { text: qsTr("Repos path: ") }
TextField
{
Layout.fillWidth: true
text: 'fill me...'
}
Text { text: qsTr("Repos path: ") }
TextField
{
Layout.fillWidth: true
text: 'fill me...'
}
Text { text: qsTr("Repos path: ") }
TextField
{
Layout.fillWidth: true
text: 'fill me...'
}
Text { text: qsTr("Repos path: ") }
TextField
{
Layout.fillWidth: true
text: 'fill me...'
}
Text { text: qsTr("Repos path: ") }
TextField
{
Layout.fillWidth: true
text: 'fill me...'
}
Text { text: qsTr("Repos path: ") }
TextField
{
Layout.fillWidth: true
text: 'fill me...'
}
Text { text: qsTr("Repos path: ") }
TextField
{
Layout.fillWidth: true
text: 'fill me...'
}
Text { text: qsTr("Repos path: ") }
TextField
{
Layout.fillWidth: true
text: 'fill me...'
}
}
}
}

[image: Inline image 1]
Hope this help understand what is going on for you ;-)

On Fri, Dec 4, 2015 at 11:24 AM, Mike Jackson <imikejackson at gmail.com>
wrote:

> Thanks for the tips. I have tried all of them and nothing is working. I
> will try to explain what I want and maybe someone can tell me what I am
> doing wrong.
>
> I  want a scrollable grid layout. In the grid layout are pairs of “Label”
> and “Text Field” not unlike the Form Layout for a normal desktop app. I
> want the “TextField” to extend itself to the width of the GridLayout. And I
> want the grid layout to extend itself to the width of the ScrollView. The
> ScrollView should extend itself to the width of the QQuickWidget that i am
> using.
>
> My first foray into QML isn’t going so well.
>
> —
> Mike Jackson
>
> On Dec 3, 2015, at 11:45 PM, Jason H <jhihn at gmx.com> wrote:
>
> There are two sizes with the Scrolly things.
> The scroll  item, whose extents are set via anchors or height/width,and
> the contentHeight and contentWidth, which are the virtual area, in this
> case your grid layout.
> Give your Grid an id, and set the scrollview contentWidth/contentHeight to
> the width and height of the
> Also, usually you need a height AND width set, if the anchors are not set.
>
> *Sent:* Thursday, December 03, 2015 at 7:07 PM
> *From:* "Mike Jackson" <imikejackson at gmail.com>
> *To:* "Qt Project" <interest at qt-project.org>
> *Subject:* [Interest] QML and ScrollView
> I am trying to use a ScrollView in a QQuickWidget but the layout does not
> seem to be honoring what I am wanting. I have a bunch of “Label/TextField”
> pairs to the point where there are so many that I need them inside a
> scrollview. the issue is that if I do that then the TextFields which are
> set to fill in the rest of the row (inside a GridLayout) does not fill the
> row. If I remove the ScrollView then the TextField fills the remainder of
> the row?
>    Since this is my first foray into QML I am sure I am missing something
> obvious. this is with Qt 5.5.1 on OS X. I’ll post my
> —
> Mike Jackson [imikejackson at gmail.com]
>
>  import QtQuick 2.4
> import QtQuick.Controls 1.4
> import QtQuick.Layouts 1.1
> import LeroyJsonStorage 1.0
>
> Rectangle {
>
>     // Make the background a bit darker
>     color: "Light Gray"
>     border.color: "Black"
>
>     ScrollView
>     {
>         anchors.fill: parent
>             height: 800
>
>         GridLayout {
>             columns: 2
>             anchors.fill: parent
>             Label {
>                 text: "Foo"
>                 Layout.row: 0
>             }
>             TextField {
>                 text: "Bar"
>                 Layout.row: 0
>                 Layout.column: 1
>                 Layout.fillWidth: true
>             }
>
>             Label {
>                 text: "Foo"
>                 Layout.row: 1
>             }
>             TextField {
>                 text: "Bar"
>                 Layout.row: 1
>             }
>
>             Label {
>                 text: "Foo"
>                 Layout.row: 2
>             }
>             TextField {
>                 text: "Bar"
>                 Layout.row: 2
>             }
>
>             Label {
>                 text: "Foo"
>                 Layout.row: 3
>             }
>             TextField {
>                 text: "Bar"
>                 Layout.row: 3
>             }
>
>             Label {
>                 text: "Foo"
>                 Layout.row: 4
>             }
>             TextField {
>                 text: "Bar"
>                 Layout.row: 4
>             }
>
>             Label {
>                 text: "Foo"
>                 Layout.row: 5
>             }
>             TextField {
>                 text: "Bar"
>                 Layout.row: 5
>             }
>
>             Label {
>                 text: "Foo"
>                 Layout.row: 6
>             }
>             TextField {
>                 text: "Bar"
>                 Layout.row: 6
>             }
>
>             Label {
>                 text: "Foo"
>                 Layout.row: 7
>             }
>             TextField {
>                 text: "Bar"
>                 Layout.row: 7
>             }
>
>
>         }
>     }
> }
>
>
> _______________________________________________ Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
>
>
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20151204/8378b605/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 39485 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20151204/8378b605/attachment.png>