Flutter：使用Expanded布局的页面添加TextField后，键盘弹出时页面收缩的禁用方法

嘿，这个问题我之前也碰到过！Flutter默认会在键盘弹出时自动调整页面布局来腾出空间，这就导致了你看到的页面元素全部收缩的情况。要禁用这个行为，有几个非常实用的方法，我给你一一说明：

• 最直接的方法：修改Scaffold的核心属性
  你只需要在页面的Scaffold组件里添加resizeToAvoidBottomInset: false这个属性，就能彻底禁用页面的收缩行为。代码示例如下：

  Scaffold(
    resizeToAvoidBottomInset: false, // 这行是关键！
    body: Expanded(
      child: Column(
        children: [
          TextField(decoration: InputDecoration(hintText: "请输入内容")),
          // 你的其他页面组件
        ],
      ),
    ),
  )
  

  不过要注意，如果你的TextField位置比较靠下，键盘弹出后可能会把它挡住。这时候可以配合SingleChildScrollView组件，让页面可以滚动，确保输入框始终可见。

• 兼顾不收缩与输入框可见：搭配滚动组件
  把Scaffold的body嵌套在SingleChildScrollView里，同时保留resizeToAvoidBottomInset: false，这样既不会让页面收缩，又能通过滚动看到被键盘挡住的内容：

  Scaffold(
    resizeToAvoidBottomInset: false,
    body: SingleChildScrollView(
      child: SizedBox(
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: [
            TextField(decoration: InputDecoration(hintText: "请输入内容")),
            // 其他高度较高的页面元素
          ],
        ),
      ),
    ),
  )
  

• 精细控制方案：修改MediaQuery参数
  如果你需要更精细的布局控制，可以通过修改MediaQuery的viewInsets来让Flutter忽略键盘的占位，从而避免页面收缩。这种方法适合特殊场景，代码示例：

  return MediaQuery(
    data: MediaQuery.of(context).copyWith(
      viewInsets: EdgeInsets.zero,
    ),
    child: Scaffold(
      body: Expanded(
        child: Column(
          children: [TextField()],
        ),
      ),
    ),
  );
  

一般来说，第一种方法是最常用的，配合滚动组件就能满足大部分场景的需求啦！

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