[Interest] Tired of QML

[Oleg Evseev]

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