如何在FocusNode.hasFocus为true时让ListView滚动至maxScrollExtent？

你的代码存在几处需要修正的细节，同时可以优化滚动逻辑来确保稳定性：

1. 修正ScrollController的生命周期 #

LoginPage作为无状态组件，每次build都会重新创建ScrollController，这会导致控制器与ListView的关联失效，甚至引发异常。需要将LoginPage改为有状态组件，把ScrollController放在state中管理：

class LoginPage extends StatefulWidget {
  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  late final ScrollController scrollController;

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        controller: scrollController,
        children: [
          const Text('Login'),
          FormLogin(scrollController: scrollController),
          // 添加足够多的内容让ListView可滚动，方便测试效果
          for (int i = 0; i < 20; i++) Padding(
            padding: const EdgeInsets.symmetric(vertical: 16),
            child: Text('List Item $i'),
          ),
        ],
      ),
    );
  }
}

2. 修正FocusNode的dispose逻辑 #

你当前的dispose方法错误地给phoneFocusNode添加了监听器，正确的做法是直接释放焦点节点资源：

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

3. 优化滚动触发逻辑 #

直接在focus监听器中调用animateTo可能会遇到布局未完成的情况，导致maxScrollExtent计算不准确。可以通过WidgetsBinding.instance.addPostFrameCallback确保在当前帧布局完成后执行滚动，同时检查控制器是否已关联到ListView：

void setFocusListener() {
  phoneFocusNode.addListener(() {
    if (phoneFocusNode.hasFocus) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (widget.scrollController.hasClients) {
          widget.scrollController.animateTo(
            widget.scrollController.position.maxScrollExtent,
            duration: const Duration(milliseconds: 500),
            curve: Curves.easeOut,
          );
        }
      });
    }
  });
}

完整修正后的FormLogin代码 #

class FormLogin extends StatefulWidget {
  const FormLogin({
    super.key,
    required this.scrollController,
  });

  final ScrollController scrollController;

  @override
  State<FormLogin> createState() => _FormLoginState();
}

class _FormLoginState extends State<FormLogin> {
  late FocusNode phoneFocusNode;

  @override
  void initState() {
    super.initState();
    phoneFocusNode = FocusNode();
    setFocusListener();
  }

  void setFocusListener() {
    phoneFocusNode.addListener(() {
      if (phoneFocusNode.hasFocus) {
        WidgetsBinding.instance.addPostFrameCallback((_) {
          if (widget.scrollController.hasClients) {
            widget.scrollController.animateTo(
              widget.scrollController.position.maxScrollExtent,
              duration: const Duration(milliseconds: 500),
              curve: Curves.easeOut,
            );
          }
        });
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          decoration: const InputDecoration(labelText: 'Phone Number'),
          focusNode: phoneFocusNode,
        ),
        ElevatedButton(
          onPressed: () {},
          child: const Text('Verify'),
        ),
      ],
    );
  }
}

关键说明 #

• 绑定ScrollController到页面生命周期，避免重复创建和内存泄漏
• 必须释放FocusNode资源，防止内存泄漏
• 通过addPostFrameCallback和hasClients检查，避免因布局未就绪或控制器未关联导致的异常

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