[C++,QT/Qml]18.Qml프로그래밍 동적 리스트 만들기4(dynamic ListView 클릭이벤트 주기)
안녕하세요 고급 개발자가 꿈인 코린이 입니다.
오늘은 동적 리스트뷰에서 클릭이벤트 주는 것을 해보겠습니다.
리스트에서 각 리스트를 클릭했을때 각 리스트 마다 다르게 가거나 같은 화면으로 가더라도 다른 정보들을 보여
주어야 하는데요 이러한 것들은 어떻게 해야할까요??
리스트의 클릭은 각 리스트의 틀을 만들때 onclick이벤트를 주어서 그 리스트에 해당하는 index를
가져와서 다음 화면으로 출력하면 되는데요 각 리스트의 index를 가져오는 방법을 설명 드리겠습니다.
아래의 코드를 보겠습니다. 소스코드는 동적리스트 뷰를 만드는 포스팅에서 만든 코드를 계속 쓸 예정 입니다.
참고해주세요!!
main.qml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import ConnectEvent 1.0//등록한 클래스 타입을 import해준다.
import "."
Window {
property bool mbImageClicked : true
property int mCount : 0
property int mListClickIndex : 0//클릭한 리스트의 index를 담는 전역 변수
visible: true
width: 800
height: 600
title: qsTr("Hello World")
ConnectEvent//클래스를 qml 타입으로 지정
{
id:connectEvent
}
Component.onCompleted://view가 처음 실행될때 제일 처음으로 불려지는곳
{
for(var i = 0; i < connectEvent.getListSize(); i++){//리스트의 개수만큼 for문을 돌린다.
listView.model.append({"list_text": connectEvent.getListTitle(i),//모델에 리스트의 데이터값을 넣어준다.
"list_button_text": connectEvent.getListButtonText(i)})//listview에 선언한 임의의 모델 안에 데이터를 넣어준다.
}
}
Component {//리스트 뷰의 틀을 만든다.
id: contactDelegate
Item {
width: 800
height: 100
Text//리스트에 텍스트를 넣어주기 위해 텍스트 객체를 만들어준다.
{
id:listView_Text
anchors.left: parent.left
anchors.leftMargin: 50
anchors.verticalCenter: parent.verticalCenter
text:list_text//모델에 매칭이될 변수 listview에 원하는 값을 넣기위해서 설정하는 값
}
Button//리스트에 버튼을 넣어주기 위해 버튼 객체를 만들어준다.
{
id:listView_Button
width:120
height:40
anchors.rightMargin: 30
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
text: list_button_text//모델에 매칭이될 변수 listview에 원하는 값을 넣기위해서 설정하는 값
}
Rectangle//리스트의 구분선
{
id:line
width:parent.width
anchors.bottom:parent.bottom//현재 객체의 아래 기준점을 부모객체의 아래로 잡아주어서 위치가 아래로가게 설정
height:1
color:"black"
}
MouseArea
{
id:listMouseArea
anchors.fill: parent
onClicked:
{
mListClickIndex = index;//여기에서 사용하는 index는 클릭했을때의 index를 리턴해준다
//그래서 현재 선택한 리스트를 전역변수에 담고 다음 화면에서 그에 해당하는 정보를 보여준다.
stackView.push(Qt.resolvedUrl("qrc:/listInfo.qml"))
}
}
}
}
StackView{
id:stackView
anchors.fill: parent
initialItem: Item //제일 첫화면을 설정하는 것으로 설정을 안하면 되돌아오기가 안된다.
{
ListView {
id:listView
anchors.fill: parent
model: ListModel{}//임으로 만들 모델을 넣어준다.
delegate: contactDelegate//delegate란 리스트 한개의 틀(틀을 하나 만들어서 그것들을 여러개 붙여놓은것이 리스트 뷰이다.)
highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
focus: true
}
}
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
listInfo.qml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
import QtQuick 2.0
import QtQuick.Controls 2.0
import ConnectEvent 1.0
Item {
width: 800
height: 600
ConnectEvent//클래스를 qml 타입으로 지정
{
id:connectEvent
}
Component.onCompleted: {
testText.text = connectEvent.getListInfomation(mListClickIndex);//클릭했을때의 index를 담은 변수를 이용해서
//리스트의 정보를 가져온다.
}
Component.onDestruction: {
}
Rectangle//배경 색을 지정하는 부분
{
anchors.fill: parent
color:"green"
}
Text
{
id:testText
anchors.centerIn: parent
text:"screen1!!"
font.pixelSize: 50
font.bold: true
}
Button
{
id:previousButton
anchors.top:testText.bottom
anchors.horizontalCenter: parent.horizontalCenter
text:"go previous screen"
onClicked: {
console.log("pop screen1")
stackView.pop();//이전화면을 호출하기위해 stack의 제일 위에 화면을 밖으로 빼주어 첫화면을 보여준다.
}
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
코드를 보겠습니다.
하나의 윈도우에서 전역변수 mListClickIndex 를 만들었습니다. 이 변수는 리스트를 클릭했을때 클릭한 리스트의
index를 담는 변수입니다. 이 변수를 이용해서 다음 화면에서 정보를 가져오도록 하겠습니다.
그리고 리스트의 클릭 이벤트를 주기 위해서 리스트의 틀에 MouseArea타입을 선언 해주고
이 영역을 각 틀의 전체 영역 즉 parent fill 부모의 전체 영역으로 선언 해줍니다.
그리고 아래 와같이 전역변수에 저장을 해주고 다음 화면으로 넘어가게 stackview.push를 해줍니다.
스택뷰 push기능은 https://youonlyliveonce1.tistory.com/16 여기에 잘 설명이 되어있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
MouseArea
{
id:listMouseArea
anchors.fill: parent
onClicked:
{
mListClickIndex = index;//여기에서 사용하는 index는 클릭했을때의 index를 리턴해준다
//그래서 현재 선택한 리스트를 전역변수에 담고 다음 화면에서 그에 해당하는 정보를 보여준다.
stackView.push(Qt.resolvedUrl("qrc:/listInfo.qml"))
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
그다음 다음 화면에 처음 시작하자마자 인덱스를 가져와서 리스트 index의 정보값을 가져오게 하면 됩니다.
아래 코드와 같이 전역변수에 담은 변수를 이용해서 앞의 포스팅에서 만든 리스트의 정보를 가져오는 함수를 호출하여
testText에 출력하도록 해주면 됩니다.
|
1
2
3
4
|
Component.onCompleted: {
testText.text = connectEvent.getListInfomation(mListClickIndex);//클릭했을때의 index를 담은 변수를 이용해서
//리스트의 정보를 가져온다.
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
여기까지 리스트뷰의 클릭이벤트를 넣는 방법에 대해서 포스팅을 했습니다.
클릭했을때 index를 가져오는 방법을 했지만 만약에 리스트를 삭제하려고 4개를 클릭했을때 4개에 대한 정보를 어떻게
담아서 삭제를 할지 갑자기 의문이 듭니다. 그래서 다음 포스팅에서는 리스트의 삭제관련한 내용 삭제를 위해 체크박스
리스트를 만드는 내용 클릭시 체크가 되게하는 내용 들을 포스팅 하겠습니다.
여기까지 읽어주셔서 감사합니다.!!
'QT and QML' 카테고리의 다른 글
| [C++,QT/Qml]20.Qml프로그래밍 동적 리스트 만들기6(체크박스 리스트 삭제) (0) | 2019.09.01 |
|---|---|
| [C++,QT/Qml]19.Qml프로그래밍 동적 리스트 만들기5(리스트 삭제기능,listview Delete) (2) | 2019.08.17 |
| [C++,QT/Qml]17.Qml프로그래밍 동적 리스트 만들기3(dynamic ListView) (11) | 2019.08.01 |
| [C++,QT/Qml]16.Qml프로그래밍 동적 리스트 만들기2(dynamic ListView) (0) | 2019.08.01 |
| [C++,QT/Qml]15.Qml프로그래밍 리스트 만들기1(ListView) (0) | 2019.07.22 |