ListView ngang bên dọc listview trong QML

Question

Tôi muốn làm một ListView ngang hoạt động như một đại biểu cho một ListView veritcal, tôi đã viết đoạn mã sau:

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

Các listview cuộn dọc cũng nhưng một trong những ngang không cuộn. Bất kỳ trợ giúp nào? Cảm ơn

Answer 1

Tôi đã thử nó một lần và nó không hoạt động, danh sách bên ngoài xử lý tất cả các sự kiện. Giải pháp là để có một Flickable bổ sung cho ListViews và neo contentX của ngang và contentY của danh sách theo chiều dọc thành contentX và contentY của Flickable.

Một số mã bán hoàn chỉnh để hiển thị các nguyên tắc:

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

tôi đã cố gắng giải pháp này trên mô phỏng và nó làm việc.

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

Bạn có MouseArea trong chế độ xem danh sách theo chiều dọc của bạn sẽ đánh cắp tất cả sự kiện vào ListView nằm ngang của bạn. Thực hành tốt nhất trong QML là bao gồm tất cả các thành phần MouseArea bên trong đại biểu.

Ngoài ra, thay vì sử dụng phương thức indexAt(mouseX,mouseY), hãy sử dụng thuộc tính index có sẵn cho tất cả các đại biểu.

Nhằm tuyên truyền các sự kiện chuột ra khỏi danh sách đại biểu của MouseArea để List2 đại biểu của MouseArea, sử dụng 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

Bạn có thể sử dụng z tài sản để lập danh sách bên ngoài xử lý sự kiện chuột đầu tiên.

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

Hoặc thậm chí tốt hơn:

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

Không khá chắc chắn đây là một cách đáng tin cậy và phù hợp mặc dù.