Flutter TextField被键盘隐藏，尝试了很多解决方案但不起作用
Posted
技术标签:
【中文标题】Flutter TextField被键盘隐藏，尝试了很多解决方案但不起作用【英文标题】：Flutter TextField hidden by Keyboard, try many solution but not working 【发布时间】：2020-05-04 00:59:19 【问题描述】：当聚焦于 TextField 时，键盘会隐藏在 TextField 上方。下面我附上了带有代码的屏幕截图。请指导我解决此问题。
signup.dart
import 'package:flutter/material.dart';
import 'package:yfobs/utilities/desc.dart';
class SignUpPage extends StatefulWidget
static String tag = 'SignUpPage';
@override
_SignUpPageState createState() => _SignUpPageState();
class _SignUpPageState extends State<SignUpPage>
@override
Widget build(BuildContext context)
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(begin: Alignment.topCenter, colors: [
Color(0xFF832685),
Color(0xFFC81379),
])),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 80,
),
Padding(
padding: EdgeInsets.only(top: 0, bottom: 20, left: 20, right: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"SignUp",
style: TextStyle(color: Colors.white, fontSize: 28),
),
SizedBox(
height: 10,
),
Text(
"",
style: TextStyle(color: Colors.white, fontSize: 14),
),
],
),
),
SizedBox(
height: 20,
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60),
topRight: Radius.circular(60))),
child: Padding(
padding:
EdgeInsets.only(top: 20, bottom: 0, right: 20, left: 20),
child: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 1.5,
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(top: 60),
child: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 1.2,
height: 45,
padding: EdgeInsets.only(
top: 0, left: 16, right: 16, bottom: 0),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(50)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12, blurRadius: 5)
]),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
Icons.person,
color: Colors.grey,
),
hintText: 'Full Name',
),
),
),
Container(
width: MediaQuery.of(context).size.width / 1.2,
height: 45,
padding: EdgeInsets.only(
top: 0, left: 16, right: 16, bottom: 0),
margin: EdgeInsets.only(top: 16),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(50)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12, blurRadius: 5)
]),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
Icons.email,
color: Colors.grey,
),
hintText: 'Email',
),
),
),
Container(
width: MediaQuery.of(context).size.width / 1.2,
height: 45,
padding: EdgeInsets.only(
top: 0, left: 16, right: 16, bottom: 0),
margin: EdgeInsets.only(top: 16),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(50)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12, blurRadius: 5)
]),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
Icons.call,
color: Colors.grey,
),
hintText: 'Mobile Number',
),
),
),
Container(
width: MediaQuery.of(context).size.width / 1.2,
height: 45,
padding: EdgeInsets.only(
top: 0, left: 16, right: 16, bottom: 0),
margin: EdgeInsets.only(top: 16),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(50)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12, blurRadius: 5)
]),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
Icons.***_key,
color: Colors.grey,
),
hintText: 'Password',
),
obscureText: true,
),
),
Spacer(),
Container(
padding: EdgeInsets.all(16),
width: double.infinity,
child: RaisedButton(
elevation: 5.0,
padding: EdgeInsets.all(12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
color: Color(0xFFC81379),
child: Text(
'Sign Up'.toUpperCase(),
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
onPressed: ()
//Navigator.of(context).pushNamed('HomePage');
,
),
),
Align(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new FlatButton(
child: Padding(
padding: const EdgeInsets.only(
top: 0, right: 16, left: 16),
child: new Text(
Desc.alreadyUser,
style: TextStyle(color: Colors.grey),
),
),
onPressed: ()
Navigator.of(context)
.pushNamed('SignInPage');
,
color: Colors.white,
highlightColor: Colors.transparent,
),
]),
)
],
),
),
],
),
),
),
),
],
),
),
);
我正在尝试这个解决方案：
TextFormField hidden by keyboard - Flutter
Flutter/Dart Scrolling textfield above keyboard
in flutter page textfield hidden by keyboard
TextField gets hidden when the keyboard pops in
Flutter Keyboard makes textfield hide
Flutter TextFormField hidden by keyboard
When I select a Textfield the keyboard moves over it
【问题讨论】：
试试这个解决方案：***.com/questions/53586892/… 已经试过了兄弟，我也添加了链接，在我的问题中 【参考方案1】：你能用 SingleChildScrollView 包裹你的 Scaffold 的 body 并用 ConstrainedBox 包裹你的 Container
这是我得到的输出 https://prnt.sc/qozsvc
键盘仍将位于文本字段的顶部，但通过使用 SingleChildScrollView，屏幕将可滚动，因此您可以向下滚动并再次查看文本字段。
这个解决方案对我有用。
Scaffold(
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
child: Container(
.
.
.
【讨论】：
我试试，不行【参考方案2】：嘿，我使用 Expanded 小部件解决了您的问题，只需使用 Expanded 小部件包装您的 child content。并删除一些我们不需要的额外列，试试我的 Below 代码，让我知道它是否有效
import 'package:flutter/material.dart';
import 'package:yfobs/utilities/desc.dart';
class SignUpPage extends StatefulWidget
static String tag = 'SignUpPage';
@override
_SignUpPageState createState() => _SignUpPageState();
class _SignUpPageState extends State<SignUpPage>
@override
Widget build(BuildContext context)
return Scaffold(
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: true,
body: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(begin: Alignment.topCenter, colors: [
Color(0xFF832685),
Color(0xFFC81379),
])),
child: Column(
children: <Widget>[
Expanded(
child: signUpCardUI(context),
),
],
)
),
);
Widget signUpCardUI(BuildContext context)
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 80,
),
Padding(
padding: const EdgeInsets.only(left:20.0),
child: Text(
"SignUp",
style: TextStyle(color: Colors.white, fontSize: 28),
),
),
SizedBox(
height: 30,
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
),
child: Padding(
padding:
EdgeInsets.only(bottom: 0, right: 20, left: 20),
child: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 1.5,
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(top: 60),
child: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 1.2,
height: 40,
padding: EdgeInsets.only(
top: 0, left: 16, right: 16, bottom: 0),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(50)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12, blurRadius: 5)
]),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
Icons.person,
color: Colors.grey,
),
hintText: 'Full Name',
),
),
),
Container(
width: MediaQuery.of(context).size.width / 1.2,
height: 40,
padding: EdgeInsets.only(
top: 0, left: 16, right: 16, bottom: 0),
margin: EdgeInsets.only(top: 16),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(50)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12, blurRadius: 5)
]),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
Icons.email,
color: Colors.grey,
),
hintText: 'Email',
),
),
),
Container(
width: MediaQuery.of(context).size.width / 1.2,
height: 40,
padding: EdgeInsets.only(
top: 0, left: 16, right: 16, bottom: 0),
margin: EdgeInsets.only(top: 16),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(50)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12, blurRadius: 5)
]),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
Icons.call,
color: Colors.grey,
),
hintText: 'Mobile Number',
),
),
),
Container(
width: MediaQuery.of(context).size.width / 1.2,
height: 40,
padding: EdgeInsets.only(
top: 0, left: 16, right: 16, bottom: 0),
margin: EdgeInsets.only(top: 16),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(50)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12, blurRadius: 5)
]),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
Icons.***_key,
color: Colors.grey,
),
hintText: 'Password',
),
obscureText: true,
),
),
Spacer(),
Container(
padding: EdgeInsets.all(10),
width: double.infinity,
child: RaisedButton(
elevation: 5.0,
padding: EdgeInsets.all(12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
color: Color(0xFFC81379),
child: Text(
'Sign Up'.toUpperCase(),
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
onPressed: ()
//Navigator.of(context).pushNamed('HomePage');
,
),
),
Align(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new FlatButton(
child: Padding(
padding: const EdgeInsets.only(
top: 0, right: 16, left: 16),
child: new Text(
Desc.alreadyUser,
style: TextStyle(color: Colors.grey),
),
),
onPressed: ()
Navigator.of(context)
.pushNamed('SignInPage');
,
color: Colors.white,
highlightColor: Colors.transparent,
),
]),
)
],
),
),
],
),
),
),
],
),
);
快乐编码:)
【讨论】：
兄弟我想要我的页面滚动，你的代码给我这个输出prnt.sc/qoyt9u，你的代码减少了我的空间，而不是滚动我的页面【参考方案3】：您是否尝试过使用表单小部件？ 添加子作为 SingleChildScrollView 可以有 textformfield。
【讨论】：
Scaffold( body: SingleChildScrollView( child: Form( child: Container( ... body>form>SingleChildScrollView>column>Textformfield..... 像这样 请在线查看表单小部件 - 上述解决方案将起作用。【参考方案4】：这个对我有用signup.dart
import 'package:flutter/material.dart';
import 'package:yfobs/utilities/desc.dart';
ScrollController _scrollController; //<==
class SignUpPage extends StatefulWidget
static String tag = 'SignUpPage';
@override
_SignUpPageState createState() => _SignUpPageState();
class _SignUpPageState extends State<SignUpPage>
//Implementing scrollController by detecting keyboard //<==
bool scrolled = false;
_scrollListener()
if (!scrolled && MediaQuery.of(context).viewInsets.bottom != 0)
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: Duration(milliseconds: 100),
curve: Curves.easeOut,
);
scrolled = true;
if (MediaQuery.of(context).viewInsets.bottom == 0)
scrolled = false;
@override
void initState()
_scrollController = ScrollController();
_scrollController.addListener(_scrollListener);
super.initState();
Widget build(BuildContext context)
.
.
//rest is same
.
.
【讨论】：
以上是关于Flutter TextField被键盘隐藏，尝试了很多解决方案但不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Flutter：使用初始值文本时如何隐藏TextField文本指针（光标）（Android）
flutter TextField 输入框被软键盘挡住的解决方案