Flutter实现仅触发一次滚动到指定位置的方法

核心问题分析 #

你的代码中onTap回调会在每次点击搜索框时触发，无论搜索框是否已经获得焦点，这就是重复滚动的原因。我们需要限制滚动仅在搜索框从无焦点变为有焦点时触发。

解决方案一：在onTap中判断焦点状态 #

直接修改onTap逻辑，仅当搜索框未获得焦点时执行滚动：

TextField(
  focusNode: focusNode,
  onTap: () {
    // 仅当未处于焦点状态时执行滚动
    if (focusNode?.hasFocus != true) {
      scrollController?.animateTo(
        10 * 1000,
        duration: const Duration(milliseconds: 1000),
        curve: Curves.bounceIn,
      );
    }
  },
  autofocus: true,
  controller: controller,
  // 其他属性...
)

解决方案二：使用FocusNode监听焦点变化（更可靠） #

通过FocusNode的焦点变化监听来触发滚动，这种方式能准确捕捉焦点从无到有的时机，避免onTap可能存在的时序问题。需要将_SearchBox改为StatefulWidget来管理监听：

class _SearchBox extends StatefulWidget {
  final Function()? onReset;
  final TextEditingController? controller;
  final ScrollController? scrollController;
  final FocusNode? focusNode;

  const _SearchBox({
    Key? key,
    this.onReset,
    this.controller,
    this.scrollController,
    this.focusNode,
  }) : super(key: key);

  @override
  State<_SearchBox> createState() => _SearchBoxState();
}

class _SearchBoxState extends State<_SearchBox> {
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    // 使用外部传入的FocusNode或创建内部实例
    _focusNode = widget.focusNode ?? FocusNode();
    // 添加焦点变化监听
    _focusNode.addListener(_handleFocusChange);
  }

  @override
  void dispose() {
    // 清理资源：若为内部创建的FocusNode则释放，否则移除监听
    if (widget.focusNode == null) {
      _focusNode.dispose();
    } else {
      _focusNode.removeListener(_handleFocusChange);
    }
    super.dispose();
  }

  void _handleFocusChange() {
    // 仅在获取焦点时触发滚动
    if (_focusNode.hasFocus) {
      widget.scrollController?.animateTo(
        10 * 1000,
        duration: const Duration(milliseconds: 1000),
        curve: Curves.bounceIn,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    final InputBorder border =
        OutlineInputBorder(borderSide: BorderSide(color: Colors.grey[300]!));

    return TextField(
      focusNode: _focusNode,
      autofocus: true,
      controller: widget.controller,
      // 其他属性...
    );
  }
}

补充说明 #

• 若使用外部传入的FocusNode，确保在父组件中正确管理其生命周期，避免内存泄漏。
• autofocus: true会让搜索框首次加载时自动获取焦点，此时监听也会触发滚动，符合需求。

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