[Interest] QML and ScrollView

[Mike Jackson]

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 [***@gmail.com <mailto:***@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
}


}
}
}

[m***@rpzdesign.com]

How about listview and a model?

Post by Mike Jackson
ScrollView

[Jérôme Godbout]

Not sure but may worth a try, your scrollview anchors must be fighting your height, try to only anchors left and right instead of fill. This may not solve your problemes but could save you a warning at least.

Post by Mike Jackson
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
—
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
http://lists.qt-project.org/mailman/listinfo/interest

[Mike Jackson]

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

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
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
—
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
}
}
}
}

[r***@gmail.com]

Do mockup of your desired screen on smartphone and tablet.

Share that with group.

www.balsamiq.com -> 30 day trial -> PDF screen shot.

md

[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 ;-)

Post by Mike Jackson
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
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
*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
—
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
http://lists.qt-project.org/mailman/listinfo/interest
_______________________________________________
Interest mailing list
http://lists.qt-project.org/mailman/listinfo/interest

[Mike Jackson]

THANK YOU!!!. With a few tweaks this works exactly as I wanted. I will study the code to fully understand what is going on. Thanks to everyone who gave me hints and possible solutions.

—
Mike Jackson

Post by Jérôme Godbout
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.png>
Hope this help understand what is going on for you ;-)
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

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
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
—
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
http://lists.qt-project.org/mailman/listinfo/interest <http://lists.qt-project.org/mailman/listinfo/interest>