如何在QML的ListView项间显示可切换位置的光标/图像？

核心逻辑 #

别把光标塞到列表项的delegate里，单独把光标（比如Rectangle或自定义图）放在ListView的上层，通过计算列表项的位置来定位，就能精准卡在项与项的间隙，还能跟着选中/切换操作移动。

具体实现步骤 #

• 布局结构：用Item当容器，里面放ListView和光标组件。给光标设z:1，确保它在列表项上面不被遮挡。
• 位置计算：
  监听ListView的currentIndex变化，拿当前项的位置来算光标坐标：

  // 光标id: cursor，ListView id: listView
  // 把光标放在当前项的底部（和下一项的间隙）
  cursor.y = listView.contentItem.children[currentIndex].y + listView.contentItem.children[currentIndex].height
  // 要放当前项顶部的话直接取y值就行
  

  边界情况处理：比如currentIndex=0时，光标放在第一项顶部；currentIndex是最后一项时，放在最后一项底部。
• 平滑移动：给光标加个动画，切换时不生硬：

  PropertyAnimation on y {
      duration: 200
      easing.type: Easing.InOutQuad
  }
  

• 交互逻辑：
  用键盘上下键切换的话，直接监听ListView的按键事件：

  Keys.onUpPressed: if (currentIndex > 0) currentIndex--
  Keys.onDownPressed: if (currentIndex < count - 1) currentIndex++
  

  要支持鼠标点击间隙切换的话，计算点击位置对应的列表项索引，更新currentIndex就行。
• 适配动态项：如果列表项高度不固定，每次都要实时取对应项的height，别用固定值；还要监听listView.count变化，避免索引越界。

极简示例代码 #

Item {
    width: 300
    height: 400

    ListView {
        id: listView
        anchors.fill: parent
        model: 5
        delegate: Rectangle {
            width: parent.width
            height: 60
            color: index % 2 ? "#f0f0f0" : "#e0e0e0"
            Text { anchors.centerIn: parent; text: "列表项 " + index }
        }
        focus: true
        Keys.onUpPressed: if (currentIndex > 0) currentIndex--
        Keys.onDownPressed: if (currentIndex < count - 1) currentIndex++
    }

    // 红色光标，放在当前项的顶部
    Rectangle {
        id: cursor
        width: listView.width
        height: 2
        color: "#ff0000"
        z: 1
        y: listView.currentIndex === 0 ? 0 : listView.contentItem.children[listView.currentIndex].y
        PropertyAnimation on y { duration: 200; easing.type: Easing.InOutQuad }
    }
}

内容的提问来源于stack exchange，提问作者r18ul