如何从父组件以编程方式聚焦Flutter列表项Widget？

要实现从父组件主动聚焦指定索引的列表项，以下是两种常用的可行方案：

方案一：通过GlobalKey获取子组件状态 #

在父组件中维护子项的GlobalKey集合，通过Key直接访问子组件的FocusNode来发起聚焦请求。

修改后的完整代码：

class MyHome extends Stateful Widget {
  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  // 存储每个子项的GlobalKey，用于获取子组件状态
  final List<GlobalKey<_MyItemState>> _itemKeys = [];

  @override
  void initState() {
    super.initState();
    // 初始化Key列表，数量与列表项一致
    for (int i = 0; i < 10; i++) {
      _itemKeys.add(GlobalKey<_MyItemState>());
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) => MyItem(
        key: _itemKeys[index], // 将对应Key传递给子组件
        index: index,
      ),
    );
  }

  void setFocusedIndex(int index) {
    if (index >= 0 && index < _itemKeys.length) {
      // 通过Key获取子组件状态，调用聚焦方法
      _itemKeys[index].currentState?.focusNode.requestFocus();
    }
  }
}

class MyItem extends Stateful Widget {
  final int index;

  const MyItem({super.key, required this.index});

  @override
  State<MyItem> createState() => _MyItemState();
}

class _MyItemState extends State<MyItem> {
  final FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text('Item ${widget.index}'),
      focusNode: focusNode,
      onTap: () {
        focusNode.requestFocus();
      },
    );
  }

  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }
}

方案二：父组件统一管理FocusNode #

由父组件创建并维护所有子项的FocusNode，直接传递给子组件使用，父组件可直接调用对应FocusNode的聚焦方法。

修改后的完整代码：

class MyHome extends Stateful Widget {
  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  // 父组件维护所有子项的FocusNode
  late List<FocusNode> _focusNodes;

  @override
  void initState() {
    super.initState();
    // 初始化FocusNode列表
    _focusNodes = List.generate(10, (_) => FocusNode());
  }

  @override
  void dispose() {
    // 统一销毁所有FocusNode，避免内存泄漏
    for (var node in _focusNodes) {
      node.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) => MyItem(
        index: index,
        focusNode: _focusNodes[index], // 将对应FocusNode传递给子组件
      ),
    );
  }

  void setFocusedIndex(int index) {
    if (index >= 0 && index < _focusNodes.length) {
      // 直接调用对应索引的FocusNode发起聚焦
      _focusNodes[index].requestFocus();
    }
  }
}

class MyItem extends Stateful Widget {
  final int index;
  final FocusNode focusNode; // 接收父组件传递的FocusNode

  const MyItem({super.key, required this.index, required this.focusNode});

  @override
  State<MyItem> createState() => _MyItemState();
}

class _MyItemState extends State<MyItem> {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text('Item ${widget.index}'),
      focusNode: widget.focusNode,
      onTap: () {
        widget.focusNode.requestFocus();
      },
    );
  }
}

注意事项 #

• 两种方案都需要添加索引合法性判断，避免数组越界报错
• 方案二中必须在父组件的dispose方法中统一销毁所有FocusNode，防止内存泄漏
• 若列表项数量动态变化，需同步更新GlobalKey或FocusNode列表的数量

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