[Interest] QML and ScrollView
Mike Jackson
imikejackson at gmail.com
Fri Dec 4 19:05:00 CET 2015
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
> On Dec 4, 2015, at 12:41 PM, Jérôme Godbout <jerome at bodycad.com> wrote:
>
> 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.png>
> 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 <mailto: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 <mailto: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 <mailto:imikejackson at gmail.com>>
>> To: "Qt Project" <interest at qt-project.org <mailto: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 <mailto:Interest at qt-project.org> http://lists.qt-project.org/mailman/listinfo/interest <http://lists.qt-project.org/mailman/listinfo/interest>
>
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org <mailto:Interest at qt-project.org>
> http://lists.qt-project.org/mailman/listinfo/interest <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/3a257140/attachment.html>
More information about the Interest
mailing list