flutter: 软键盘弹出把布局向上顶起的问题

最新推荐文章于 2025-03-18 20:02:11 发布

Crystal_xing

最新推荐文章于 2025-03-18 20:02:11 发布

阅读量8.2k

点赞数

分类专栏： Flutter

本文链接：https://blog.youkuaiyun.com/Crystal_xing/article/details/111288362

版权

在Flutter应用中，当软键盘出现时会导致布局被推上。解决这个问题的方法是在Scaffold中设置resizeToAvoidBottomPadding为false，并在body部分使用SafeArea、SingleChildScrollView和SizeBox进行包裹，通过设定高度避免界面高度重新计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

软键盘向上弹出的时候，会使界面高度重新计算然后刷新布局，所以导致布局向上顶起的现象，解决方案如下：

1. Scaffold 中需要加入resizeToAvoidBottomPadding: false ,

2. body 部分用SafeArea+SingleChildScrollView+SizeBox包裹，然后设置高度，用来规避重新计算的问题：

  @override
  Widget build(BuildContext context) {
    final padding = MediaQuery.of(context).padding;
    final height =
        MediaQuery.of(context).size.height - padding.top - padding.bottom;
    final width = MediaQuery.of(context).size.width;
    baseContext = context;
    resource = Translations.of(context);
    return LifeCycleDetector(
          //不重要的省略 XXXXX
            child: Scaffold(
              resizeToAvoidBottomPadding: false,
              appBar: AppBar(
                iconTheme: IconThemeData(color: BeautyColors.blue01),
                backgroundColor: Colors.transparent,
                centerTitle: true,
                elevation: 0,