[C++ QT QML] Listview Item을 다른 곳에 출력하기 currentIndex활용

💡 실행 사진

참고 자료 : https://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html#mouse-and-touch-handling

참고 자료 : https://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html#append-method

 

뷰는 콘텐츠의 드래그 및 플릭을 처리하지만 개별 델리게이트와의 터치 상호 작용은 처리하지 않습니다. 
예를 들어 currentIndex를 설정하기 위해 델리게이트가 터치 입력에 반응하려면 델리게이트가 적절한 터치 처리 로직이있는 MouseArea를 제공해야합니다.
키 입력은 기본적으로 작동하지만 델리게이트에서 마우스 / 터치 이벤트를 명시 적으로 포착 하고 선택한 델리게이트 항목 값에 따라 변경해야 합니다.

💡 예시

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    width: 640
    height: 480
    visible: true

    ListModel {
        id: model
        ListElement {
            name:'abc'
            number:'123'
        }
        ListElement {
            name:'efg'
            number:'456'
        }
        ListElement {
            name:'xyz'
            number:'789'
        }
    }

    ListView {
        id: list
        anchors.fill: parent
        model: model
        delegate: Component {
            Item {
                width: parent.width
                height: 40
                Column {
                    Text { text: 'Name:' + name }
                    Text { text: 'Number:' + number }
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: list.currentIndex = index
                }
            }
        }
        highlight: Rectangle {
            color: 'grey'
            Text {
                anchors.centerIn: parent
                text: 'Hello ' + model.get(list.currentIndex).name
                color: 'white'
            }
        }
        focus: true
        onCurrentItemChanged: console.log(model.get(list.currentIndex).name + ' selected')
    }

• 간단한 목록과 모델을 만듭니다.
• 위 내용을 사용하여 MouseArea설정 업데이트 할 수있는 항목을 위임 내에서 항목을 list.currentIndex = index선택한 항목에 대해 설정
• onCurrentItemChanged이벤트를 수신 ListView하여 현재 모델 항목 값에 액세스하는 방법을 보여줍니다.
• 현재 선택한 항목의 텍스트 값을 강조 표시 항목에 바인딩하여 다른 곳에서 현재 선택한 값을 사용하여 표시합니다.