Flutter TextFormField文本选中滚动异常问题求助

问题分析 #

你当前的实现用SingleChildScrollView包裹了TextFormField，这会导致TextFormField自身的滚动逻辑被外层容器覆盖。当选中并拖动文本时，外层的SingleChildScrollView无法响应文本选择的滚动事件，从而导致选中区域移出可视范围后无法自动滚动。

解决方案 #

移除多余的外层滚动容器，让TextFormField自身处理滚动逻辑，并通过scrollController与Scrollbar关联。同时监听文本选择的变化，确保选中区域始终保持在可视范围内。

修改后的代码示例 #

class _CustomTextAreaFormFieldContent extends Stateful Widget {
  final String? value;
  final ValueChanged<String> onChanged;
  final EdgeInsets scrollPadding;
  final double? height;
  final bool readOnly;

  const _CustomTextAreaFormFieldContent({
    required this.value,
    required this.onChanged,
    required this.scrollPadding,
    required this.height,
    this.readOnly = false,
    Key? key,
  }) : super(key: key);

  @override
  _CustomTextAreaFormFieldContentState createState() =>
      _CustomTextAreaFormFieldContentState();
}

class _CustomTextAreaFormFieldContentState
    extends State<_CustomTextAreaFormFieldContent> {
  final _scrollController = ScrollController();
  final _textController = TextEditingController();
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    _textController.text = widget.value ?? '';
    _focusNode = FocusNode();
    
    // 监听文本选择变化，确保选中区域可见
    _textController.addListener(_handleTextSelectionChange);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    _textController.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  void _handleTextSelectionChange() {
    final selection = _textController.selection;
    if (!selection.isValid || selection.baseOffset == selection.extentOffset) {
      return;
    }
    
    // 获取文本编辑框的渲染对象
    final renderObject = _focusNode.context?.findRenderObject() as RenderBox?;
    if (renderObject == null) return;
    
    // 计算选中区域的全局位置
    final selectionRect = renderObject.localToGlobal(
      renderObject.getLocalRectForCaret(selection),
    );
    
    // 计算可视区域的范围
    final viewport = _scrollController.position.viewportDimension;
    final scrollOffset = _scrollController.offset;
    
    // 检查选中区域是否在可视范围内，否则滚动到对应位置
    if (selectionRect.top < scrollOffset) {
      _scrollController.animateTo(
        selectionRect.top,
        duration: const Duration(milliseconds: 150),
        curve: Curves.easeInOut,
      );
    } else if (selectionRect.bottom > scrollOffset + viewport) {
      _scrollController.animateTo(
        selectionRect.bottom - viewport,
        duration: const Duration(milliseconds: 150),
        curve: Curves.easeInOut,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(height: 12),
        const Div(),
        SizedBox(
          height: widget.height == null ? null : widget.height! - 121,
          child: Scrollbar(
            controller: _scrollController,
            thumbVisibility: true,
            child: TextFormField(
              controller: _textController,
              focusNode: _focusNode,
              style: Theme.of(context).textTheme.bodyLarge,
              scrollPadding: widget.scrollPadding,
              scrollController: _scrollController,
              decoration: const InputDecoration.collapsed(hintText: ''),
              readOnly: widget.readOnly,
              onChanged: (value) => widget.onChanged(value.trim()),
              minLines: 6,
              maxLines: null,
              keyboardType: TextInputType.multiline,
            ),
          ),
        ),
      ],
    );
  }
}

关键修改点 #

• 移除外层滚动容器：删除SingleChildScrollView和包裹的Column，让TextFormField直接在固定高度的SizedBox中，利用自身的多行滚动能力。
• 关联ScrollController：将_scrollController赋值给TextFormField的scrollController参数，同时与Scrollbar关联，确保滚动条和文本滚动同步。
• 监听文本选择：通过_textController.addListener监听文本选择变化，计算选中区域的位置，手动触发滚动，确保选中区域始终在可视范围内。
• 添加FocusNode：用于获取文本编辑框的渲染对象，计算选中区域的全局位置。

原理说明 #

Flutter的TextFormField在设置maxLines: null时，会自动启用内部滚动。但当存在外层滚动容器时，内部滚动事件会被拦截。移除外层容器后，TextFormField可以正常响应文本选择的滚动事件。加上手动的选择监听，可以确保在拖动选中区域时，滚动视图会自动调整，让选中区域保持可见。

内容的提问来源于stack exchange，提问作者Kasymbek R. Tashbaev