해커를 꿈꾸는 개발자

파이썬 GUI PyQt5(5) - QListView 간단하게 사용하기

리스트에 있는 데이터를 QListVIew를 사용하여, 간단하게 list view를 출력하는 프로그램을 만들어 보겠습니다.

1. QT Designer로 List View 추가하기

리스트를 보여주기 위해 List View 컴포넌트를 추가하고 Object 이름을 listView로 지정하였습니다. 

2. 파이썬 코드로 코드 작성하기

1. numbers라는 리스트를 만들어 데이터를 추가하고,

2. 그 리스트를 list view에 넣기 위해 QStandardItemModel() 클래스로 모델을 생성하였습니다. 

QStandardItemModel() 클래스는 사용자 지정 데이터를 저장하기 위한 일반 모델을 제공하는 클래스입니다. 

3. 생성된 모델에 numbers list의 데이터를 가지고, 각 데이터에 대하여 모델 아이템을 추가하였습니다.

4. 그리고 이렇게 만들어진 모델을 listView의 setModel 함수로 설정하도록 하였습니다.   

(listView는 Qt Designer로 만들었기 때문에 참조할 수 있습니다.)

    def showList(self):
        numbers = ["One", "Two", "Three", "Four"]

        model = QStandardItemModel() # 모델을 생성합니다. 
        for x in numbers: #모델에 numbers의 아이템을 모두 추가합니다. 
            model.appendRow(QStandardItem(x))
        self.ui.listView.setModel(model) # listView에 만들어진 모델을 설정합니다.

3. 전체 코드

import sys
from PyQt5 import QtWidgets
from PyQt5.QtGui import QStandardItemModel
from PyQt5.QtGui import QStandardItem
from PyQt5 import uic

class MyApp(QtWidgets.QDialog):
    def __init__(self, parent = None):
        super().__init__(parent)
        self.ui = uic.loadUi("./file/myapp.ui", self)
        self.ui.show()
        self.showList()

    def showList(self):
        numbers = ["One", "Two", "Three", "Four"]

        model = QStandardItemModel()
        for x in numbers:
            model.appendRow(QStandardItem(x))
        self.ui.listView.setModel(model)


app = QtWidgets.QApplication(sys.argv)
me = MyApp()
sys.exit(app.exec())

QT qml의 listview을 이용하여 간단한 리스트 표시하기 - hightlight 포함

listview component는 리스트에 넣을 데이터(model)와 각 리스트 아이템을 어떻게 표시할지에 대한 델리게이트(Delegate)가 꼭 필요합니다. 또한 mouse 클릭한 것에 따라 focus가 변경되는 것을 구현해 봅시다. 

데이터(model) 정의

model은 ListModel component로 생성합니다. 

각각의 리스트 아이템은 ListElement로 정의하였고,

과일과 가격을 표시하도록 하기 위해, name과 price 변수를 생성해 값을 지정하였습니다. 

    ListModel {
         id:listmodel
         ListElement {
             name: "Apple"
             price: "1000"
         }
         ListElement {
             name: "Banana"
             price: "2000"
         }
         ListElement {
             name: "Grape"
             price: "3000"
         }

         ListElement {
             name: "Peach"
             price: "4000"
         }

         ListElement {
             name: "Lemon"
             price: "5000"
         }
     }

델리게이트(Delegate) 정의

델리게이트(Delegate)는 리스트의 각각의 아이템을 어떻게 표시할지를 다룹니다. 

여기에서는 각 리스트 아이템의 높이는 40으로 넣었고, 과일 이름과 가격을 표시하도록 하였습니다. 

또한, Mouse 클릭을 하면 listView의 현재 아이템이 몇번째인지에 대한 currentIndex 변수에 index를 넣도록 하였습니다.

    Component {
        id:listDelegate
        Item {
            width: parent.width
            height: 40
            Column {
                Text { text: 'Name:' + name }
                Text { text: 'Price:' + price + ' won'}
            }
            MouseArea {
                anchors.fill: parent
                onClicked: list.currentIndex = index
            }
        }
    }

하이라이트(Highlight) 정의

리스트의 아이템에 Focus 처리를 하기 위해, 하이라이트를 정의하였습니다. 

배경은 회색으로 표시하도록 하였고, 마우스로 클릭한 아이템의 과일 이름 문구를 표시하도록 하였습니다.

문구의 색상은 흰색으로 표시하도록 하였습니다.  

    Component{
        id : listhightlight
        Rectangle {

            color: 'grey'
            Text {
                anchors.centerIn: parent
                text: 'Hello ' + listmodel.get(list.currentIndex).name
                color: 'white'
            }
        }
    }

전체코드

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    width: 640
    height: 480
    visible: true

    ListModel {
         id:listmodel
         ListElement {
             name: "Apple"
             price: "1000"
         }
         ListElement {
             name: "Banana"
             price: "2000"
         }
         ListElement {
             name: "Grape"
             price: "3000"
         }

         ListElement {
             name: "Peach"
             price: "4000"
         }

         ListElement {
             name: "Lemon"
             price: "5000"
         }
     }

    Component {
        id:listDelegate
        Item {
            width: parent.width
            height: 40
            Column {
                Text { text: 'Name:' + name }
                Text { text: 'Price:' + price + ' won'}
            }
            MouseArea {
                anchors.fill: parent
                onClicked: list.currentIndex = index
            }
        }
    }

    Component{
        id : listhightlight
        Rectangle {

            color: 'grey'
            Text {
                anchors.centerIn: parent
                text: 'Hello ' + listmodel.get(list.currentIndex).name
                color: 'white'
            }
        }
    }

    ListView {
        id: list
        anchors.fill: parent
        model: listmodel
        delegate:listDelegate
        highlight:listhightlight
        focus: true
        onCurrentItemChanged: console.log(model.get(list.currentIndex).name + ' selected')
    }
}