Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-69528

ItemDelegate: no focus visualization

    XMLWordPrintable

Details

    Description

      The current focus visualization is not really usable in the desktop context. Please try the attached example:

      • Style Default: Kind of works - visualFocus is used, however when using keyboard navigation (up/down) in the ListView, the focusReason seems to be reset so gone is the visualization
      • Style Material: Very subtle focus visualization. Otherwise the same problem as with Default.
      • Style Universal: No focus visualization at all
      • Style Fusion: No focus visualization at all

      Usually desktop applications use two different palette entries for "item selected" (macOS: gray) and "item selected and focus" (macOS: blue).

      At least Fusion (the "Desktop Style") should aim to behave like that - the widet based QFusionStyle draws a subtle focus border and adjusts the text color slightly (not really great for usability but better than nothing).

      To sum up: Focus visualization with ItemDelegate

      • is missing in Universal/Fusion
      • hardly noticeable in Material
      • broken with ListView key navigation
      import QtQuick 2.9
      import QtQuick.Controls 2.2
      import QtQuick.Layouts 1.3
      
      ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Focus")
      
        Component.onCompleted: v1.forceActiveFocus(Qt.TabFocusReason)
      
        Component {
          id: delegateComponent
          ItemDelegate {
            text: modelData
            width: ListView.view.width
            highlighted: ListView.isCurrentItem
            onClicked: {
              ListView.view.currentIndex = model.index;
              ListView.view.forceActiveFocus();
            }
          }
        }
      
        RowLayout {
          anchors.fill: parent
      
          ScrollView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            ListView {
              id: v1
              model: 20
              focus: true
              activeFocusOnTab: true
              delegate: delegateComponent
            }
          }
      
          ScrollView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            ListView {
              id: v2
              model: 20
              focus: true
              activeFocusOnTab: true
              delegate: delegateComponent
            }
          }
        }
      }
      

      Attachments

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            qt.team.quick.subscriptions Qt Quick and Widgets Team
            njeisecke Nils Jeisecke
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:

              Gerrit Reviews

                There are no open Gerrit changes