[SailfishDevel] SilicaFlickable, Column, SilicaListView

Andrey Kozhevnikov coderusinbox at gmail.com
Sun May 24 17:53:41 UTC 2015


For example here is my old and very poor made UI with listview inside 
flickable: 
https://github.com/CODeRUS/harbour-mitakuuluu2/blob/master/client/qml/ConversationPage.qml#L234

And here is my latest monster page UI without using flickable: 
https://gist.github.com/CODeRUS/d9033e440dd4da74dd77
If someone will be interested i can explain how it working

24.05.2015 22:45, Dmitriy Purgin пишет:
> Hi Andrey,
>
> can you please provide a case or a non-synthetic example? I've never 
> met a pressDelay yet and never used it myself, read about it in the 
> docs just now. I think it can be used in a very complex interface but 
> can't think of an example right now. But, as you know, I'm not much of 
> a GUI builder, doing backend stuff mostly.
>
> Cheers
>
> 2015-05-24 23:31 GMT+06:00 Andrey Kozhevnikov <coderusinbox at gmail.com 
> <mailto:coderusinbox at gmail.com>>:
>
>     Do not forget to set proper pressDelay values for flickable and
>     listview, if you still want to put listview inside flickable.
>
>     24.05.2015 22:28, Dmitriy Purgin пишет:
>>     Привiт, Вiталiй!
>>
>>     If want to have something like a toolbar at the bottom of the
>>     list, I'd go with DockedPanel [1]. I guess it's the preferred way
>>     of doing it. But you can also do this by setting list view height
>>     explicitly if you do it in column or anchoring. Consider the
>>     following code, it lays out a header and a button at top and
>>     bottom of page respectively, and a list view in the middle:
>>
>>     Page {
>>         id: page
>>
>>         SilicaFlickable {
>>             anchors.fill: parent
>>
>>     // test pull down menu
>>     PullDownMenu {
>>                 MenuItem {
>>                     text: 'Item 1'
>>                 }
>>             }
>>
>>     // test push up menu
>>     PushUpMenu {
>>                 MenuItem {
>>                     text: 'Item 2'
>>                 }
>>             }
>>
>>     // set this explicitly, otherwise you will have
>>     // weird problems with push and pull menus
>>     contentHeight: column.height
>>
>>             Column {
>>                 id: column
>>
>>                 anchors.fill: parent
>>
>>                 PageHeader {
>>                     id: header
>>
>>                     anchors.left: parent.left
>>                     anchors.right: parent.right
>>
>>                     title: 'Header'
>>                 }
>>
>>                 SilicaListView {
>>                     id: listView
>>
>>     // fill all the space between header and button
>>     height: page.height - header.height - button.height
>>
>>                     anchors.left: parent.left
>>                     anchors.right: parent.right
>>
>>     // this is needed so that the list elements
>>                     // do not overlap with other controls in column
>>                     clip: true
>>
>>                     model: 20
>>
>>                     delegate: ListItem {
>>                         anchors.left: parent.left
>>                         anchors.right: parent.right
>>
>>                         Label {
>>                             width: parent.width
>>                             height: parent.height
>>
>>                             text: model.modelData
>>                         }
>>                     }
>>                 }
>>
>>                 Button {
>>                     id: button
>>
>>                     anchors.horizontalCenter: parent.horizontalCenter
>>
>>                     text: 'Button'
>>                 }
>>             }
>>         }
>>     }
>>
>>     If you'd do this using anchoring, you should set contentHeight to
>>     sum of all the elements included to flickable.
>>
>>     Please note that if you would set a view that wouldn't fit to
>>     screen (by setting listView.height to something larger than the
>>     expression in the sample code), you would have to either scroll
>>     the list all the way up or down for the menus or begin dragging
>>     outside the list.
>>
>>     Cheers
>>     Dmitriy
>>
>>     [1]
>>     https://sailfishos.org/develop/docs/silica/qml-sailfishsilica-dockedpanel.html/
>>
>>
>>     2015-05-23 22:57 GMT+06:00 Віталій Коренєв <nemish94 at gmail.com
>>     <mailto:nemish94 at gmail.com>>:
>>
>>         I'm just starting to learn qml, and there are many questions.
>>         I have
>>         XmlListModel {
>>         id: listModel
>>         query: "/ colors / color"
>>         XmlRole {name: "id"; query: "id / string ()"}
>>         XmlRole {name: "title"; query: "title / string ()"}
>>         ...
>>         }
>>
>>         SilicaFlickable {
>>         anchors.fill: parent
>>
>>         Column
>>         {
>>         width: parent.width; height: parent.height
>>         id: mainContainer
>>
>>         SilicaListView
>>         {
>>         width: parent.width; height: parent.height
>>         id: list
>>         model: listModel
>>         delegate: BackgroundItem {
>>         width: parent.width; height: 120
>>         Image {
>>         source: imageUrl
>>         anchors.fill: parent
>>         }
>>         Label {text: title}
>>         }
>>         VerticalScrollDecorator {}
>>         }
>>         }
>>         }
>>
>>         How can I add other elements (buttons, labels ...) after all
>>         elements of SilicaListView, if its height: parent.height. If
>>         you remove line height: parent.height for SilicaListView, it
>>         is not displayed. There have been attempts to add other
>>         elements before VerticalScrollDecorator {} and other places
>>         (experimenting with anchors), but the added elements were in
>>         the upper left corner of the screen or on the last 10 points
>>         of the screen (under SilicaListView).
>>
>>         Sorry for my English.
>>         PS. This is the only way to get or give help when working
>>         with qml + Silica? No forum for developers Sailfish?
>>
>>         _______________________________________________
>>         SailfishOS.org Devel mailing list
>>         To unsubscribe, please send a mail to
>>         devel-unsubscribe at lists.sailfishos.org
>>         <mailto:devel-unsubscribe at lists.sailfishos.org>
>>
>>
>>
>>
>>     _______________________________________________
>>     SailfishOS.org Devel mailing list
>>     To unsubscribe, please send a mail todevel-unsubscribe at lists.sailfishos.org
>>     <mailto:devel-unsubscribe at lists.sailfishos.org>
>
>
>     _______________________________________________
>     SailfishOS.org Devel mailing list
>     To unsubscribe, please send a mail to
>     devel-unsubscribe at lists.sailfishos.org
>     <mailto:devel-unsubscribe at lists.sailfishos.org>
>
>
>
>
> _______________________________________________
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to devel-unsubscribe at lists.sailfishos.org

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.sailfishos.org/pipermail/devel/attachments/20150524/d96d1c97/attachment-0001.html>


More information about the Devel mailing list