Flutter开发 键盘弹起导致底部溢出问题

        flutter版本:3.7.12

        表现:登录页为从上往下Column布局,但是内容不足以撑满一整屏(约70%),键盘弹起的时候导致底部溢出,查了一下资料,都说给Scaffold加上属性

resizeToAvoidBottomInset: false,

加上后确实不会再出现溢出表现,但是同时页面也没有随着键盘的弹起而弹起,导致一些小屏手机输入位置被键盘挡住,用户不知道输入内容,登录按钮也是直接被挡住。

        解决方案:在Scaffold最外层加入SingleChildScrollView,手动控制器滚动位置。

1、声明一个控制变量

ScrollController scrollController = ScrollController();

2、给SingleChildScrollView赋值控制变量

return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SingleChildScrollView(
            controller: scrollController,
            child: Container(
                // 其他内容...
            )
      )
)

3、页面尺寸变化时加入监听

  /// 页面尺寸改变时回调
  @override
  didChangeMetrics() {
    super.didChangeMetrics();
    // 在页面重新渲染完成之后,通过MediaQuery.of(context).viewInsets.bottom获取软键盘高度
    WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
      isKeyboardOpen = MediaQuery.of(context).viewInsets.bottom > 0;
      if (isKeyboardOpen) {
        scrollController.animateTo(
          // 重点,本文可以直接滚动到最底部满足要求,根据自己需要进行跳转滚动位置,
          // 最后是定位到聚焦的某一个输入位置进行滚动
          scrollController.position.maxScrollExtent,
          duration: Duration(milliseconds: 500),
          curve: Curves.easeInOut,
        );
      }
    });
  }

        最后键盘弹起的时候,底部不会出现溢出提示,并且页面可以滚动并自动在弹起的时候滚动到最底部(本项目适合,自己的项目可以定位到需要滚动到的聚焦组件位置),保证内容可见,问题解决~

相关推荐

  1. Flutter开发 键盘弹起导致底部溢出问题

    2024-01-17 13:40:01       58 阅读
  2. flutter弹窗高度过高,在弹出键盘后布局溢出问题

    2024-01-17 13:40:01       26 阅读
  3. flutter 处理文字溢出并自动缩小的问题

    2024-01-17 13:40:01       55 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-17 13:40:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-17 13:40:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-01-17 13:40:01       87 阅读
  4. Python语言-面向对象

    2024-01-17 13:40:01       96 阅读

热门阅读

  1. C#学习教程

    2024-01-17 13:40:01       58 阅读
  2. 黑洞数(C语言)

    2024-01-17 13:40:01       52 阅读
  3. 快速了解STM32的ADC功能,从入门到精通

    2024-01-17 13:40:01       55 阅读
  4. Github Copilot 的使用方法和快捷键*

    2024-01-17 13:40:01       77 阅读
  5. Nue.js 是什么?

    2024-01-17 13:40:01       47 阅读
  6. What is `HttpServletRequestWrapper` does?

    2024-01-17 13:40:01       64 阅读
  7. ConcurrentHashMap源码解析

    2024-01-17 13:40:01       68 阅读
  8. route和router的区别

    2024-01-17 13:40:01       52 阅读
  9. C++中的符号->

    2024-01-17 13:40:01       42 阅读