Flutter中flutter_stripe的CardField被键盘遮挡，页面未上移求助

CardField组件位于屏幕底部时，获取焦点弹出键盘后页面不会自动上移以显示输入框，需手动滑动才能看到输入框。普通TextField组件无此问题，flutter_stripe功能正常无报错。

复现代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        children: [
          // 模拟页面顶部的其他内容
          const SizedBox(
            height: 700,
          ),
          Row(
            children: const [
              // Stripe卡号输入框
              Expanded(
                child: CardField(
                  numberHintText: "Card Number",
                ),
              ),
              SizedBox(
                width: 30,
              ),

              // 普通输入框
              Expanded(
                child: TextField(
                  autofocus: false,
                  keyboardType: TextInputType.number,
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

方法1：监听焦点触发手动滚动 #

CardField基于原生视图封装，无法像原生TextField那样自动触发滚动。可以通过FocusNode监听焦点状态，结合ScrollController手动将输入框滚动到可视区域：

final ScrollController _scrollController = ScrollController();
final FocusNode _cardFieldFocusNode = FocusNode();

@override
void initState() {
  super.initState();
  _cardFieldFocusNode.addListener(() {
    if (_cardFieldFocusNode.hasFocus) {
      // 延迟执行，确保键盘完全弹出后再滚动
      Future.delayed(const Duration(milliseconds: 300), () {
        _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
        );
      });
    }
  });
}

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      controller: _scrollController,
      child: Column(
        children: [
          const SizedBox(height: 700),
          Row(
            children: [
              Expanded(
                child: CardField(
                  numberHintText: "Card Number",
                  focusNode: _cardFieldFocusNode,
                ),
              ),
              const SizedBox(width: 30),
              const Expanded(
                child: TextField(
                  autofocus: false,
                  keyboardType: TextInputType.number,
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

方法2：确认Scaffold的键盘适配配置 #

显式设置resizeToAvoidBottomInset为true（默认值），避免因层级或配置覆盖导致自动上移失效：

return Scaffold(
  resizeToAvoidBottomInset: true,
  body: SingleChildScrollView(
    // ... 原有代码不变
  ),
);

方法3：动态添加底部内边距适配键盘 #

通过MediaQuery获取键盘高度，给CardField所在的行添加动态底部内边距，确保输入框不被键盘遮挡：

@override
Widget build(BuildContext context) {
  final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
  
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        children: [
          const SizedBox(height: 700),
          Padding(
            padding: EdgeInsets.only(bottom: keyboardHeight),
            child: Row(
              children: const [
                Expanded(
                  child: CardField(
                    numberHintText: "Card Number",
                  ),
                ),
                SizedBox(width: 30),
                Expanded(
                  child: TextField(
                    autofocus: false,
                    keyboardType: TextInputType.number,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

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