QML ListView列表

import QtQuick 2.0
import QtQuick.Controls 1.4
import io.qt.DataBaseModel 1.0
import QtQuick.Controls.Styles 1.4
Rectangle {
    id:root

    property real sqlClawLeftRight: 0.0
    property real sqlClawOpenClose: 5.8
    property real sqlWristClawRota: 0.0
    property real sqlUpperArmRota: 0.0
    property real sqlLowerArmRota: 0.0
    property real sqlTurretRota: 0.0
    property var currentRow: 0
    property var id: 0

    signal itemClicked()

    ListView {
        id : m_listView
        orientation: Qt.Horizontal
        anchors.fill: parent
        anchors.margins: 10
        clip: true
        model: modelItems//数据库model.继承自QSqlTableModel
        delegate: numberDelegate
        spacing: 5
        focus: true
    }
    Component.onCompleted:{
        var bb = modelItems.sqlData(0)
        sqlClawLeftRight = bb[2]
        sqlClawOpenClose = bb[3]
        sqlWristClawRota = bb[4]
        sqlUpperArmRota = bb[5]
        sqlLowerArmRota = -bb[6]
        sqlTurretRota = bb[7]
    }

    Component {
        id: numberDelegate

        Rectangle {
            width: 200
            height: 125
            border.width: 1
            border.color: ListView.isCurrentItem?"#53d769":"#a3a8c7" //选中颜色设置
            //border.color: ListView.isCurrentItem?"#a3a8c7":"#53d769" //选中颜色设置
            color: "#a3a8c7"
            //border.color: Qt.lighter(color, 1.1)
            Image{
                id:image
                anchors.fill: parent
                anchors.margins: 1
                source: getImageName(index)
            }

            Text {
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 10
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: 10
                text:index+1
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    itemClicked()
                    backend.sendTcpData()
                    m_listView.currentIndex = index  //实现item切换
                    var bb = modelItems.sqlData(index)
                    currentRow = index
                    id = bb[0]
                    sqlClawLeftRight = bb[2]
                    sqlClawOpenClose = bb[3]
                    sqlWristClawRota = bb[4]
                    sqlUpperArmRota = bb[5]
                    sqlLowerArmRota = -bb[6]
                    sqlTurretRota = bb[7]
                }
                onDoubleClicked: {
                    backend.sendTcpData()
                    var bb = modelItems.sqlData(index)
                    currentRow = index
                    backend.bUseNetData = true
                    //                  塔台     下臂   上臂  腕部  爪旋转  爪张合
                    backend.excuteCommand(bb[7],bb[6],bb[5],bb[4],bb[2],bb[3]-5.8)
                    console.log("发送预设姿态数据")
                }
            }
        }
    }
    function getImageName(index){
         //modelItems.select();
        var bb = modelItems.sqlData(index)
        var name = screenShot.imageFileName()+bb[1]+".jpg"
        return name
    }



}