Flutter Windows端ListView上下方向键移动焦点跳转异常问题

问题现象 #

• 页面基础结构：Scaffold组件内嵌入ListView列表，AppBar区域配置操作按钮
• 异常复现路径：按上方向键将焦点从ListView移动到AppBar的按钮后，再按下方向键返回ListView，焦点会从离开前的项（例如第2项）直接跳转到第7项，不会定位到相邻的下一项（第3项）
• 正常场景：仅在ListView内部通过上下方向键切换焦点时，跳转逻辑完全正常

初步排查结果 #

• 直接触发异常的组件是包裹Scaffold的Focus组件，移除该组件后异常消失
• 将Shortcuts-Actions-Focus整套组件链替换为FocusActionDetector后，异常仍然存在
• 以上结论为初步排查结果，可能因对Flutter焦点系统机制理解不充分存在偏差

复现代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final int nItems = 20;
  late List<FocusNode> _fnList;
  int idxFocus = 0;

  @override
  void initState() {
    super.initState();
    _fnList = List.generate(nItems, (i) => FocusNode());
  }

  @override
  void dispose() {
    super.dispose();
    for (FocusNode fn in _fnList) {
      fn.dispose();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Shortcuts(
        shortcuts: <ShortcutActivator, Intent>{
          LogicalKeySet(LogicalKeyboardKey.escape): const DismissIntent(),
        },
        child: Actions(
          actions:  <Type, Action<Intent>>{
            DismissIntent: CallbackAction<DismissIntent>(
              onInvoke: (DismissIntent intent) => debugPrint('escape pressed'),
            ),
          },
          child: Focus(
            child: Scaffold(
              appBar: AppBar(
                  title: const Text('ListView Focus Action Example'),
                  actions: [
                    IconButton(
                      icon: const Icon(Icons.done),
                      onPressed: (){},
                    ),
                  ]
              ),
              body: Center(
                child: ListView.builder(
                  itemCount: nItems,
                  itemBuilder: (BuildContext context, int index) {
                    return Focus(
                        focusNode: _fnList[index],
                        onFocusChange: (bool focused) {
                          debugPrint('Focus Change: $index - $focused');
                        },
                        debugLabel: 'index: $index',
                        child: Card(
                          child: ListTile(
                            title: Text('item $index'),
                            trailing: TextButton(
                               onPressed: () {},
                               child: const Text('OK')
                             ),
                          ),
                        )
                    );
                  },
                ),
              ),
            ),
          ),
        ),
      // ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Jimmy