[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fDYjSca4RQ2OsP1xOWYREUn7QowHwkuZheivVNmneAoE":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":12,"notice":12,"visitCount":28,"commentCount":29,"keywords":30},136,"2024-11-09T10:31:31.533Z","当你在flutter中遇到输入框响应但输入框没有显示在键盘上时","先给出一段示例代码，键盘输入框写在modal弹窗中的情况，一些代码做了简化处理，所以不能直接运行，目的是让大家只看重要的部分，知道基本的布局。其中还使用了一些自己封装的类，所以不要直接运行。\n```dart\nvoid _showCommentActionSheet(BuildContext currentContext, HomeListModel cardModel) {\n    showCupertinoModalPopup(\n      barrierColor: Colors.black.withOpacity(0.8),\n      context: currentContext,\n      builder: (BuildContext context) {\n        return SafelyClickWidget(\n          onTap: () {\n            KeyboardUtils.closeKeyboard(context);\n          },\n          child: TextField(\n            autofocus: false,\n            style: TextStyles.mediumText(16, Colors.white),\n            focusNode: viewModel.focusNode,\n            decoration: InputDecoration(\n              contentPadding: const EdgeInsets.symmetric(horizontal: 0),\n              hintText: \"Add a comment\",\n              hintStyle: TextStyles.mediumText(16, Colours.FF8C8C8C),\n              border: InputBorder.none,\n              filled: true,\n              fillColor: Colors.transparent,\n              enabledBorder: OutlineInputBorder(\n                borderSide: BorderSide.none,\n                borderRadius: BorderRadius.circular(0),\n              ),\n              focusedBorder: OutlineInputBorder(\n                borderSide: BorderSide.none,\n                borderRadius: BorderRadius.circular(0),\n              ),\n            ),\n            textInputAction: TextInputAction.send,\n            onSubmitted: (value) async {\n              \n            },\n            onChanged: (value) {\n              \n            },\n          ),\n        );\n      },\n    );\n  }\n```\n\n类似这种布局，当在一个页面widget展示时，如果出现了键盘遮挡了输入框的情况，那么可以将输入框以及你想布局在安全区SafeArea中的组件可以显示在键盘之上，你可以加一个`AnimatedPadding`或者`AnimatedContainer`组件包裹他们。\n\n当设置了对应的padding时，这2个组件可以动态的调整自组件的位置，以此可以满足不被输入框遮挡的问题。\n\n示例如下：\n```dart\nvoid _showCommentActionSheet(BuildContext currentContext, HomeListModel cardModel) {\n    showCupertinoModalPopup(\n      barrierColor: Colors.black.withOpacity(0.8),\n      context: currentContext,\n      builder: (BuildContext context) {\n        return SafelyClickWidget(\n          onTap: () {\n            KeyboardUtils.closeKeyboard(context);\n          },\n          child: AnimatedPadding(\n            padding: MediaQuery.of(context).viewInsets, // 划重点\n            duration: const Duration(milliseconds: 100),\n            child: TextField(\n              autofocus: false,\n              style: TextStyles.mediumText(16, Colors.white),\n              focusNode: viewModel.focusNode,\n              decoration: InputDecoration(\n                contentPadding: const EdgeInsets.symmetric(horizontal: 0),\n                hintText: \"Add a comment\",\n                hintStyle: TextStyles.mediumText(16, Colours.FF8C8C8C),\n                border: InputBorder.none,\n                filled: true,\n                fillColor: Colors.transparent,\n                enabledBorder: OutlineInputBorder(\n                  borderSide: BorderSide.none,\n                  borderRadius: BorderRadius.circular(0),\n                ),\n                focusedBorder: OutlineInputBorder(\n                  borderSide: BorderSide.none,\n                  borderRadius: BorderRadius.circular(0),\n                ),\n              ),\n              textInputAction: TextInputAction.send,\n              onSubmitted: (value) async {\n\n              },\n              onChanged: (value) {\n\n              },\n            ),\n          ),\n        );\n      },\n    );\n  }\n```\n\n如上述代码所示，当使用组件`AnimatedPadding`，并且设置`padding`为`MediaQuery.of(context).viewInsets`时，组件中包裹的子组件就可以限制在键盘的上方，因为`viewInsets`就是在键盘出现时，`viewInsets.bottom`就会响应，而且就是键盘的顶部位置。\n\n加上设置了duration动画时间，就可以实现一个动态丝滑的向上移动动画，也不会被键盘遮挡。\n\n本文到此结束。\n\n","不知大家有没有遇到一种情况，有时候明明将输入框被SafeArea包裹，但是输入框响应时，输入框依然被键盘遮挡住了的情况。","",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",11,{"id":24,"name":26,"parentId":21},"Flutter",[],231,0,"flutter keyboard,flutter ios input,flutter input,flutter ios keyboard,flutter app input,input keyboard"]