Discussion:
RowLayout with Text with wrap mode
(too old to reply)
Igor Mironchik
2018-03-03 07:24:09 UTC
Permalink
Hello,

I have a delegate for ListView with RowLayout inside:

RowLayout {
                anchors.fill: parent
                spacing: 20
                width: parent.width

                ColumnLayout {
                    id: col
                    anchors.left: parent.left
                    spacing: 5

                    Text {
                        text: type === 0 ? qsTr( "<b>Place: </b>" ) +
model[ "PlaceRole" ] :
                            qsTr( "<b>Code: </b>" ) + model[ "CodeRole" ]
                    }

                    Text {
                        text: qsTr( "<b>Amount: </b>" ) + model[
"AmountRole" ]
                    }
                }

                Text {
                    text: model[ "DescRole" ]
                    wrapMode: Text.WordWrap
                }
            }


All is fine with except that the last Text item doesn't wrap text. How
can I workaround it? Thanks.
Igor Mironchik
2018-03-03 09:18:31 UTC
Permalink
I know that changing RowLayout to simple Row will solve the problem. But
is it possible to solve this with layout?


On 03.03.2018 10:24, Igor Mironchik wrote:
> Hello,
>
> I have a delegate for ListView with RowLayout inside:
>
> RowLayout {
>                 anchors.fill: parent
>                 spacing: 20
>                 width: parent.width
>
>                 ColumnLayout {
>                     id: col
>                     anchors.left: parent.left
>                     spacing: 5
>
>                     Text {
>                         text: type === 0 ? qsTr( "<b>Place: </b>" ) +
> model[ "PlaceRole" ] :
>                             qsTr( "<b>Code: </b>" ) + model[ "CodeRole" ]
>                     }
>
>                     Text {
>                         text: qsTr( "<b>Amount: </b>" ) + model[
> "AmountRole" ]
>                     }
>                 }
>
>                 Text {
>                     text: model[ "DescRole" ]
>                     wrapMode: Text.WordWrap
>                 }
>             }
>
>
> All is fine with except that the last Text item doesn't wrap text. How
> can I workaround it? Thanks.
>
Jérôme Godbout
2018-03-05 13:42:13 UTC
Permalink
All the *View* type are a bit of a pain with Layout item. You need to specify the height and width properly with the Layout.minimumWidth/Height and maximum values. If you don't need all the animation stuff from ListView, you can do a simple GridLayout and fill the element which would be way simpler and you will have full control on the sizing without the pain.

I for one, try to avoid the *View* element as much as possible. Good GridLayout make it easier and you can even declare the items by specifying the columns and row making a different repeater by row or by column possible.

________________________________
From: Interest <interest-bounces+godboutj=***@qt-project.org> on behalf of Igor Mironchik <***@gmail.com>
Sent: Saturday, March 3, 2018 4:18 AM
To: Qt Project
Subject: Re: [Interest] RowLayout with Text with wrap mode

I know that changing RowLayout to simple Row will solve the problem. But
is it possible to solve this with layout?


On 03.03.2018 10:24, Igor Mironchik wrote:
> Hello,
>
> I have a delegate for ListView with RowLayout inside:
>
> RowLayout {
> anchors.fill: parent
> spacing: 20
> width: parent.width
>
> ColumnLayout {
> id: col
> anchors.left: parent.left
> spacing: 5
>
> Text {
> text: type === 0 ? qsTr( "<b>Place: </b>" ) +
> model[ "PlaceRole" ] :
> qsTr( "<b>Code: </b>" ) + model[ "CodeRole" ]
> }
>
> Text {
> text: qsTr( "<b>Amount: </b>" ) + model[
> "AmountRole" ]
> }
> }
>
> Text {
> text: model[ "DescRole" ]
> wrapMode: Text.WordWrap
> }
> }
>
>
> All is fine with except that the last Text item doesn't wrap text. How
> can I workaround it? Thanks.
>
Pierre-Yves Siret
2018-03-05 14:00:34 UTC
Permalink
You should always set a width for Text items (and a wrapMode and/or elide
mode), unless you want your text to have no horizontal limit.
In your case you need to correct your code (it's not a workaround since
it's the intended behaviour) is to set a width for your Texts (the 3).
Do this by using `Layout.fillWidth: true`.

BTW : your width: parent.width and anchors.left: parent.left have no effect
here

I have not met the problems mentionned by JérÎme and using ListView is
perfectly fine with me.


2018-03-05 14:42 GMT+01:00 JérÎme Godbout <***@amotus.ca>:

> All the *View* type are a bit of a pain with Layout item. You need to
> specify the height and width properly with the Layout.minimumWidth/Height
> and maximum values. If you don't need all the animation stuff from
> ListView, you can do a simple GridLayout and fill the element which would
> be way simpler and you will have full control on the sizing without the
> pain.
>
> I for one, try to avoid the *View* element as much as possible. Good
> GridLayout make it easier and you can even declare the items by specifying
> the columns and row making a different repeater by row or by column
> possible.
>
> ------------------------------
> *From:* Interest <interest-bounces+godboutj=***@qt-project.org> on
> behalf of Igor Mironchik <***@gmail.com>
> *Sent:* Saturday, March 3, 2018 4:18 AM
> *To:* Qt Project
> *Subject:* Re: [Interest] RowLayout with Text with wrap mode
>
> I know that changing RowLayout to simple Row will solve the problem. But
> is it possible to solve this with layout?
>
>
> On 03.03.2018 10:24, Igor Mironchik wrote:
> > Hello,
> >
> > I have a delegate for ListView with RowLayout inside:
> >
> > RowLayout {
> > anchors.fill: parent
> > spacing: 20
> > width: parent.width
> >
> > ColumnLayout {
> > id: col
> > anchors.left: parent.left
> > spacing: 5
> >
> > Text {
> > text: type === 0 ? qsTr( "<b>Place: </b>" ) +
> > model[ "PlaceRole" ] :
> > qsTr( "<b>Code: </b>" ) + model[ "CodeRole" ]
> > }
> >
> > Text {
> > text: qsTr( "<b>Amount: </b>" ) + model[
> > "AmountRole" ]
> > }
> > }
> >
> > Text {
> > text: model[ "DescRole" ]
> > wrapMode: Text.WordWrap
> > }
> > }
> >
> >
> > All is fine with except that the last Text item doesn't wrap text. How
> > can I workaround it? Thanks.
> >
>
> _______________________________________________
> Interest mailing list
> ***@qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
> _______________________________________________
> Interest mailing list
> ***@qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
>
Igor Mironchik
2018-03-05 17:20:19 UTC
Permalink
Hi,

Thank you guys. Layout.fillWidth: true and width: parent.width together
did the task.

I have one more question: what if I have anchors.left: parent.left that
is not necessary, will be in this case some performance issue with it?
Or I can just forget about not necessary bindings?

On 05.03.2018 17:00, Pierre-Yves Siret wrote:
> You should always set a width for Text items (and a wrapMode and/or
> elide mode), unless you want your text to have no horizontal limit.
> In your case you need to correct your code (it's not a workaround
> since it's the intended behaviour) is to set a width for your Texts
> (the 3).
> Do this by using `Layout.fillWidth: true`.
>
> BTW : your width: parent.width and anchors.left: parent.left have no
> effect here
>
> I have not met the problems mentionned by JérÎme and using ListView is
> perfectly fine with me.
>
>
> 2018-03-05 14:42 GMT+01:00 JérÎme Godbout <***@amotus.ca
> <mailto:***@amotus.ca>>:
>
> All the *View* type are a bit of a pain with Layout item. You need
> to specify the height and width properly with the
> Layout.minimumWidth/Height and maximum values. If you don't need
> all the animation stuff from ListView, you can do a simple
> GridLayout and fill the element which would be way simpler and you
> will have full control on the sizing without the pain.
>
>
> I for one, try to avoid the *View* element as much as possible.
> Good GridLayout make it easier and you can even declare the items
> by specifying the columns and row making a different repeater by
> row or by column possible.
>
> ------------------------------------------------------------------------
> *From:* Interest
> <interest-bounces+godboutj=***@qt-project.org
> <mailto:***@qt-project.org>> on behalf of Igor Mironchik
> <***@gmail.com <mailto:***@gmail.com>>
> *Sent:* Saturday, March 3, 2018 4:18 AM
> *To:* Qt Project
> *Subject:* Re: [Interest] RowLayout with Text with wrap mode
> I know that changing RowLayout to simple Row will solve the
> problem. But
> is it possible to solve this with layout?
>
>
> On 03.03.2018 10:24, Igor Mironchik wrote:
> > Hello,
> >
> > I have a delegate for ListView with RowLayout inside:
> >
> > RowLayout {
> >                 anchors.fill: parent
> >                 spacing: 20
> >                 width: parent.width
> >
> >                 ColumnLayout {
> >                     id: col
> >                     anchors.left: parent.left
> >                     spacing: 5
> >
> >                     Text {
> >                         text: type === 0 ? qsTr( "<b>Place:
> </b>" ) +
> > model[ "PlaceRole" ] :
> >                             qsTr( "<b>Code: </b>" ) + model[
> "CodeRole" ]
> >                     }
> >
> >                     Text {
> >                         text: qsTr( "<b>Amount: </b>" ) + model[
> > "AmountRole" ]
> >                     }
> >                 }
> >
> >                 Text {
> >                     text: model[ "DescRole" ]
> >                     wrapMode: Text.WordWrap
> >                 }
> >             }
> >
> >
> > All is fine with except that the last Text item doesn't wrap
> text. How
> > can I workaround it? Thanks.
> >
>
> _______________________________________________
> Interest mailing list
> ***@qt-project.org <mailto:***@qt-project.org>
> http://lists.qt-project.org/mailman/listinfo/interest
> <http://lists.qt-project.org/mailman/listinfo/interest>
>
> _______________________________________________
> Interest mailing list
> ***@qt-project.org <mailto:***@qt-project.org>
> http://lists.qt-project.org/mailman/listinfo/interest
> <http://lists.qt-project.org/mailman/listinfo/interest>
>
>
Jérôme Godbout
2018-03-05 18:36:48 UTC
Permalink
your BTW is the problems, parent size and anchors are not really working into a ListView delegate, which make some component reuse a bit hard with ListView sometime. When using a Layout into the delegate it's only the layout sizing that will have effect (normal size or other parent filll got ignored). If you don't see any problems with that, fine, I do.

________________________________
From: ***@gmail.com <***@gmail.com> on behalf of Pierre-Yves Siret <***@gmail.com>
Sent: Monday, March 5, 2018 9:00 AM
To: Jérôme Godbout
Cc: Igor Mironchik; Qt Project
Subject: Re: [Interest] RowLayout with Text with wrap mode

You should always set a width for Text items (and a wrapMode and/or elide mode), unless you want your text to have no horizontal limit.
In your case you need to correct your code (it's not a workaround since it's the intended behaviour) is to set a width for your Texts (the 3).
Do this by using `Layout.fillWidth: true`.

BTW : your width: parent.width and anchors.left: parent.left have no effect here

I have not met the problems mentionned by Jérôme and using ListView is perfectly fine with me.


2018-03-05 14:42 GMT+01:00 Jérôme Godbout <***@amotus.ca<mailto:***@amotus.ca>>:

All the *View* type are a bit of a pain with Layout item. You need to specify the height and width properly with the Layout.minimumWidth/Height and maximum values. If you don't need all the animation stuff from ListView, you can do a simple GridLayout and fill the element which would be way simpler and you will have full control on the sizing without the pain.

I for one, try to avoid the *View* element as much as possible. Good GridLayout make it easier and you can even declare the items by specifying the columns and row making a different repeater by row or by column possible.

________________________________
From: Interest <interest-bounces+godboutj=***@qt-project.org<mailto:***@qt-project.org>> on behalf of Igor Mironchik <***@gmail.com<mailto:***@gmail.com>>
Sent: Saturday, March 3, 2018 4:18 AM
To: Qt Project
Subject: Re: [Interest] RowLayout with Text with wrap mode

I know that changing RowLayout to simple Row will solve the problem. But
is it possible to solve this with layout?


On 03.03.2018 10:24, Igor Mironchik wrote:
> Hello,
>
> I have a delegate for ListView with RowLayout inside:
>
> RowLayout {
> anchors.fill: parent
> spacing: 20
> width: parent.width
>
> ColumnLayout {
> id: col
> anchors.left: parent.left
> spacing: 5
>
> Text {
> text: type === 0 ? qsTr( "<b>Place: </b>" ) +
> model[ "PlaceRole" ] :
> qsTr( "<b>Code: </b>" ) + model[ "CodeRole" ]
> }
>
> Text {
> text: qsTr( "<b>Amount: </b>" ) + model[
> "AmountRole" ]
> }
> }
>
> Text {
> text: model[ "DescRole" ]
> wrapMode: Text.WordWrap
> }
> }
>
>
> All is fine with except that the last Text item doesn't wrap text. How
> can I workaround it? Thanks.
>
Pierre-Yves Siret
2018-03-05 23:02:29 UTC
Permalink
My BTW remarks aren't the problems. Those remarks apply for all Item, not
only ListView delegates.

width: parent.width has no effect if both anchors.left and anchors.right
are set (this is the case with anchors.fill)
anchors.left: parent.left with no margins/leftMargin is the same as x: 0,
the default unless you are in parent managing your x position (Row,
RowLayout, Horizontal ListView, Grid, GridLayout, GridView and also Control
with padding ?). When in a parent like those mentioned you should not set
the x value.

parent size and anchors work in a ListView provided you are using
horizontal anchors or size in a Vertical ListView and vice-versa.
You part about *Layout is true outside a delegate also.

2018-03-05 19:36 GMT+01:00 JérÎme Godbout <***@amotus.ca>:

> your BTW is the problems, parent size and anchors are not really working
> into a ListView delegate, which make some component reuse a bit hard with
> ListView sometime. When using a Layout into the delegate it's only the
> layout sizing that will have effect (normal size or other parent filll got
> ignored). If you don't see any problems with that, fine, I do.
>
> ------------------------------
> *From:* ***@gmail.com <***@gmail.com> on behalf of Pierre-Yves
> Siret <***@gmail.com>
> *Sent:* Monday, March 5, 2018 9:00 AM
> *To:* JérÎme Godbout
> *Cc:* Igor Mironchik; Qt Project
>
> *Subject:* Re: [Interest] RowLayout with Text with wrap mode
>
> You should always set a width for Text items (and a wrapMode and/or elide
> mode), unless you want your text to have no horizontal limit.
> In your case you need to correct your code (it's not a workaround since
> it's the intended behaviour) is to set a width for your Texts (the 3).
> Do this by using `Layout.fillWidth: true`.
>
> BTW : your width: parent.width and anchors.left: parent.left have no
> effect here
>
> I have not met the problems mentionned by JérÎme and using ListView is
> perfectly fine with me.
>
>
> 2018-03-05 14:42 GMT+01:00 JérÎme Godbout <***@amotus.ca>:
>
> All the *View* type are a bit of a pain with Layout item. You need to
> specify the height and width properly with the Layout.minimumWidth/Height
> and maximum values. If you don't need all the animation stuff from
> ListView, you can do a simple GridLayout and fill the element which would
> be way simpler and you will have full control on the sizing without the
> pain.
>
> I for one, try to avoid the *View* element as much as possible. Good
> GridLayout make it easier and you can even declare the items by specifying
> the columns and row making a different repeater by row or by column
> possible.
>
> ------------------------------
> *From:* Interest <interest-bounces+godboutj=***@qt-project.org> on
> behalf of Igor Mironchik <***@gmail.com>
> *Sent:* Saturday, March 3, 2018 4:18 AM
> *To:* Qt Project
> *Subject:* Re: [Interest] RowLayout with Text with wrap mode
>
> I know that changing RowLayout to simple Row will solve the problem. But
> is it possible to solve this with layout?
>
>
> On 03.03.2018 10:24, Igor Mironchik wrote:
> > Hello,
> >
> > I have a delegate for ListView with RowLayout inside:
> >
> > RowLayout {
> > anchors.fill: parent
> > spacing: 20
> > width: parent.width
> >
> > ColumnLayout {
> > id: col
> > anchors.left: parent.left
> > spacing: 5
> >
> > Text {
> > text: type === 0 ? qsTr( "<b>Place: </b>" ) +
> > model[ "PlaceRole" ] :
> > qsTr( "<b>Code: </b>" ) + model[ "CodeRole" ]
> > }
> >
> > Text {
> > text: qsTr( "<b>Amount: </b>" ) + model[
> > "AmountRole" ]
> > }
> > }
> >
> > Text {
> > text: model[ "DescRole" ]
> > wrapMode: Text.WordWrap
> > }
> > }
> >
> >
> > All is fine with except that the last Text item doesn't wrap text. How
> > can I workaround it? Thanks.
> >
>
> _______________________________________________
> Interest mailing list
> ***@qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
> _______________________________________________
> Interest mailing list
> ***@qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
>
>
Jérôme Godbout
2018-03-05 13:34:21 UTC
Permalink
You need to specify a width to your Text element so the wrap around can occur. Else the Text consider it should set the width according to the text and therefor no wrap around is possible. If you want dynamic width range, you should consider Layout.minimumWidth and Layout.maximumWidth with different value.


________________________________
From: Interest <interest-bounces+godboutj=***@qt-project.org> on behalf of Igor Mironchik <***@gmail.com>
Sent: Saturday, March 3, 2018 2:24 AM
To: Qt Project
Subject: [Interest] RowLayout with Text with wrap mode

Hello,

I have a delegate for ListView with RowLayout inside:

RowLayout {
anchors.fill: parent
spacing: 20
width: parent.width

ColumnLayout {
id: col
anchors.left: parent.left
spacing: 5

Text {
text: type === 0 ? qsTr( "<b>Place: </b>" ) +
model[ "PlaceRole" ] :
qsTr( "<b>Code: </b>" ) + model[ "CodeRole" ]
}

Text {
text: qsTr( "<b>Amount: </b>" ) + model[
"AmountRole" ]
}
}

Text {
text: model[ "DescRole" ]
wrapMode: Text.WordWrap
}
}


All is fine with except that the last Text item doesn't wrap text. How
can I workaround it? Thanks.
Loading...