[Interest] Header and delegate (Was: tired of QML)

Marco Piccolino marco.a.piccolino at gmail.com
Sat Apr 15 18:39:50 CEST 2017


Header is a special case of delegate, whose instances as you might know by
now are created dynamically based on need. So you shoudn't rely on either
of them existing when ListView is created. Just put the width property in
ListView and reference that in header and delegate.

Marco Piccolino

Il 15 apr 2017 3:10 PM, <interest-request at qt-project.org> ha scritto:

Send Interest mailing list submissions to
        interest at qt-project.org

To subscribe or unsubscribe via the World Wide Web, visit
        http://lists.qt-project.org/mailman/listinfo/interest
or, via email, send a message with subject or body 'help' to
        interest-request at qt-project.org

You can reach the person managing the list at
        interest-owner at qt-project.org

When replying, please edit your Subject line so it is more specific
than "Re: Contents of Interest digest..."

Today's Topics:

   1. Re: Tired of QML (Oleg Evseev)
   2. Re: Tired of QML (Alexander Dyagilev)
   3. Re: Tired of QML (Alexander Dyagilev)
   4. Re: Tired of QML (Alexander Dyagilev)


---------- Messaggio inoltrato ----------
From: Oleg Evseev <ev.mipt at gmail.com>
To: Alexander Dyagilev <alervdvcw at gmail.com>
Cc: Qt Project <interest at qt-project.org>
Bcc:
Date: Sat, 15 Apr 2017 15:44:41 +0300
Subject: Re: [Interest] Tired of QML
In fact basic documentation link "Important Concepts In Qt Quick -
Positioning" http://doc.qt.io/qt-5/qtquick-positioning-topic.html is the
third one in most basic overview of Qt Quick http://doc.qt.io/qt-5/qtquick-
index.html

It is a pity that you were tired earlier on first two basic links :)


---------- Messaggio inoltrato ----------
From: Alexander Dyagilev <alervdvcw at gmail.com>
To: Oleg Evseev <ev.mipt at gmail.com>
Cc: Qt Project <interest at qt-project.org>
Bcc:
Date: Sat, 15 Apr 2017 15:57:16 +0300
Subject: Re: [Interest] Tired of QML

Many thanks for you answer (it helped)!

But... Sorry for being not specific, I meant another thing...

What I mean is the *preInfoColumnWidth* properties of both controls.

I create and use them in both header and delegate.

What I would like is to be able to set my delegates' properties equal to
the header's (i.e. columns' sizes).

The only example that succeeds to set a valid value (50) is the #4.

Could you please point me out to way of accessing header's property from
ListView component?

So I could use it something like:

delegate: DownloadListItem
{
column1width: header.column1width
column2width: header.column2width
column3width: header.column3width
}



On 4/15/2017 3:36 PM, Oleg Evseev wrote:

Hi Alexander,

First thing you need to understand that the apparent "order" like this

Item {}
Item {}

or that

Item {
    Item {}
}

doesn't mean that items will be arrange as column (or maybe row).
This order is relevant only to Z coordinate, that means what item will be
on top of the other.

Please be patience to learn qml documentation about items positioning
methods:
http://doc.qt.io/qt-5/qtquick-positioning-anchors.html
http://doc.qt.io/qt-5/qtquick-positioning-layouts.html
http://doc.qt.io/qt-5/qtquicklayouts-index.html
and cross links inside them

About your cases:

#1 - header property of ListView automatically position header for you,
it's ok

#2, #3 it will not work, only separate DownloadListHeader is shown.

http://doc.qt.io/qt-5/qml-qtquick-listview.html#header-prop
header: Component
This property holds the component to use as the header.
An instance of the header component is created for each view. The header is
positioned at the beginning of the view, before any items.

and as I mention this
Item {}
Item {}
does not mean column layout, so each of your item positioning by default -
in left top corner of parent so they overlaps

#4 works, cause header is component DownloadListHeader {} that will be
created and automatically positioned.
*But! *In fact there are two labels "Column #1" in same place in your
example! You even can also see this - text is little bold.

just delete downloadsViewHeader item, and you will get #1 case.

Alternative for using header property in your case will be using anchors:

DownloadListHeader {
        id: downloadsViewHeader
}

ListView {
   anchors.top: downloadsViewHeader.bottom
   delegate: {...}
}

or alternatively using layouts:

Column {
  DownloadListHeader {...}
   ListView {...}
}

Please, for further aspects take a look into documentation.

--
With regards, Oleg.

2017-04-15 14:40 GMT+03:00 Alexander Dyagilev <alervdvcw at gmail.com>:

> Hello,
>
> It seems to be a very non intuitive for me... :(
>
> I'm trying to create my own header for ListView as TableView does not
> exist in Quick Controls 2.
>
> ListView
> {
>         header: DownloadListHeader{}
>
>         delegate: DownloadListItem
>         {
>             preInfoColumnWidth: header.preInfoColumnWidth
>         }
>
> }
>
> gives the following result:
>
>
> This:
>
> DownloadListHeader
>     {
>         id: downloadsViewHeader
>     }
>
>     ListView
>     {
>         header: downloadsViewHeader
>         delegate: DownloadListItem
>         {
>             preInfoColumnWidth: header.preInfoColumnWidth
>         }
>     }
>
> gives:
>
>
> This:
>
> DownloadListHeader
>     {
>         id: downloadsViewHeader
>     }
>
>     ListView
>     {
>         header: downloadsViewHeader
>         delegate: DownloadListItem
>         {
>             preInfoColumnWidth: downloadsViewHeader.preInfoColumnWidth
>         }
>     }
>
> Gives:
>
>
> Ooops, this:
>
> DownloadListHeader
>     {
>         id: downloadsViewHeader
>     }
>
>     ListView
>     {
>         header: DownloadListHeader {}
>         delegate: DownloadListItem
>         {
>             preInfoColumnWidth: downloadsViewHeader.preInfoColumnWidth
>         }
>     }
>
> Gives the expected behaviour:
>
>
> Could somebody please explain me differences between all these variants?
> Right now, all this look crazy for me.
>
>
> Just in case. The remaining code:
>
> import QtQuick 2.7
>
> import QtQuick.Controls 2.0
>
> import QtQuick.Layouts 1.0
>
> ToolButton
>
> {
>
>     property int preInfoColumnWidth: 50
>
>     text: "Column #1"
>
>     height: 20
>
> }
>
> -------
> import QtQuick 2.7import QtQuick.Controls 2.0import QtQuick.Layouts 1.0
>
> ItemDelegate
> {    property int preInfoColumnWidth: 0
>
>     height: 40
>
>     Row    {        spacing: 10
>
>         Row        {            width: preInfoColumnWidth
>
>             CheckBox            {            }        }
>
>         Text        {            text: name            width: 150            elide: Text.ElideRight            anchors.verticalCenter: parent.verticalCenter        }
>
>         Column        {            anchors.verticalCenter: parent.verticalCenter            width: 80            spacing: 2
>
>             Row            {                width: parent.width                height: 10                Text { text: progress + "%"; anchors.left: parent.left}                Text { text: timeLeft == "" ? "Paused" : timeLeft; anchors.right: parent.right}            }
>
>             ProgressBar            {                from: 0; to: 100; value: progress                height: 10; width: parent.width            }        }
>
>         Text        {            text: size + "MB"            width: 50            elide: Text.ElideRight            anchors.verticalCenter: parent.verticalCenter        }    }
> }
>
>
>
>
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
>


---------- Messaggio inoltrato ----------
From: Alexander Dyagilev <alervdvcw at gmail.com>
To: Oleg Evseev <ev.mipt at gmail.com>
Cc: Qt Project <interest at qt-project.org>
Bcc:
Date: Sat, 15 Apr 2017 16:03:11 +0300
Subject: Re: [Interest] Tired of QML

No, I meant non-intuitive behavior of QML... :(

I do not understand why this code does not work:

ListView {

        anchors.fill: parent

        model: downloadsModel

        header: DownloadListHeader{}

        delegate: DownloadListItem

        {

            preInfoColumnWidth: parent.header.preInfoColumnWidth

        }
}
parent.header seems to be not accessible as preInfoColumnWidth
initializes with 0. :(



On 4/15/2017 3:44 PM, Oleg Evseev wrote:

In fact basic documentation link "Important Concepts In Qt Quick -
Positioning" http://doc.qt.io/qt-5/qtquick-positioning-topic.html is the
third one in most basic overview of Qt Quick http://doc.qt.io/qt-5/qtquick-
index.html

It is a pity that you were tired earlier on first two basic links :)




---------- Messaggio inoltrato ----------
From: Alexander Dyagilev <alervdvcw at gmail.com>
To: Vlad Stelmahovsky <vladstelmahovsky at gmail.com>
Cc: Qt Project <interest at qt-project.org>
Bcc:
Date: Sat, 15 Apr 2017 16:09:24 +0300
Subject: Re: [Interest] Tired of QML

I like QML and its architecture.

I've tired of some of its non obvious things that are easy for someone
knowning QML and absolutely terrible for newbies like me.

On 4/15/2017 3:26 PM, Vlad Stelmahovsky wrote:

if you tired of QML, go take some html+css+js as a antipattern and come
back relaxed to QML



_______________________________________________
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/20170415/f8082ea0/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 9261 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20170415/f8082ea0/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 9215 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20170415/f8082ea0/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 9799 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20170415/f8082ea0/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/png
Size: 9689 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20170415/f8082ea0/attachment-0003.png>


More information about the Interest mailing list