TextFormField输入框被键盘遮挡，如何实现屏幕上移？

下面是几种实用的解决方法，按需选择：

• 使用SingleChildScrollView包裹页面主体内容：
  把页面所有内容放在SingleChildScrollView里，键盘弹出时页面会自动滚动，让输入框处于可见区域。示例代码：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              // 其他页面组件
              TextFormField(
                decoration: InputDecoration(labelText: '请输入内容'),
              ),
              // 更多组件
            ],
          ),
        ),
      ),
    );
  }
  

• 确认Scaffold的resizeToAvoidBottomInset属性为true：
  这个属性默认就是true，会自动调整页面避免键盘遮挡，但如果之前被手动改成false，改回来就能解决问题：

  Scaffold(
    resizeToAvoidBottomInset: true,
    body: // 你的页面内容
  )
  

• 动态调整底部padding适配键盘高度：
  通过MediaQuery获取键盘的高度，给页面内容添加对应的底部padding，确保输入框不被遮挡：

  @override
  Widget build(BuildContext context) {
    final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.only(bottom: keyboardHeight),
        child: Column(
          children: [
            // 其他组件
            TextFormField(
              decoration: InputDecoration(labelText: '输入框'),
            ),
          ],
        ),
      ),
    );
  }
  

• 针对长列表中的输入框，结合焦点监听滚动：
  如果输入框在长列表里，用FocusNode监听焦点状态，配合ScrollController滚动到输入框位置：

  final FocusNode _inputFocus = FocusNode();
  final ScrollController _scrollController = ScrollController();
  
  @override
  void initState() {
    super.initState();
    _inputFocus.addListener(() {
      if (_inputFocus.hasFocus) {
        WidgetsBinding.instance.addPostFrameCallback((_) {
          _scrollController.animateTo(
            _scrollController.position.maxScrollExtent,
            duration: Duration(milliseconds: 300),
            curve: Curves.easeOut,
          );
        });
      }
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        controller: _scrollController,
        children: List.generate(20, (index) {
          return index == 19 
              ? TextFormField(focusNode: _inputFocus, decoration: InputDecoration(labelText: '底部输入框'))
              : ListTile(title: Text('列表项 $index'));
        }),
      ),
    );
  }
  
  @override
  void dispose() {
    _inputFocus.dispose();
    _scrollController.dispose();
    super.dispose();
  }
  

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