빈 ListModel 생성 후 데이터 추가

QML에서 빈 ListModel을 생성한 후 버튼 클릭 시 데이터를 동적으로 추가하려면, ListModel과 append() 메서드를 활용하면 됩니다. 아래는 이러한 기능을 구현한 예제와 설명입니다.

 

 

 

 빈 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 정의
    ListModel {
        id: listModel
    }

    // 버튼 클릭 시 항목 추가
    Button {
        text: "Add Item"
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {
            // ListModel에 새로운 항목 추가
            listModel.append({ name: "NewPerson", age: Math.floor(Math.random() * 50) + 20 });
        }
    }
}

설명

1. 빈 ListModel 정의:
   • ListModel { id: listModel }: ListModel을 정의했지만, 초기 데이터는 없음으로 빈 모델을 생성합니다.
2. ListView 설정:
   • model: listModel: ListView는 빈 ListModel을 모델로 사용합니다.
   • delegate: 각 항목을 Rectangle로 표현하며, name과 age 속성을 표시하는 Text 요소를 사용합니다.
3. 버튼을 통한 항목 추가:
   • Button을 사용하여 클릭 시 새로운 데이터 항목을 추가하도록 설정합니다.
   • listModel.append(): append() 메서드는 ListModel에 새로운 ListElement를 추가하는 메서드입니다. 여기서는 "NewPerson"이라는 이름과 랜덤한 나이(20에서 69 사이)를 생성하여 추가합니다.
4. append() 메서드:
   • listModel.append({ name: "NewPerson", age: 25 })와 같은 형태로 객체 형식으로 데이터를 추가할 수 있습니다.
   • 추가된 항목은 ListView에 자동으로 반영되어, 사용자는 즉시 UI에서 변경 사항을 확인할 수 있습니다.

 

 

 

 결과

• 애플리케이션 실행 시, ListView는 비어 있는 상태로 시작됩니다.
• 사용자가 "Add Item" 버튼을 클릭할 때마다 새로운 항목이 ListModel에 추가되고, ListView가 업데이트됩니다.
• 이렇게 하면 사용자가 필요할 때마다 새로운 데이터를 동적으로 추가할 수 있습니다.

 

 

 

 중요한 개념

• append() 메서드: ListModel에 새로운 항목을 추가하는 메서드로, 객체 형태로 데이터를 전달해야 합니다. 추가된 데이터는 ListElement의 속성 형태로 정의되며, delegate에서 바인딩하여 UI에 표시됩니다.
• 빈 ListModel의 초기화: ListModel을 비어 있는 상태로 정의한 후, 버튼 클릭 등의 이벤트에 따라 데이터를 추가하는 방식은 동적인 리스트 관리에 매우 유용합니다.

 

 

 

 추가적으로 생각해볼 기능

• 데이터 제거: 항목을 제거하고 싶다면 remove(index) 메서드를 사용할 수 있습니다. 예를 들어, 특정 인덱스를 지정하여 listModel.remove(0)으로 첫 번째 항목을 제거할 수 있습니다.
• 데이터 수정: ListModel의 특정 항목을 수정하려면 setProperty(index, propertyName, value) 메서드를 사용할 수 있습니다. 예를 들어, 첫 번째 항목의 name을 수정하려면 listModel.setProperty(0, "name", "UpdatedName")을 사용할 수 있습니다.
• 사용자 입력 기반 데이터 추가: 사용자가 입력한 이름과 나이를 받아 동적으로 항목을 추가하도록 하려면 TextField 등을 이용하여 데이터를 입력받을 수 있습니다.

 

위와 같은 방식으로 ListModel과 ListView를 잘 활용하면, 동적이고 유연한 리스트 관리가 가능하며, 사용자의 입력에 따라 UI를 실시간으로 업데이트하는 기능을 쉽게 구현할 수 있습니다.

 

 

---

 

 

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

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