Flutter：如何让对话框滚动到获取焦点的TextField位置？

方案一：原生SingleChildScrollView + FocusNode + ScrollController #

这是无需第三方库的原生方案，通过监听焦点变化主动控制滚动位置，适配键盘弹出场景。

实现步骤 #

1. 为每个需要滚动聚焦的TextField创建对应的FocusNode，并初始化ScrollController。
2. 在initState中为每个FocusNode添加焦点监听，当焦点激活时，延迟执行滚动操作（等待键盘弹出完成）。
3. 将ScrollController绑定到SingleChildScrollView，FocusNode绑定到对应TextField。

代码示例 #

class MyDialog extends StatefulWidget {
  const MyDialog({super.key});

  @override
  State<MyDialog> createState() => _MyDialogState();
}

class _MyDialogState extends State<MyDialog> {
  final ScrollController _scrollController = ScrollController();
  final List<FocusNode> _textFieldFocusNodes = [
    FocusNode(),
    FocusNode(),
    FocusNode(),
  ];

  @override
  void initState() {
    super.initState();
    // 批量监听焦点变化
    for (var focusNode in _textFieldFocusNodes) {
      focusNode.addListener(() {
        if (focusNode.hasFocus) {
          // 延迟300ms确保键盘完全弹出后再滚动
          Future.delayed(const Duration(milliseconds: 300), () {
            _scrollController.animateTo(
              focusNode.offset,
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeOut,
            );
          });
        }
      });
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    // 销毁所有FocusNode
    for (var focusNode in _textFieldFocusNodes) {
      focusNode.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: SingleChildScrollView(
        controller: _scrollController,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              focusNode: _textFieldFocusNodes[0],
              decoration: const InputDecoration(labelText: "顶部输入框"),
            ),
            // 模拟长内容
            Container(height: 400, color: Colors.grey[200]),
            TextField(
              focusNode: _textFieldFocusNodes[1],
              decoration: const InputDecoration(labelText: "中部输入框"),
            ),
            // 模拟长内容
            Container(height: 300, color: Colors.grey[200]),
            TextField(
              focusNode: _textFieldFocusNodes[2],
              decoration: const InputDecoration(labelText: "底部输入框"),
            ),
          ],
        ),
      ),
    );
  }
}

方案二：ScrollablePositionedList 正确适配方案 #

如果偏好使用scrollable_positioned_list库，需结合ItemScrollController和焦点监听，确保键盘弹出后滚动到目标项。

实现步骤 #

1. 初始化ItemScrollController和对应FocusNode。
2. 监听FocusNode的焦点变化，当焦点激活时，调用ItemScrollController滚动到目标项索引。
3. 为ScrollablePositionedList设置固定高度（避免内容被对话框截断），并绑定ItemScrollController。

代码示例 #

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

class PositionedListDialog extends StatefulWidget {
  const PositionedListDialog({super.key});

  @override
  State<PositionedListDialog> createState() => _PositionedListDialogState();
}

class _PositionedListDialogState extends State<PositionedListDialog> {
  final ItemScrollController _itemScrollController = ItemScrollController();
  final FocusNode _bottomTextFieldFocus = FocusNode();
  final List<Widget> _listItems = [];

  @override
  void initState() {
    super.initState();
    // 构建列表项
    _listItems.addAll([
      const TextField(decoration: InputDecoration(labelText: "顶部输入框")),
      Container(height: 400, color: Colors.grey[200]),
      const TextField(decoration: InputDecoration(labelText: "中部输入框")),
      Container(height: 300, color: Colors.grey[200]),
      TextField(
        focusNode: _bottomTextFieldFocus,
        decoration: const InputDecoration(labelText: "底部输入框"),
      ),
    ]);

    // 监听底部输入框焦点
    _bottomTextFieldFocus.addListener(() {
      if (_bottomTextFieldFocus.hasFocus) {
        Future.delayed(const Duration(milliseconds: 300), () {
          _itemScrollController.scrollTo(
            index: 4, // 底部输入框在列表中的索引
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeOut,
          );
        });
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: SizedBox(
        // 设置对话框内容高度为屏幕的80%
        height: MediaQuery.of(context).size.height * 0.8,
        child: ScrollablePositionedList.builder(
          itemScrollController: _itemScrollController,
          itemCount: _listItems.length,
          itemBuilder: (context, index) => _listItems[index],
        ),
      ),
    );
  }
}

关键注意事项 #

• 延迟滚动：必须添加短暂延迟（300ms左右），因为键盘弹出需要时间，直接滚动会导致位置计算偏差。
• 资源销毁：务必在dispose中销毁ScrollController和FocusNode，避免内存泄漏。
• 对话框高度：无论是原生还是第三方方案，都要确保对话框内容有足够高度，可通过MediaQuery动态设置，防止内容被截断。

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