垂直列表視圖中的ListView水平在QML

Question

我想打一個水平的ListView工作作爲另一個veritcal的ListView的委託，我已經寫了下面的代碼：

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) 
      } 
     } 
    } 
} 

垂直列表視圖滾動良好，但水平線在不滾動。 有什麼幫助嗎？ 謝謝

Answer 1

我試了一次，它沒有工作，外部列表處理所有事件。解決方案是除了ListView之外還有一個Flickable，並將垂直列表的horizo​​ntalX和contentY的contentX固定到Flickable的contentX和contentY。

一些半完成的代碼以顯示原理：

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

我試圖在模擬器上該解決方案，它的工作。

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

在垂直列表視圖中有一個MouseArea，它將所有事件都竊取到水平ListView中。 QML中的最佳做法是將所有MouseArea組件包含在委託中。

而且，而是採用indexAt(mouseX,mouseY)方法，利用現有的所有代表的index財產。

爲了傳播完成從列表委託的MouseArea鼠標事件列表2委託的MouseArea，用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

可以使用z屬性使外部列表第一處理鼠標事件。

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

甚至更​​好：

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

不太清楚這是雖然可靠和適當的方式。