二维表与QML嵌套的滚动区 [英] Two-dimensional table with nested scrolling areas in QML

问题描述

我想创建，在QML，电视时间表，其中纵轴为频道的列表，横轴是基于时间的。例如像

I want to create, in QML, a TV-schedule where the vertical axis is a list of Channels and the horizontal axis is time-based. For example something like

起初，我创建

• 垂直带的ListView
  
  
  
  • 模型=频道列表
  
  
  • 委托=水平的ListView
  
  
  
  
  • 模型=事件的列表
  
  
  • 委托=一个项目，其中宽度是正比于事件
  的持续时间
  

  到目前为止好。唯一的缺点是，水平滚动列表视图一个接一个，而他们应该一起滚动。

  So far so good. Only drawback is that the horizontal ListViews scroll one by one while they should scroll together.

  所以不知何故，每个水平的ListView的contentX属性应该被绑定到移动/轻弹水平的ListView的contentX财产。请注意，此结合是动态的：在第一行中轻弹时，所有其他行应绑定到的第一行的contentX。但这应该在第二行中轻弹时被改变。

  So somehow, the contentX property of every horizontal ListView should be bound to the contentX property of the moving/flicking horizontal ListView. Note that this binding is dynamic: when flicking in the first row, all other rows should bind to the contentX of the first row. But this should be changed when flicking in the second row.

  如何可以做到这一点有什么建议？

  Any advice on how this can be done?

  我试图用

  
  
  • 创建垂直的ListView顶部的Flickable项目（与contentWidth完整的时间窗口）。
  
  
  • 每个水平ListView控件绑定到这个Flickable的contentX（这是一个静态绑定）
  
  

  这导致了很好的同步滚动，但我仍然有一些问题。

  This resulted in nice synchronous scrolling but I still have some issues

  
  
  • 我不得不做一些技巧来确保轻弹只是水平或垂直但不能同时
  
  
  • 我不能再点击具体的事件;我猜事件由Flickable
  拦截
  
  • 我也不能确定这种Flickable的记忆影响了巨大的contentWidth？
  
  

  反馈AP preciated！

  Feedback appreciated!

  推荐答案

  我会说有渠道只有一个垂直列表视图。但是，只有信道名称，而不是实际的方案。相反，对于程序的水平视图，你可以在一个单一的flickable一起塞进他们都使用开始时间和持续时间通过结合其x和width属性，前者布局在flickable的程序。

  I'd say have only one vertical list view for the channels. But the channel names only, not the actual programs. Instead of a horizontal view for the programs, you can cram them all together in a single flickable, using the begin time and duration to layout the programs in the flickable by binding their x and width properties to the former.

  然后你就可以在频道列表视图连同程序项的垂直滚动绑定，让你有对应到相应的频道节目。这种方式可以从两个垂直滚动，只有水平滚动的程序。

  Then you can bind the channel list view together with the vertical scrolling of the program items, so that you have the programs corresponding to their appropriate channels. This way you can scroll vertically from both, and only scroll horizontally the programs.

  下面是一个简单的例子：

  Here is a quick example:

  ApplicationWindow {
      id: main
      width: 500
      height: 100
      visible: true
      color: "white"
  
      ListModel {
          id: modC
          ListElement { name: "Ch1" }
          ListElement { name: "Ch2" }
          ListElement { name: "Ch3" }
      }
  
      ListModel {
          id: modP1
          ListElement { name: "p1"; start: 0; duration: 6 }
          ListElement { name: "p2"; start: 6; duration: 6 }
          ListElement { name: "p3"; start: 12; duration: 6 }
          ListElement { name: "p4"; start: 18; duration: 6 }
      }
      ListModel {
          id: modP2
          ListElement { name: "p1"; start: 0; duration: 12 }
          ListElement { name: "p2"; start: 12; duration: 12 }
      }
      ListModel {
          id: modP3
          ListElement { name: "p1"; start: 0; duration: 8 }
          ListElement { name: "p2"; start: 8; duration: 8 }
          ListElement { name: "p3"; start: 16; duration: 8 }
      }
  
      property var subMod : [ modP1, modP2, modP3 ]
  
      Component {
          id: progDelegate
          Rectangle {
              property var source
              x: source.start * 50
              width: source.duration * 50
              height: 50
              color: "lightblue"
              border.color: "black"
              Text {
                  text: source.name
              }
          }
      }
  
      Row {
          anchors.fill: parent
          ListView {
              id: list
              height: parent.height
              width: 100
              model: modC
  
              delegate: Item {
                  width: 100
                  height: 50
                  Rectangle {
                      anchors.fill: parent
                      color: "red"
                      border.color: "black"
                      Text {
                          anchors.centerIn: parent
                          text: name
                      }
                  }
                  Component.onCompleted: {
                      var mod = subMod[index]
                      for (var i = 0; i < mod.count; ++i) progDelegate.createObject(flick.contentItem, {"source": mod.get(i), "y": index * 50})
                  }
              }
          }
          Flickable {
              id: flick
              height: parent.height
              width: parent.width - list.width
              contentWidth: 1200
              contentHeight: contentItem.childrenRect.height
              clip: true
              flickableDirection: Flickable.HorizontalFlick
              contentY: list.contentY
          }
      }
  }
  

  这篇关于二维表与QML嵌套的滚动区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！