Flutter：RaisedButton遮挡TextField输入内容的解决方案咨询

我来帮你搞定这两个头疼的问题，咱们一步步拆解处理：

一、让按钮不再跑到键盘上方 #

默认情况下Flutter的Scaffold会自动调整布局，把内容上移避免被键盘遮挡，这就是按钮跟着“跑”到键盘上方的原因。你可以选下面两种方式调整：

方式1：固定按钮在屏幕底部（键盘弹出时会被覆盖） #

如果希望按钮始终留在页面底部，不随键盘移动，直接把按钮放到Scaffold的bottomNavigationBar里，同时关闭自动布局调整就行：

Scaffold(
  resizeToAvoidBottomInset: false, // 关闭布局自动上移
  body: SingleChildScrollView(
    child: Column(
      children: [
        TextField(
          maxLines: null, // 允许自由换行
          decoration: InputDecoration(hintText: "输入内容..."),
        ),
        // 这里不用再放按钮了
      ],
    ),
  ),
  bottomNavigationBar: Padding(
    padding: EdgeInsets.all(16.0),
    child: RaisedButton(
      onPressed: () {},
      child: Text("提交"),
    ),
  ),
)

这样按钮会牢牢固定在屏幕最底部，键盘弹出时会覆盖按钮，而TextField所在的滚动区域可以自由滚动查看全部内容。

方式2：键盘弹出时自动隐藏按钮 #

如果希望键盘弹出时按钮暂时消失，关闭时再显示，可以监听键盘的弹出状态：
先引入flutter/services.dart，再通过WidgetsBinding监听窗口变化：

import 'package:flutter/services.dart';

class _YourPageState extends State<YourPage> {
  bool _isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();
    // 监听键盘弹出/收起事件
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    final bottomInset = WidgetsBinding.instance.window.viewInsets.bottom;
    setState(() {
      _isKeyboardVisible = bottomInset > 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            TextField(
              maxLines: null,
              decoration: InputDecoration(hintText: "输入内容..."),
            ),
            if (!_isKeyboardVisible) // 键盘隐藏时才显示按钮
              Padding(
                padding: EdgeInsets.all(16.0),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text("提交"),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

二、让TextField自动滚动到底部，保证最后一行可见 #

哪怕解决了按钮的问题，换行时TextField内容过长的话，还是可能不会自动滚动到光标位置。用ScrollController就能轻松实现自动滚动：

class _YourPageState extends State<YourPage> {
  final ScrollController _scrollController = ScrollController();
  final TextEditingController _textController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 监听文本变化，自动滚动到最底部
    _textController.addListener(() {
      // 延迟一点执行，确保文本已经更新完成
      Future.delayed(Duration(milliseconds: 100), () {
        if (_scrollController.hasClients) {
          _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
        }
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 搭配上面的按钮处理方案，比如用bottomNavigationBar的方式
      resizeToAvoidBottomInset: false,
      body: SingleChildScrollView(
        controller: _scrollController,
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: TextField(
            controller: _textController,
            maxLines: null,
            decoration: InputDecoration(hintText: "输入内容..."),
          ),
        ),
      ),
      bottomNavigationBar: Padding(
        padding: EdgeInsets.all(16.0),
        child: RaisedButton(
          onPressed: () {},
          child: Text("提交"),
        ),
      ),
    );
  }
}

这样每次输入文本（包括换行）时，TextField都会自动滚动到最底部，保证光标和最后一行内容完全可见。

总结 #

如果要同时满足两个需求：按钮不跑到键盘上方，且输入时最后一行始终可见，推荐结合方式1（按钮放bottomNavigationBar）+ ScrollController自动滚动的方案，既固定了按钮位置，又能保证输入内容不被遮挡。

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