当专注于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.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( . . .