如何仅导航 ListView 当前索引的项目？

Question

我有一个有很多行的ListView，每一行有几个Items，我想select一行通过上下键然后select通过 space 突出显示行或输入键并通过向上和向下键从第一个按钮导航其项目，这怎么可能？

这是我的代码：

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

使用您的示例，您可以通过使用箭头键导航 select 行，并通过按 tab 将焦点放在单个按钮上，直到到达那个按钮你感兴趣。Space 按钮获得焦点后激活。

将您的答案与您在第三次编辑中添加的信息进行比较，更简洁的方法是给每个按钮一个 id 并引用它。也就是说，而不是这样做：

KeyNavigation.down: list.currentItem.children[0].children[1]

有点脆弱且难以阅读，请执行此操作：

KeyNavigation.down: button2

Answer 2

要在所选行的第一个按钮上导航，您应该使用 list.currentItem.children 这里是修改后的代码

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
            }
        }
    }
}

如何仅导航 ListView 当前索引的项目？

How Navigate only on Items of current index of ListView?

qt

qml

qtquick2