QML의 ListModel과 ListView

QML에서 ListModel과 ListView는 데이터와 사용자 인터페이스를 연결하는 데 사용되는 중요한 요소입니다. ListModel은 데이터를 정의하는 역할을 하고, ListView는 그 데이터를 화면에 표시하는 역할을 합니다. 이를 통해 리스트 형태의 데이터를 쉽게 시각화할 수 있습니다.

 

 

 

 

 ListModel - 데이터 모델 정의

ListModel은 QML에서 리스트 형태의 데이터를 정의하기 위한 모델 요소입니다. 각 항목은 ListElement로 구성되어 있으며, 여러 속성을 가질 수 있습니다.

기본 문법

ListModel {
    ListElement {
        name: "Alice"
        age: 25
    }
    ListElement {
        name: "Bob"
        age: 30
    }
    ListElement {
        name: "Charlie"
        age: 22
    }
}

설명

• ListModel은 여러 개의 ListElement를 포함하며, 각각이 아이템 하나를 나타냅니다.
• ListElement 내부의 속성들은 ListView에서 바인딩을 통해 화면에 표시될 수 있습니다. 예를 들어, 이름(name)과 나이(age) 같은 속성을 정의할 수 있습니다.

 

 

 

 ListView - 모델 데이터 표시

ListView는 ListModel과 같은 데이터 모델을 사용하여 리스트 형태의 UI를 표시하는 역할을 합니다. 이를 통해 수직 또는 수평 방향으로 스크롤 가능한 리스트를 구현할 수 있습니다.

기본 문법

ListView {
    width: 200
    height: 300

    model: ListModel {
        ListElement {
            name: "Alice"
            age: 25
        }
        ListElement {
            name: "Bob"
            age: 30
        }
        ListElement {
            name: "Charlie"
            age: 22
        }
    }

    delegate: Rectangle {
        width: 180
        height: 50
        border.color: "black"
        Row {
            spacing: 10
            Text { text: name }
            Text { text: age.toString() }
        }
    }
}

설명

• model 속성: ListView의 데이터 모델을 정의합니다. 여기서 ListModel을 직접 작성하여 데이터를 제공합니다.
• delegate 속성: 리스트의 각 아이템을 어떻게 시각적으로 표시할지 정의합니다. delegate는 데이터의 각 항목을 시각화하는 UI 구성 요소로 사용됩니다.
  • 예를 들어, 각 항목을 Rectangle로 표현하고, 내부에 이름과 나이를 표시하는 Text 요소를 사용하였습니다.
• 아이템 레이아웃: Row를 사용하여 이름과 나이를 가로로 나란히 표시합니다.

 

 

 

 ListView의 주요 속성 및 기능

1. model: ListView에서 사용될 데이터 모델을 지정합니다. 일반적으로 ListModel을 사용하지만, JavaScript 배열 또는 C++에서 제공하는 모델을 사용할 수도 있습니다.
2. delegate: 리스트 항목을 어떻게 표현할지 정의하는 역할을 합니다. 각 데이터 항목을 기반으로 UI를 구성하는 컴포넌트를 설정합니다.
3. orientation: 리스트의 방향을 설정합니다. 기본값은 수직이며, ListView.Horizontal로 설정하여 수평 리스트로 만들 수 있습니다.
4. spacing: 각 항목 간의 간격을 설정할 수 있습니다.

 

 

 

 ListView와 ListModel의 상호작용 예제

다음은 간단한 ListModel과 ListView를 사용하여 리스트 데이터를 표시하고, 클릭 시 해당 항목의 정보를 표시하는 예제입니다.

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 300
    height: 400

    ListView {
        id: listView
        width: parent.width
        height: parent.height - 50
        model: ListModel {
            ListElement { name: "Alice"; age: 25 }
            ListElement { name: "Bob"; age: 30 }
            ListElement { name: "Charlie"; age: 22 }
        }
        delegate: Rectangle {
            width: listView.width
            height: 50
            border.color: "gray"
            Row {
                spacing: 10
                Text { text: name }
                Text { text: age.toString() }
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Clicked on: " + name + ", Age: " + age)
                }
            }
        }
    }
}

설명

• ListView는 화면에 리스트 형태로 데이터를 표시합니다.
• MouseArea를 추가하여 각 항목을 클릭할 수 있도록 하였고, 클릭 시 로그 출력(console.log())을 통해 해당 항목의 이름과 나이를 출력합니다.

 

 

 

 동적 ListModel 관리

ListModel은 자바스크립트를 통해 동적으로 데이터 추가/삭제가 가능합니다. 다음은 동적으로 아이템을 추가하는 예제입니다.

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 300
    height: 400

    ListView {
        id: listView
        width: parent.width
        height: parent.height - 100
        model: listModel
        delegate: Rectangle {
            width: listView.width
            height: 50
            border.color: "gray"
            Row {
                spacing: 10
                Text { text: name }
                Text { text: age.toString() }
            }
        }
    }

    ListModel {
        id: listModel
        ListElement { name: "Alice"; age: 25 }
        ListElement { name: "Bob"; age: 30 }
    }

    Button {
        text: "Add Item"
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {
            listModel.append({ name: "NewPerson", age: Math.floor(Math.random() * 50) + 20 });
        }
    }
}

설명

• listModel을 정의하고, 이를 ListView의 모델로 사용합니다.
• Button을 통해 새로운 항목을 추가하는 기능을 구현했습니다.
• listModel.append()를 사용하여 새로운 요소를 동적으로 추가합니다.

 

 

 

 요약

• ListModel은 리스트 형태의 데이터를 QML에서 정의하는 데 사용됩니다.
• ListView는 ListModel 또는 다른 모델을 사용하여 리스트 UI를 표시하는 데 사용됩니다.
• delegate는 각 데이터 항목을 어떻게 시각화할지 정의하는 역할을 합니다.
• 클릭 이벤트 처리와 같은 사용자와의 상호작용은 MouseArea를 통해 쉽게 구현할 수 있습니다.
• 데이터 동적 관리: ListModel을 자바스크립트로 관리하여 항목을 동적으로 추가/삭제할 수 있습니다.

 

ListModel과 ListView를 잘 활용하면, 리스트 데이터를 간단하고 직관적으로 표시할 수 있고, 사용자가 쉽게 상호작용할 수 있는 동적인 사용자 인터페이스를 만들 수 있습니다.

 

 

---

 

 

개인적으로 학습하면서 정리한 내용입니다.
잘못된 내용이 있을 경우 알려주시면 확인 후 수정 및 반영하도록 하겠습니다.

오늘도 감사합니다.(__)