[Mathieu-Andre]

I built and launched Felgo’s TodoList example on my nvidia shield TV. Works great, except I cannot control the app with my remote control. I tried to add the necessary focus:true in the AppListView but it still doesn’t want to intercept any key events. Any idea?

Here’s my modified code (look for ‘FOCUS CODE HERE’)

  // show sorted/filterd todos of data model
  AppListView {
    id: listView
    anchors.fill: parent

    // the model specifies the data for the list view
    model: filteredModel

    // the delegate is the template item for each entry of the list
    delegate: SimpleRow {
      text: viewHelper.formatTodoId(model)
      detailText: "Title: "+title
      style.textColor: dataModel.isDraft(model) ? "grey" : Theme.listItem.textColor

      // push detail page when selected, pass chosen todo id
      onSelected: page.navigationStack.popAllExceptFirstAndPush(detailPageComponent, { todoId: model.id })

      // show marker for completed todos
      Rectangle {
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.margins: dp(4)
        width: dp(4)
        color: completed ? "lightgreen" : Theme.secondaryBackgroundColor
      }

    }

    ////////////////////////////// FOCUS CODE HERE /////////////////////////////
    focus: true
    Keys.onPressed: console.log("Keys.onPressed:" + event.key)
    Keys.onDownPressed: incrementCurrentIndex()
    Keys.onUpPressed: decrementCurrentIndex()
    Keys.onReturnPressed: currentItem.selected();
    ////////////////////////////////////////////////////////////////////////////

    // item animations, supported by list view for view model types like JsonListModel, ListModel or SortFilterProxyModel
    add: Transition {
      NumberAnimation {
        property: "opacity";
        from: 0;
        to: 1;
        duration: 200
        easing.type: Easing.OutQuad;
      }
    }

    addDisplaced: Transition {
      NumberAnimation {
        properties: "x,y";
        duration: 200
        easing.type: Easing.OutQuad;
      }
    }

    remove: Transition {
      NumberAnimation {
        property: "opacity";
        from: 1;
        to: 0;
        duration: 200
        easing.type: Easing.OutQuad;
      }
    }

    removeDisplaced: Transition {
      NumberAnimation {
        properties: "x,y";
        duration: 200
        easing.type: Easing.OutQuad;
      }
    }

    // hide scroll indicator, we automatically load more when bottom is reached
    scrollIndicatorVisible: false

    // load more todos
    footer: VisibilityRefreshHandler {
      canRefresh: !dataModel.isFetchingTodos
      onRefresh: logic.fetchNextPage()
    }

    // fetch todos when pulling list view for refresh
    PullToRefreshHandler {
      refreshing: dataModel.isFetchingTodos
      onRefresh: logic.fetchTodos()
    }
  }

 

[Mathieu-Andre]

It looks like it might be the NavigationStack that is blocking the key focus. After making this change in the Main.qml, i can finally navigate the todo list with the remote control:

//  // view
//  NavigationStack {
//    id: stack
//    splitView: tablet // use side-by-side view on tablets
//    initialPage: TodoListPage { }
//  }

  TodoListPage {
      anchors.fill: parent
  }

I was actually thinking of not using the NavigationStack for my TV app anyway, so I guess I solved my own problem. But in the event that I need this in the future, is there a way to allow key events to propagate through the NativationStack?

[Mathieu-Andre]

ok, i figured it out completely. You need to solve it the same way you’d solve this with QtQuick’s StackView, so the solution looks like this:

// view
NavigationStack {
  id: stack
  splitView: tablet // use side-by-side view on tablets
  initialPage: TodoListPage { }
  onCurrentPageChanged: currentPage.forceActiveFocus()
}

and then your page code should have FocusScope element used like so:

Page {

   ...

    onFocusChanged: {
        scope.focus = true
    }

    ...
    ...
    ...

    FocusScope {
        id: scope
        anchors.fill: parent

        AppListView {
            ...

            focus: true

            ...
            ...
            ...
        }
    }

    ...
    ...
    ...

}

 

I don’t know if there is a simpler solution, but it works and I hope it helps.

[GüntherFelgo Team]

Hi Mathieu,

Yes, as you pointed out, the initial focus setting gets changed by the StackView’s focus handling.

Thanks for sharing your solution!

Cheers,
Günther