如何将“全局”组件添加到 ListView qml 中？

Question

上下文：我正在尝试创建典型视频编辑器的布局。现在，我使用 ListView 作为用户编辑视频剪辑的时间线。

ListView 是行列表。

我想要实现的是：我想点击ListView上的任意位置，并将光标放在该位置上。当我在 ListView 上水平滚动时，我希望光标保持不动，直到再次单击 ListView。

我尝试过的：

  ListView {
    id: timeline
    width: main.contentWidth
      anchors.fill         : parent
      ScrollBar.vertical   : ScrollBar {}
      ScrollBar.horizontal : ScrollBar {}
      flickableDirection   : Flickable.HorizontalAndVerticalFlick
      boundsBehavior       : Flickable.StopAtBounds
      contentWidth         : main.contentWidth
      model                : VideoList{}
      delegate             : VideoLayer{}
}

VideoLayer {
    id : layer

    Rectangle {
        width           : 10000
        height          : 100
        color           : main.bgColor
        border.color    : "black"
        border.width    : 2

        MouseArea{
            anchors.fill    : parent
            onPressed       :
              (mouse) =>{
                           cursor.x      = mouseX
                           console.log(mouse.x)
                       }
        }
        Rectangle{
          id     : cursor
          x      : 0
          height : parent.height
          width  : 10
          color  : "white"
        }
}

这样做的问题是，为每个视频层定义了一个光标。单击 ListView 仅更新该层的光标位置。我希望光标在某种意义上是“全局”的，光标应该在每一层上同步。

Answer 1

我愿意：

• 定义外部 Flickable 并在其中容纳所有时间线
• 为感兴趣的位置声明一个全局属性

Page {
    property int pos: 50
    Fliclable {
        ColumnLayout {
            ListView { id: timeline1 }
            ListView { id: timeline2 }
            ListView { id: timeline3 }
        }
    }
    Rectangle {
        x: pos - flickable.contentX
        y: 0
        width: 1
        height: flickable.height
    }
}

对于更新位置，每个ListView都可以重写默认的TapHandler，如下：

ListView {
    TapHandler {
        onTapped: pos = eventPoint.position.x
    }
}

这是一个模拟示例：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    background: Rectangle { color: "#848895" }
    title: "Video Timelines"
    property int pos: 50
    Flickable {
        id: flickable
        width: parent.width
        height: columnLayout.height
        contentWidth: columnLayout.width
        contentHeight: columnLayout.height
        ColumnLayout {
            id: columnLayout
            width: 2000
            ListView {
                id: timeline1
                Layout.fillWidth: true
                Layout.preferredHeight: 150
                orientation: ListView.Horizontal
                model: [0,1,2,3,4,5,6,7,8,9]
                delegate: TimelineDelegate { }
                TapHandler {
                    onTapped: pos = eventPoint.position.x
                }
            }
            ListView {
                id: timeline2
                Layout.fillWidth: true
                Layout.preferredHeight: 150
                orientation: ListView.Horizontal
                model: [9,8,7,6,5,4,3,2,1,0]
                delegate: TimelineDelegate { }
                TapHandler {
                    onTapped: pos = eventPoint.position.x
                }
            }
            ListView {
                id: timeline3
                Layout.fillWidth: true
                Layout.preferredHeight: 150
                orientation: ListView.Horizontal
                model: [0,1,2,3,4,5,4,3,2,1]
                delegate: TimelineDelegate { }
                TapHandler {
                    onTapped: pos = eventPoint.position.x
                }
            }
        }
    }
    Rectangle {
        x: pos - flickable.contentX
        y: 0
        width: 3
        height: 500
        color: "red"
        border.color: "yellow"
    }
}

// TimelineDelegate.qml
import QtQuick
import QtQuick.Controls
Rectangle {
    width: 200
    height: 150
    border.color: "black"
    color: "gray"
    Rectangle {
        anchors.bottom: parent.bottom
        width: parent.width - 2
        height: parent.height * modelData / 10
        x: 1
        y: parent.height - height - 1
        color: "green"
        border.color: "yellow"
        
    }
}

您可以在线尝试！