flutter - 使用 SingleChildScrollView() 解决键盘遮挡输入框的问题

最新推荐文章于 2022-09-01 15:40:07 发布

素燃

最新推荐文章于 2022-09-01 15:40:07 发布

阅读量2.3k

点赞数

分类专栏： Flutter 文章标签：键盘遮挡

总结不易，转载请说明出处哦!

本文链接：https://blog.csdn.net/qq_36407748/article/details/109178611

版权

Flutter 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个在Flutter应用中遇到的问题：当弹出软键盘时，输入框被遮挡导致无法正常输入文本。为了解决这个问题，文章提供了一种简单有效的方法——使用SingleChildScrollView组件来实现页面内容的滚动，从而确保用户可以始终看到输入框。

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

写好了，感觉可好

在这里插入图片描述

点击输入框，输入内容时发现如下，键盘遮挡了输入框

在这里插入图片描述

使用 SingleChildScrollView 解决遮挡问题，就是让它滚动起来

在这里插入图片描述

直接使用 SingleChildScrollView 包裹子元素

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFcccccc),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 200,
              color: Colors.black12,
              child: Center(child: Text("顶部")),
            ),
            SizedBox(height: 20),
            Container(
              height: 200,
              margin: EdgeInsets.all(10),
              width: double.infinity,
              color: Colors.white,
              child: Column(
                children: [
                  Container(
                    height: 40,
                    width: 250,
                    margin: EdgeInsets.all(10),
                    child: TextField(
                      decoration: InputDecoration(
                        fillColor: Color(0xffcfcccc),
                        filled: true,
                        hintText: '请输入账号',
                        contentPadding: EdgeInsets.only(left: 20),
                      ),
                    ),
                  ),
                  Container(
                    height: 40,
                    width: 250,
                    margin: EdgeInsets.all(10),
                    child: TextField(
                      decoration: InputDecoration(
                        fillColor: Color(0xfffdfccc),
                        filled: true,
                        hintText: '请输入密码',
                        contentPadding: EdgeInsets.only(left: 20),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }