功能说明：

  • 简单列表展示
  • 键盘上下移动高亮
  • 鼠标点击一项高亮显示

代码展示

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

   ListModel {
        id: listModel1
        ListElement {
            txtName: "aaaa"
        }

    }

    Component {
        id: delegate_list1
            Rectangle {

                id: delegate_list_rct1
                height: 35
                width: ListView.view.width

                color: ListView.isCurrentItem?"#157efb":"#FFFFFF" //选中颜色设置
                Text {
                    x: 5
                    y: 5
                    text: "name:" + txtName
                    color: ListView.isCurrentItem ? "#FFFFFF" : "#000000" //选中颜色设置
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked:  {
                        console.log("a");
                        listView1.currentIndex = index

                    }

                }
            }
    }

    Component.onCompleted: {
        // 动态生成 listmodel
        for ( var i = 0; i < 100; i++ ) {
            listModel1.append({"txtName": "text_" + i});
        }
    }

    Component{   //高亮条
        id: highlight1
        Rectangle {
            width: 180; height: 40
            color: "lightsteelblue"; radius: 0
            y: listView1.currentItem.y
            Behavior on y {
                // 弹簧动画
                SpringAnimation {
                    spring: 10
                    damping: 0.35
                }
            }
        }
    }

    ListView {
        id: listView1
        anchors.fill: parent
        model: listModel1
        delegate: delegate_list1
        highlight: highlight1 // 高亮设置
        highlightFollowsCurrentItem: true
        focus: true // 获取焦点

    }
}