Listview Horizontal Vertical dentro Listview en QML

Question

Quiero hacer una Listview horizontal funciona como un delegado de otro Listview veritcal, he escrito el siguiente código:

import Qt 4.7 

Item { 
    id:main 
    width: 360 
    height: 640 

    Component{ 
     id:myDelegate 
      ListView{ 
       id:list2 
       spacing: 5 
       width:list.width 
       height:list.height/3 
       interactive: true 
       orientation: ListView.Horizontal 
       model: ListModel { 
        ListElement { 
         name: "Bill Smith" 
         number: "555 3264" 
        } 
        ListElement { 
         name: "John Brown" 
         number: "555 8426" 
        } 
        ListElement { 
         name: "Sam Wise" 
         number: "555 0473" 
        } 

        ListElement { 
         name: "Sam Wise" 
         number: "555 0473" 
        } 

        ListElement { 
         name: "Sam Wise" 
         number: "555 0473" 
        } 
       } 
       delegate: Text{text:name 
       width: main.width/3} 

       focus: true 
       MouseArea { 
        anchors.fill: parent 
        onClicked: { 
         ListView.list2.currentIndex = ListView.list2.indexAt(mouseX, mouseY) 
        } 
       } 

      } 
    } 

    ListView { 
     id: list 
     clip: true 
     spacing: 5 
     anchors.fill: parent 
     orientation: ListView.Vertical 
     model: Model{} 
     delegate:myDelegate 

//  highlight: Rectangle { 
//   width: list.currentItem.width 
//   color: "lightsteelblue" 
//   radius: 5 
//  } 
     focus: true 
     MouseArea { 
      anchors.fill: parent 
      onClicked: { 
       list.currentIndex = list.indexAt(mouseX, mouseY) 
      } 
     } 
    } 
} 

El desplazamiento vertical de vista de lista bien pero el horizontal no se desplaza ¿Alguna ayuda? Gracias

Answer 1

probé una vez y no funcionó, la lista externa se encarga de todos los eventos. La solución era tener un flickable adicionalmente a las listviews y anclar el contentX de la horizontal y contentY de las listas verticales a contentX y contentY de la flickable.

Parte del código semi completa para mostrar el principio:

Item { 

    ListView { 

     anchors.fill: parent 
     clip: true 
     orientation: ListView.Vertical 
     interactive: false 
     contentY: listController.contentY 
     delegate: ListView { 
      orientation: ListView.Horizontal 
      interactive: false 
      contentX: listController.contentX 
     } 

    } 

    Flickable { 
     id: listController 
     anchors.fill: parent 
     contentHeight: vert.contentHeight 
     contentWidth: horizontalElement.width 
    } 

} 

Answer 2

Probé esta solución en el simulador y funcionó.

import QtQuick 1.1 
import com.nokia.symbian 1.1 

Page { 
    id: mainPage 
    anchors.fill: parent 


    ListModel { 
     id: colorsModel 
     ListElement { 
      colorCode: "red" 
     } 
     ListElement { 
      colorCode: "green" 
     } 
     ListElement { 
      colorCode: "blue" 
     } 
     ListElement { 
      colorCode: "orange" 
     } 
     ListElement { 
      colorCode: "white" 
     } 
     ListElement { 
      colorCode: "purple" 
     } 
     ListElement { 
      colorCode: "gray" 
     } 
     ListElement { 
      colorCode: "yellow" 
     } 
     ListElement { 
      colorCode: "purple" 
     } 
    } 

    ListView { 
     anchors.fill: parent 
     model: 30 
     spacing: 20 
     cacheBuffer: 200 // in pixels 

     delegate: 
      ListView { 
      width: parent.width; 
      height: 50; 

      spacing: 20 
      model: colorsModel 
      orientation: ListView.Horizontal 
      delegate: 
       Rectangle { 
       color: colorCode 
       width: 50 
       height: 50 

       MouseArea { 
        anchors.fill: parent 
        onClicked: { 
         console.log(colorCode + " clicked"); 
        } 
       } 
      } 
     } 
    } 
} 

Answer 3

Usted tiene un MouseArea en su vista de lista vertical que roba todos los eventos a su ListView horizontal. Las mejores prácticas en QML es incluir todos los componentes dentro de la MouseArea delegado.

Además, en lugar de usar el método indexAt(mouseX,mouseY), use la propiedad index disponible para todos los delegados.

Con el fin de propagar el evento del ratón en lista de delegados de MouseArea a Lista2 de MouseArea delegado, utilice mouse.accepted = false

Item { 
    id:main 
    width: 360 
    height: 640 

    Component{ 
     id:myDelegate 
      ListView{ 
       id:list2 
       spacing: 5 
       width:list.width 
       height:list.height/3 
       interactive: true 
       orientation: ListView.Horizontal 
       model: ListModel { 
        ListElement { 
         name: "Bill Smith" 
         number: "555 3264" 
        } 
        ListElement { 
         name: "John Brown" 
         number: "555 8426" 
        } 
        ListElement { 
         name: "Sam Wise" 
         number: "555 0473" 
        } 

        ListElement { 
         name: "Sam Wise" 
         number: "555 0473" 
        } 

        ListElement { 
         name: "Sam Wise" 
         number: "555 0473" 
        } 
       } 
       delegate: Text { 
       text:name 
       width: main.width/3} 

       focus: true 
       MouseArea { 
        anchors.fill: parent 
        onClicked: { 
         list2.currentIndex = index; 
        } 
       } 

       } 

     MouseArea { 
      anchors.fill: parent 
      onClicked: { 
       list2.ListView.view.currentIndex = index; 
       mouse.accepted = false; 
      } 
     } 
    } 

    ListView { 
     id: list 
     clip: true 
     spacing: 5 
     anchors.fill: parent 
     orientation: ListView.Vertical 
     model: Model{} 
     delegate:myDelegate 
     focus: true 
    } 
} 

Answer 4

Puede utilizar z propiedad para hacer listas externas manejar los eventos del ratón en primer lugar.

ListView { 
    z: 100 // put whatever you want or need 
    delegate: ListView { 
     z: 1000 // put whatever is above 100 
    } 
} 

O aún mejor:

ListView { 
    delegate: ListView { 
     z: parent.z + 1   
    } 
} 

No del todo seguro de que esta es una manera fiable y adecuada sin embargo.