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 <[email protected]
<mailto:[email protected]>>:
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:
importQtQuick2.7
importQtQuick.Controls2.0
importQtQuick.Layouts1.0
ToolButton
{
propertyintpreInfoColumnWidth:50
text:"Column#1"
height:20
}
-------
importQtQuick2.7
importQtQuick.Controls2.0
importQtQuick.Layouts1.0
ItemDelegate
{
propertyintpreInfoColumnWidth: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
[email protected] <mailto:[email protected]>
http://lists.qt-project.org/mailman/listinfo/interest
<http://lists.qt-project.org/mailman/listinfo/interest>
_______________________________________________
Interest mailing list
[email protected]
http://lists.qt-project.org/mailman/listinfo/interest
