完美解决flutter 键盘遮挡/超出的坑
2020-08-05 本文已影响0人
微风_10a5

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

说实话,我也在网上找了一些解决键盘超出,覆盖的方法,大概有2种方法
方法一
在Scaffold里面添加属性resizeToAvoidBottomPadding,设置为false.就是内容不会随键盘弹出而滚动

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


方法三
前面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,这样就可以完美解决问题,看最终效果图
