QML listview reading current and touch area - c++

Question

I have this problem. I have listview which I populate from QT code , but I want to listview to be touchable, so when I click I can actually select certain item. Now I can navigate with arrows up and down, but when I port it to Android it doesn't work. I have tried to add mouse area, but I can't make it work with listview. So that's problem no.1 and second question is about getting selected item. So when I click on certain item in list I want to read data from it.
Here is a piece of my code if you need more just let me know:
ListView {
id: listview1
x: 0
y: 82
width: 395
height: 942
visible: true
keyNavigationWraps: false
boundsBehavior: Flickable.DragAndOvershootBounds
opacity: 1
maximumFlickVelocity: 2500
anchors.leftMargin: 0
highlightMoveSpeed: 489
contentWidth: 0
preferredHighlightEnd: 2
spacing: 5
highlightRangeMode: ListView.NoHighlightRange
snapMode: ListView.SnapToItem
anchors.bottomMargin: 0
anchors.rightMargin: 179
anchors.topMargin: 82
anchors.fill: parent
model: myModel
delegate:Component {
// id: contactDelegate
Item {
property variant myData: model
width: 450; height: 90
Column {
Text { text: '<b>ID: </b> ' + id_korisnika ; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 8 }
Text { text: '<b>Ime: </b> ' + ime_korisnika ; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 8 }
Text { text: '<b>Prezime: </b> ' + prezime_korisnika; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 8 }
Text { text: '<b>Broj telefona: </b> ' + broj_korisnika ; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 8 }
Text { text: '<b>Adresa: </b> ' + adresa_korisnika ; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 8 }
}
}
}
// delegate: contactDelegate
highlight: Rectangle {color:"black"; radius: 5; opacity: 0.7 }
focus: true
}
BorderImage {
id: border_image1
x: 0
y: 0
width: 501
height: 81
source: "slike/naslov.png"
MouseArea {
id: mouse_area1
x: 0
y: 81
anchors.fill: parent
}
}
Rectangle {
id: rectangle1
x: 395
y: 82
width: 100
height: 718
gradient: Gradient {
GradientStop {
position: 0
color: "#f3eeee"
}
GradientStop {
position: 1
color: "#621717"
}
}
Image {
id: image1
x: 2
y: 314
width: 100
height: 100
source: "slike/Button-Next-icon.png"
}
}
//dodaj korisnika
Flipable {
id: flipable
x: 401
y: 98
width: 87
height: 70
property bool flipped: false
front: Image { x: 0; y: 0; width: 60; height: 58; source: "slike/dodaj_korisnika.png"; anchors.centerIn: parent }
back: Image { x: 0; y: 0; width: 60; height: 58; source: "slike/accept.png"; anchors.centerIn: parent }
transform: Rotation {
id: rotation
origin.x: flipable.width/2
origin.y: flipable.height/2
axis.x: 1; axis.y: 0; axis.z: 0 // set axis.y to 1 to rotate around y-axis
angle: 0 // the default angle
}
states: State {
name: "back"
PropertyChanges { target: rotation; angle: 180 }
when: flipable.flipped
}
transitions: Transition {
NumberAnimation { target: rotation; property: "angle"; duration: 500 }
}
MouseArea {
x: 7
y: 9
width: 73
height: 76
anchors.rightMargin: 7
anchors.leftMargin: 7
anchors.topMargin: 9
anchors.bottomMargin: 9
hoverEnabled: false
anchors.fill: parent
onClicked: {
if(Varijabla.unos_korisnika==1)
{ window.state == 'State1' ? window.state = "" : window.state = 'State1'; flipable.flipped = !flipable.flipped; Varijabla.povecaj() }
else if(Varijabla.unos_korisnika==2)
{
window.state == "" ? window.state = 'State1' : window.state = ""; flipable.flipped = !flipable.flipped; Varijabla.reset();
funkcije.dodaj_korisnika(text_input1.text,text_input2.text,text_input3.text,text_input4.text);
}
}
}
These are text variables available:
TextInput {
id: text_input1
x: 59
y: 131
width: 80
height: 20
font.pixelSize: 12
opacity: 0
}
TextInput {
id: text_input3
x: 59
y: 246
width: 80
height: 20
font.pixelSize: 12
opacity: 0
}
TextInput {
id: text_input4
x: 59
y: 305
width: 80
height: 20
font.pixelSize: 12
opacity: 0
}
TextInput {
id: text_input2
x: 59
y: 190
width: 80
height: 20
font.pixelSize
: 12
opacity: 0
}

Answer 1

MouseArea inside delegate should work just fine, declare a signal in your ListView and emit it from delegate/MouseArea. You can emit arbitrary data, but in most cases model index is enough:
ListView {
signal itemSelected(int index)
delegate: Rectangle {
MouseArea {
anchors.fill: parent
onClicked: itemSelected(model.index)
}
}
}