完美解决flutter 键盘遮挡/超出的坑

11.png

一个正常的app,一般都会有登录,注册,密码修改等基本功能界面,如上图的界面再正常不过了吧.这里面就会遇到键盘超出的坑
oh ~~

22.png

说实话,我也在网上找了一些解决键盘超出,覆盖的方法,大概有2种方法

方法一

在Scaffold里面添加属性resizeToAvoidBottomPadding,设置为false.就是内容不会随键盘弹出而滚动

image.png

方法二

在有textField的外面包裹一层SingleChildScrollView,这样内容就会随键盘弹出而滚动

image.png 文件 (2).gif

方法三

前面2个方法基本可以解决大部分的坑了,但有一种坑还是解决不了,就是像开篇那样的效果,上面有textField,底部有提交按钮,你就会发现有各种bug在里面, 最终的解决方案用到了一个第三方库

keyboard_avoider: ^0.1.2

import 'package:flutter/material.dart';
import 'package:keyboard_avoider/keyboard_avoider.dart';

class LayoutPage extends StatefulWidget {
  @override
  _LayoutPageState createState() => _LayoutPageState();
}

class _LayoutPageState extends State<LayoutPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("注册"),
        ),
        body: KeyboardAvoider(
          autoScroll: true,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                    height: 250,
                    child: Icon(Icons.camera,size: 200,color: Colors.purple,),
                  ),
                  TextField(
                    controller: TextEditingController(text: "账号"),
                  ),
                  TextField(
                    controller: TextEditingController(text: "验证码"),
                  ),
                  TextField(
                    controller: TextEditingController(text: "密码"),
                  ),
                  TextField(
                    controller: TextEditingController(text: "确认密码"),
                  ),
                ],
              ),
              Container(
                alignment: Alignment.center,
                width: double.infinity,
                color: Colors.red,
                margin: EdgeInsets.only(bottom: 20),
                height: 60,
                child: Text("提交",style: TextStyle(color: Colors.white,fontSize: 20),),
              )
            ],
          ),
        ));
  }

}

包裹一层KeyboardAvoider,并且设置属性autoScroll: true,这样就可以完美解决问题,看最终效果图

文件 (3).gif