[Interest] Tired of QML
Alexander Dyagilev
alervdvcw at gmail.com
Sat Apr 15 14:57:16 CEST 2017
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
> <mailto: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:
>
> 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
> 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/20170415/b68bd1c0/attachment.html>
-------------- 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/b68bd1c0/attachment.png>
-------------- 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/b68bd1c0/attachment-0001.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/b68bd1c0/attachment-0002.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/b68bd1c0/attachment-0003.png>
More information about the Interest
mailing list