Flutter动画TextField问题：开启滚动后上滑全屏功能失效

问题原因 #

当TextField内容超过5行开启滚动后，内部的Scrollable组件会拦截垂直拖拽事件，导致外层GestureDetector的onVerticalDragUpdate无法触发，进而无法触发全屏切换逻辑。

解决方案 #

通过以下步骤修复：

• 给TextField绑定滚动控制器，跟踪滚动位置
• 监听TextField的滚动事件，结合拖拽方向判断是否触发全屏
• 调整手势捕获优先级，避免与TextField滚动事件冲突

修改后的代码 #

1. 添加滚动控制器 #

在组件类中声明滚动控制器：

final ScrollController _textFieldScrollController = ScrollController();

2. 修改TextField包裹逻辑 #

替换原代码中GestureDetector及内部的TextField相关代码：

GestureDetector(
  behavior: HitTestBehavior.opaque, // 确保手势优先被捕获
  onVerticalDragUpdate: (details) {
    if (details.delta.dy > 0) { // 下滑操作
      if (isFullScreen) {
        toggleFullScreen(context);
      }
    } else if (details.delta.dy < 0) { // 上滑操作
      if (!isFullScreen) {
        // 仅当TextField滚动到顶部时，触发全屏切换
        if (_textFieldScrollController.position.pixels <= _textFieldScrollController.position.minScrollExtent) {
          toggleFullScreen(context);
        }
      }
    }
  },
  child: AnimatedContainer(
    duration: const Duration(milliseconds: 500),
    curve: Curves.easeInOut,
    height: isFullScreen ? textFieldHeight : null,
    constraints: isFullScreen
        ? null
        : const BoxConstraints(
            minHeight: 50.0,
            maxHeight: 250.0, // 对应5行的高度
          ),
    child: IntrinsicHeight(
      child: NotificationListener<ScrollNotification>(
        onNotification: (notification) {
          // 监听滚动更新，判断是否触发全屏
          if (!isFullScreen && notification is ScrollUpdateNotification) {
            if (notification.dragDetails != null && notification.dragDetails!.delta.dy < 0) {
              if (_textFieldScrollController.position.pixels <= _textFieldScrollController.position.minScrollExtent) {
                toggleFullScreen(context);
                return true; // 阻止事件继续传递，避免冲突
              }
            }
          }
          return false;
        },
        child: TextField(
          scrollController: _textFieldScrollController, // 绑定滚动控制器
          focusNode: _textFieldFocusNode,
          controller: _chatController.textEditingController.value,
          minLines: 1,
          maxLines: isFullScreen ? null : (isKeyboardVisible ? 5 : 1),
          keyboardType: TextInputType.multiline,
          textInputAction: TextInputAction.newline,
          autocorrect: false,
          cursorColor: Get.isDarkMode ? Colors.white : primaryColor,
          decoration: InputDecoration(
            enabledBorder: const UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.transparent),
            ),
            focusedBorder: InputBorder.none,
            hintText: widget.submitType == SubmitType.view
                ? 'Have a question? Ask now!'
                : 'Type here',
            suffixIcon: isKeyboardVisible || isFullScreen
                ? null
                : Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Obx(() => _getSpeechToText()),
                      Obx(() => _getTextFieldSuffix()),
                    ],
                  ),
          ),
          onChanged: (value) {
            setState(() {});
          },
        ),
      ),
    ),
  ),
)

3. 释放控制器资源 #

在组件销毁时释放滚动控制器：

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

逻辑说明 #

• ScrollController：跟踪TextField的滚动位置，判断是否已经滚动到顶部
• NotificationListener：监听TextField内部的滚动事件，当用户向上拖拽到顶部时，触发全屏切换并阻止事件传递，避免与TextField滚动冲突
• HitTestBehavior.opaque：确保GestureDetector优先捕获手势事件，不受下方可滚动组件影响

修改后，当TextField处于滚动状态时，用户向上拖拽到顶部后继续滑动即可触发全屏展开；下滑时也能正常最小化，同时不影响TextField内部的滚动功能。

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