qml中垂直Listview内的水平listView

4 回答

• 0

  我尝试了一次它没有用，外部列表处理所有事件 . 解决方案是在ListViews之外还有一个Flickable，并将垂直列表的水平和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
      }
  
  }
  

  回复于 2024-04-17T05:34:31+08:00
• 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");
                      }
                  }
              }
          }
      }
  }
  

  回复于 2024-04-17T05:34:31+08:00
• 3

  您的垂直列表视图中有 MouseArea ，它会将所有事件窃取到您的水平ListView . QML中的最佳实践是在委托中包含所有 MouseArea 组件 .

  此外，不使用 indexAt(mouseX,mouseY) 方法，而是使用可用于所有代理的 index 属性 .

  为了将列表委托的 MouseArea 中的鼠标事件传播到list2委托的 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
      }
  }
  

  回复于 2024-04-17T05:34:31+08:00
• 6

  您可以使用 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        
      }
  }
  

  不太确定这是一种可靠和正确的方法 .

  回复于 2024-04-17T05:34:31+08:00