iOS端Flutter实现WhatsApp式返回时键盘收起效果

当前Flutter在iOS端的默认侧滑返回行为是键盘立即消失（类似LinkedIn），要实现WhatsApp那种键盘随页面滑动同步收起的效果，可通过监听路由动画进度结合焦点管理来修改，具体代码调整如下：

修改后的page.dart代码 #

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(onPressed: () {
        Navigator.of(context).pushNamed('/nextpage');
      }),
    );
  }
}

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

  @override
  State<NextPage> createState() => _NextPageState();
}

class _NextPageState extends State<NextPage> with SingleTickerProviderStateMixin {
  final FocusNode _focusNode = FocusNode();
  Animation<double>? _routeAnimation;
  bool _keyboardVisible = false;

  @override
  void initState() {
    super.initState();
    // 监听TextField焦点变化，标记键盘状态
    _focusNode.addListener(() {
      setState(() {
        _keyboardVisible = _focusNode.hasFocus;
      });
    });
    // 页面渲染完成后，监听侧滑返回的路由动画
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final route = ModalRoute.of(context);
      if (route?.animation != null) {
        _routeAnimation = route!.animation;
        _routeAnimation!.addListener(_handleRouteAnimation);
      }
    });
  }

  void _handleRouteAnimation() {
    // 当侧滑进度超过20%（动画值<0.8）时，同步收起键盘
    if (_keyboardVisible && _routeAnimation!.value < 0.8) {
      _focusNode.unfocus();
      _keyboardVisible = false;
    }
  }

  @override
  void dispose() {
    // 清理监听器和焦点节点
    _routeAnimation?.removeListener(_handleRouteAnimation);
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('next page'),
      ),
      body: SizedBox(
        width: double.infinity,
        height: double.maxFinite,
        child: Center(
          child: TextField(
            focusNode: _focusNode,
            decoration: const InputDecoration(hintText: '输入内容测试'),
          ),
        ),
      ),
    );
  }
}

关键逻辑说明 #

• 使用FocusNode管理TextField的焦点，通过焦点状态判断键盘是否处于显示状态；
• 监听ModalRoute的动画对象，该动画值从1.0（页面完全显示）过渡到0.0（页面完全退出），对应侧滑返回的进度；
• 设置阈值（示例中为0.8），当侧滑进度超过该阈值时，调用unfocus()收起键盘，此时系统会自动让键盘收起动画与页面侧滑动画同步，实现WhatsApp的效果。你可以根据需求调整这个阈值，优化触发时机。

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