Flutter中键盘弹出时如何显示SingleChildScrollView包裹的Column最后一个Widget

针对你遇到的键盘弹出后遮挡底部TextField的问题，这里有几个实用的解决方案：

方案一：配置Scaffold的resizeToAvoidBottomInset属性 #

这是最基础的解决方式，Flutter的Scaffold默认会根据键盘高度自动调整布局，若页面嵌套复杂，显式开启该属性更稳妥：

Scaffold(
  // 显式设置为true（默认值即为true，明确配置可避免嵌套导致的失效）
  resizeToAvoidBottomInset: true,
  body: SingleChildScrollView(
    child: Column(
      children: [
        // ...页面其他Widget
        // 你提供的折扣输入Row代码
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text(
              'Discount (%) :',
              style: TextStyle(fontSize: 14),
            ),
            Container(
              width: 40,
              height: 30,
              decoration: BoxDecoration(
                  color: Colors.grey.shade200,
                  border: const Border.fromBorderSide(BorderSide.none),
                  borderRadius: BorderRadius.circular(10)),
              child: Center(
                child: TextField(
                  onChanged: (text) {
                    getDiscountedAmount(text);
                  },
                  cursorHeight: 18,
                  keyboardType: TextInputType.number,
                  controller: discountController,
                  decoration: const InputDecoration(
                    floatingLabelBehavior: FloatingLabelBehavior.never,
                    border: InputBorder.none,
                    contentPadding:
                        EdgeInsets.only(bottom: 12, right: 2),
                    labelText: '    0',
                    labelStyle: TextStyle(
                      fontSize: 14,
                    ),
                  ),
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                    fontSize: 14,
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  ),
)

方案二：给SingleChildScrollView添加动态底部内边距 #

若方案一未生效，可通过MediaQuery获取键盘高度，动态为滚动视图添加底部内边距，确保TextField不被遮挡：

SingleChildScrollView(
  padding: EdgeInsets.only(
    // 动态匹配键盘高度，避免内容被遮挡
    bottom: MediaQuery.of(context).viewInsets.bottom,
  ),
  child: Column(
    children: [
      // ...页面其他Widget
      // 底部折扣输入Row
    ],
  ),
)

方案三：监听TextField焦点，手动滚动到可视区域 #

针对复杂布局场景，可通过FocusNode监听TextField的焦点状态，获取焦点时自动滚动到目标位置：

1. 定义FocusNode：

final FocusNode _discountFocusNode = FocusNode();

2. 在initState中添加焦点监听：

@override
void initState() {
  super.initState();
  _discountFocusNode.addListener(() {
    if (_discountFocusNode.hasFocus) {
      // 延迟执行，确保键盘完全弹出后再滚动
      Future.delayed(const Duration(milliseconds: 300), () {
        Scrollable.ensureVisible(
          context,
          alignment: 0.8, // 调整对齐比例，确保TextField完全可见
          duration: const Duration(milliseconds: 300),
        );
      });
    }
  });
}

3. 为TextField绑定FocusNode：

TextField(
  focusNode: _discountFocusNode,
  // 其他属性保持不变
)

4. 在dispose中释放资源：

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

优先尝试方案一，大部分场景下可解决问题；若无效再依次尝试方案二、方案三。

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