How Navigate only on Items of current index of ListView? - qt

Question

I have a ListView that has many rows , each row has few Items, i want to select one row by up and down keys and then select highlighted row by space or enter key and navigate on its items from first button by up and down keys, how is it possible?
here is my code:
import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick.Controls.Styles 1.4
ApplicationWindow {
visible: true
width: 400
height: 480
title: qsTr("Hello World")
Rectangle {
anchors.fill: parent
ListModel
{
id:myModel
ListElement
{
text1:"btn1"
text2:"btn2"
text3:"btn3"
}
ListElement
{
text1:"btn1"
text2:"btn2"
text3:"btn3"
}
ListElement
{
text1:"btn1"
text2:"btn2"
text3:"btn3"
}
}
ListView {
id: list
anchors.fill: parent;
model: myModel
currentIndex: 0
focus: true
delegate: Rectangle {
id: delegateItem
height: 100
width: parent.width;
color: "blue"
Row{
anchors.fill: parent
Button
{
text: model.text1
height: parent.height
onFocusChanged:
{
if(focus)
text="selected"
else
text= model.text1
}
}
Button
{
text: model.text1
height: parent.height
onFocusChanged:
{
if(focus)
text="selected"
else
text= model.text3
}
}
Button
{
text: model.text1
height: parent.height
onFocusChanged:
{
if(focus)
text="selected"
else
text= model.text3
}
}
}
onFocusChanged:
{
if(focus)
delegateItem.color="red"
else
delegateItem.color="blue"
}
}
Keys.onDownPressed: {
if (list.currentIndex + 1 < list.count )
list.currentIndex += 1;
}
Keys.onUpPressed: {
if (list.currentIndex >= 0)
list.currentIndex -= 1;
}
Keys.onEnterPressed:
{
list.currentItem.forceActiveFocus()
}
}
}
}

Answer 1

Using your example, you can select rows by navigating with the arrow keys, and give focus to an individual button by pressing tab until you get to the one you're interested in. Space activates a button once it has focus.
Comparing your answer with the information you added in your third edit, the cleaner way would be to give each button an id and refer to that. That is, rather than do this:
KeyNavigation.down: list.currentItem.children[0].children[1]
which is kinda fragile and difficult to read, do this:
KeyNavigation.down: button2

Answer 2

For navigating on first button of selected row, you should use list.currentItem.children here is modified codes
import QtQuick 2.6
import QtQuick.Controls 1.5
ApplicationWindow {
visible: true
width: 400
height: 480
title: qsTr("Hello World")
Rectangle {
anchors.fill: parent
ListModel {
id: myModel
ListElement {
text1: "btn1"
text2: "btn2"
text3: "btn3"
}
ListElement {
text1: "btn1"
text2: "btn2"
text3: "btn3"
}
ListElement {
text1: "btn1"
text2: "btn2"
text3: "btn3"
}
ListElement {
text1: "btn1"
text2: "btn2"
text3: "btn3"
}
ListElement {
text1: "btn1"
text2: "btn2"
text3: "btn3"
}
ListElement {
text1: "btn1"
text2: "btn2"
text3: "btn3"
}
ListElement {
text1: "btn1"
text2: "btn2"
text3: "btn3"
}
}
ListView {
id: list
anchors.fill: parent
model: myModel
currentIndex: 0
focus: true
delegate: Rectangle {
id: delegateItem
height: 100
width: parent.width
color: "blue"
Row {
anchors.fill: parent
Button {
text: model.text1
height: parent.height
onFocusChanged: {
if (focus)
text = "selected"
else
text = model.text1
}
KeyNavigation.down: list.currentItem.children[0].children[1]
}
Button {
text: model.text1
height: parent.height
onFocusChanged: {
if (focus)
text = "selected"
else
text = model.text3
}
KeyNavigation.down: list.currentItem.children[0].children[2]
KeyNavigation.up: list.currentItem.children[0].children[0]
}
Button {
text: model.text1
height: parent.height
onFocusChanged: {
if (focus)
text = "selected"
else
text = model.text3
}
KeyNavigation.up: list.currentItem.children[0].children[1]
}
}
onFocusChanged: {
if (focus)
delegateItem.color = "red"
else
delegateItem.color = "blue"
console.log(list.currentItem.children[0].children[0].focus)
}
Keys.onDownPressed:
{
if (list.currentIndex + 1 < list.count)
list.currentIndex += 1
}
Keys.onUpPressed:
{
if (list.currentIndex -1 > -1)
list.currentIndex -= 1
}
Keys.onSpacePressed: {
var focus=list.currentItem.children[0].children[children_index].focus
list.currentItem.children[0].children[children_index].focus
= !focus
if(focus)
list.currentItem.focus=true
console.log("entered: "+list.currentItem.children[0].children[0].focus)
}
property int children_index: 0
}
}
}
}