Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Key Navigation in ListView Component -> Set Focus to ListView Element
Forum Updated to NodeBB v4.3 + New Features

Key Navigation in ListView Component -> Set Focus to ListView Element

Scheduled Pinned Locked Moved QML and Qt Quick
1 Posts 1 Posters 1.2k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    sf2212
    wrote on last edited by
    #1

    Hello,

    following ListView with some custom components:

    @ Rectangle {
    height: 107
    width: 315
    anchors.top: parent.top
    anchors.topMargin: 29
    radius: 2
    border.color: "#5c6479"
    color: "#050822"
    clip:true
    Component {
    id: listDelegate
    Item {
    height: 27
    Rectangle {
    MenuButtonStyle {
    width: 305
    anchors.leftMargin: 5
    style: MyButtonStyle {
    label: ButtonTextStyle {
    horizontalAlignment: Text.AlignHCenter
    text: name
    }
    }
    }
    }
    Keys.onDownPressed: {
    console.log("Down key " + listView1.currentIndex.toString());
    listView1.incrementCurrentIndex();
    }
    Keys.onUpPressed: {
    console.log("Up key " + listView1.currentIndex.toString());
    listView1.decrementCurrentIndex();
    }
    }
    }

            ListView {
                boundsBehavior: Flickable.StopAtBounds
                id: listView1
                anchors.top: parent.top
                anchors.fill: parent
                model: ContentListModel {}
                delegate: listDelegate
            }
        }@
    

    MyButtonStyle is defined like this:

    @ButtonStyle {
    background: Rectangle {
    id: rect
    border.width: control.activeFocus ? 1 : 0
    radius: 2
    gradient: Gradient {
    GradientStop {
    position: 0
    color: control.focus ? "white" : "transparent"
    }
    GradientStop {
    position: 0.4
    color: control.focus ? "#f5f5f5" : "transparent"
    }

            GradientStop {
                position: 1.0
                color: control.focus ? "#575857" : "transparent"
            }
        }
    }
    

    }@

    If a tab with "Tabulator" Key the color is successfully changed when selecting an element,

    I want this also for elements inside my ListView component when hitting up or down key. Selecting next element and scrolling works so far.

    But setting the focus so that property "control.activeFocus" is true did not work. Any hints?

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved