ListView as element of a ListView



  • Hi all,
    I'm not very experienced with QML.

    I need an horizontal ListView with 2 element. One of the 2 elements must be another ListView. Is it possible?



  • Now I'm trying with the following .qml but it doesn't works as expected:
    @
    import QtQuick 1.1
    import Qt 4.7

    Rectangle
    {
    width: 400; height: 400

    Component
    {
        id: riepilogo_delegate
        Rectangle
        {
            id: item
            width: lista_riepilogo.width
            height: 100
    
            Column
            {
                anchors.fill: parent
                Text
                {
                    text: descrizione_estesa
                    anchors.horizontalCenter: parent.horizontalCenter
                }
                Text
                {
                    id: valore_dato
                    text: valore
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }
        }
    }
    
    ListModel
    {
        id: lista_pagine_model
    
        ListElement
        {
            name: "Riepilogo"
        }
    
        ListElement
        {
            name: "Dettaglio"
        }
    }
    
    Component
    {
        id: lista_pagine_delegate
        ListView
        {
            id: lista_riepilogo
            anchors.fill: parent
            model: riepilogoSatelliteModel
            delegate: riepilogo_delegate
            flickableDirection: Flickable.VerticalFlick
            orientation: ListView.Vertical
        }
    }
    
    ListView
    {
        id: lista_principale
        boundsBehavior: Flickable.DragAndOvershootBounds
        anchors.fill: parent
        model: lista_pagine_model
        delegate: lista_pagine_delegate
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
        highlightRangeMode: ListView.StrictlyEnforceRange
    }
    

    }

    @

    What I expected is two identical lists (one on the right of the other) while I get two identical lists, one over the other.



  • I have a simplified example that has the same problem:
    @
    import QtQuick 1.1
    import Qt 4.7

    Rectangle
    {
    // color: "lightblue"
    width: 400; height: 400

    ListModel
    {
        id: lista_interna_model
    
        ListElement
        {
            name: "a1"
        }
    
        ListElement
        {
            name: "a2"
        }
        ListElement
        {
            name: "a3"
        }
        ListElement
        {
            name: "a4"
        }
        ListElement
        {
            name: "a5"
        }
        ListElement
        {
            name: "a6"
        }
        ListElement
        {
            name: "a7"
        }
        ListElement
        {
            name: "a8"
        }
        ListElement
        {
            name: "a9"
        }
    }
    
    Component
    {
        id: lista_interna_delegate
        Item {
            id: lista_interna_item
            Text {
                id: testo_interno
                color: "blue"
                text: qsTr("testo interno " + name)
            }
        }
     
    }
    
    ListModel
    {
        id: lista_pagine_model
    
        ListElement
        {
            name: "Riepilogo"
        }
    
        ListElement
        {
            name: "Dettaglio"
        }
        ListElement
        {
            name: "Riepilogo"
        }
        ListElement
        {
            name: "Riepilogo"
        }
        ListElement
        {
            name: "Riepilogo"
        }
        ListElement
        {
            name: "Riepilogo"
        }
        ListElement
        {
            name: "Riepilogo"
        }
        ListElement
        {
            name: "Riepilogo"
        }
        ListElement
        {
            name: "Riepilogo"
        }
    }
    
    Component
    {
        id: lista_pagine_delegate
        Item {
            id: lista_pagine_item
            width: ListView.view.width
            height: ListView.view.height
    
            ListView
            {
                //anchors.fill: parent
                id: lista_interna
                model: lista_interna_model
                delegate: lista_interna_delegate
                orientation: ListView.Vertical
                boundsBehavior: Flickable.DragAndOvershootBounds
                flickableDirection: Flickable.VerticalFlick
            }
        }
    
    }
    
    ListView
    {
        id: lista_principale
        //boundsBehavior: Flickable.DragAndOvershootBounds
        anchors.fill: parent
        model: lista_pagine_model
        delegate: lista_pagine_delegate
        //model: lista_interna_model
        //delegate: lista_interna_delegate
        orientation: ListView.Horizontal
        //flickableDirection: Flickable.HorizontalAndVerticalFlick
        flickableDirection: Flickable.HorizontalFlick
        //snapMode: ListView.SnapOneItem
        //highlightRangeMode: ListView.StrictlyEnforceRange
    }
    

    }

    @



  • So is it impossible to solve...?



  • Hi,

    Here's one example of nesting ListViews. Is this the type of thing you are after?

    @
    import QtQuick 1.0

    Rectangle {
    width: 400; height: 600
    ListView {
    anchors.fill: parent
    model: 2
    orientation: ListView.Horizontal
    delegate: ListView {
    width: ListView.view.width
    height: ListView.view.height
    model: 30
    delegate: Rectangle {
    width: parent.width -5
    height: 50
    color: index % 2 ? "lightsteelblue" : "steelblue"
    }
    }
    }
    }
    @

    Regards,
    Michael



  • [quote author="mbrasser" date="1319495622"]Hi,

    Here's one example of nesting ListViews. Is this the type of thing you are after?
    [/quote]

    Yes, it works as I want.
    Now I try to undertand where I wrong...

    Thanks.



  • Now I'm using the following QML file:
    @
    import QtQuick 1.0

    Rectangle {

    property int index: lista_principale.currentIndex
    
    width: 400; height: 600
    
    ListView {
        id: lista_principale
        anchors.fill: parent
        model: mappaModel.numeroSatelliti
        orientation: ListView.Horizontal
        delegate: pagine_delegate
        snapMode: ListView.SnapToItem
    }
    
    Component {
        id: pagine_delegate
    
        ListView {
            width: ListView.view.width
            height: ListView.view.height
            model: mappaModel.modelAttuale
            delegate: riepilogo_delegate
        }
    }
    
    Component {
        id: riepilogo_delegate
        Rectangle {
            color: index % 2 ? "lightsteelblue" : "steelblue"
            id: item
            width: parent.width -5
            height: 100
    
            Column
            {
                anchors.fill: parent
                Text
                {
                    text: descrizione_estesa
                    anchors.horizontalCenter: parent.horizontalCenter
                }
                Text
                {
                    id: valore_dato
                    text: valore
                    anchors.horizontalCenter: parent.horizontalCenter
                }
                Text
                {
                    id: data_ora
                    text: "(" + data_ora_satellite + ")"
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }
        }
    }
    

    }

    @

    and my MappaModel object is:
    @
    #include "mappamodel.h"

    #include <QDebug>

    MappaModel::MappaModel(QObject *parent) :
    QObject(parent)
    {
    m_indexAttuale = 0;
    }

    void MappaModel::caricaMappa(QMap<int, RoleItemModel *> mappa_model)
    {
    m_mappaModel = mappa_model;
    }

    //RoleItemModel* MappaModel::recuperaModel(int chiave)
    RoleItemModel* MappaModel::modelAttuale()
    {
    //qDebug() << m_chiaveAttuale;
    //qDebug() << m_mappaModel.value(m_chiaveAttuale);
    RoleItemModel *model_attuale;
    model_attuale = m_mappaModel.value(m_mappaModel.keys().at(m_indexAttuale));
    m_indexAttuale++ ;

    return model_attuale;
    

    }

    void MappaModel::impostaModel(RoleItemModel *)
    {

    }

    void MappaModel::impostaChiaveAttuale(int chiave)
    {
    m_chiaveAttuale = chiave;
    }

    int MappaModel::chiaveAttuale()
    {
    return m_chiaveAttuale;
    }

    QList<RoleItemModel *> MappaModel::listaModel()
    {
    return m_mappaModel.values();
    }

    int MappaModel::numeroSatelliti()
    {
    return m_mappaModel.size();
    }

    @

    It works while I flick right to the end of the external lisview but this function isn't correct:
    @
    RoleItemModel* MappaModel::modelAttuale()
    {
    //qDebug() << m_chiaveAttuale;
    //qDebug() << m_mappaModel.value(m_chiaveAttuale);
    RoleItemModel *model_attuale;
    model_attuale = m_mappaModel.value(m_mappaModel.keys().at(m_indexAttuale));
    m_indexAttuale++ ;

    return model_attuale;
    

    }
    @

    because I need to know the flick direction and increment or decrement m_indexAttuale but I don't know how to do this...


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.