[Interest] Awkwardness of delegates in heterogenous ListViews
Elvis Stansvik
elvstone at gmail.com
Thu Jun 9 09:21:32 CEST 2016
2016-06-09 9:03 GMT+02:00 Gianluca <gmaxera at gmail.com>:
> Did you try my solution ?
Ah, sorry for not replying earlier.
Well with a property alias to make the model available as "models",
the delegates would be dependent on this property alias being
available, they could not be reused in a context where it is not.
So the problem is really: It is hard to make a component that can be
dropped-in and used directly as a delegate, but also nested in a
delegate (Loader or Jason's approach) which provides the indirection
to handle items differently based on some criteria.
Elvis
>
> Il giorno 08/giu/2016, alle ore 15:13, Gian Maxera <gmaxera at gmail.com> ha
> scritto:
>
>
> On 8 Jun 2016, at 14:32, Elvis Stansvik <elvstone at gmail.com> wrote:
>
> Hi all,
>
> I'm currently using a "type" role in my items and then a Loader as
> delegate, to give a level of indirection and let me choose the actual
> delegate based on the "type" of the item.
>
> This explains it better (from my ListView):
>
> delegate: Loader {
> sourceComponent: {
> switch (type) {
> case "color":
> return colorDelegate
> case "flag":
> return flagDelegate
> ...
> }
> }
>
> Component {
> id: colorDelegate
>
> ColorDelegate { }
> }
>
> Component {
> id: flagDelegate
>
> FlagDelegate { }
> }
>
> ...
> }
>
> What I don't like with this approach is that inside my delegates, e.g.
> ColorDelegate.qml, I have to use parent.ListView.view.model to get a
> reference to the model (needed for editing operations). The use of
> "parent" here assumes a certain layout, but I see no other way :(
>
> How have others solved the issue of delegates for heterogenous lists?
>
>
> I use the following approach:
>
> This is the ListView with the Loader inside:
>
> ListView {
>
> id: subsectionsList
>
> model: navList.model
>
> delegate: Loader {
>
> id: innerItem
>
> width: subsectionsList.width
>
> height: subsectionsList.height
>
> asynchronous: false
>
> property var models: sectionModel
>
> source: sectionPage
>
> }
>
> }
>
>
> Then, I create the model in the following way:
>
> ListModel {
>
> id: subsections
>
> // it's not possible to use the 'static' initialization:
>
> // ListElement { ... }
>
> // because it does not support passing of object pointers
>
> Component.onCompleted: {
>
> append( {
>
> 'sectionName': "Hotel details",
>
> 'sectionPage':"HotelDetailsSubsection.qml",
>
> 'sectionModel': {
>
> 'event': event,
>
> 'hotel': hotel
>
> }
>
> })
>
> append( {
>
> 'sectionName': "Exhibitors",
>
> 'sectionPage':"HotelExhibitorsSubsection.qml",
>
> 'sectionModel': {
>
> 'event': event,
>
> 'hotel': hotel
>
> }
>
> })
>
> }
>
> }
>
>
> Pay attention on two key passages:
> - the Loader inside the ListView has a property for keeping the models:
> “property var models: sectionModel
> - the ListModel contain an attribute ‘sectionModel’ that it’s an object
> with the Items I want to inject and pass to my loaded items inside the
> ListView
>
> And then, into the source code of QML component I can use the model like
> that:
>
> Text {
>
> text: models.hotel.description
>
> }
>
> Text {
>
> text: models.hotel.city_and_country+' '+models.hotel.address+'
> '+models.hotel.postcode
>
> }
>
>
> Do you like it ?
>
>
> Ciao,
> Gianluca.
>
>
> Best regards,
> Elvis
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
>
>
More information about the Interest
mailing list