键盘隐藏了Flutter TextField,请尝试许多解决方案但不起作用

当专注于TextField时,键盘将隐藏在TextField上方。下面我附上了带有代码的屏幕截图。请指导我解决此问题。

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.vpn_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,

),

]),

)

],

),

),

],

),

),

),

),

],

),

),

);

}

}

回答:

你能用SingleChildScrollView包裹脚手架的主体并用ConstrainedBox包裹容器吗

这是我得到的输出https://prnt.sc/qozsvc

键盘仍将位于文本字段的顶部,但是通过使用SingleChildScrollView,屏幕将可滚动,因此您可以向下滚动并再次查看文本字段。

这个解决方案对我有用。

Scaffold(

body: SingleChildScrollView(

child: ConstrainedBox(

constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),

child: Container(

.

.

.

以上是 键盘隐藏了Flutter TextField,请尝试许多解决方案但不起作用 的全部内容, 来源链接: utcz.com/qa/432171.html

回到顶部