由于键盘显示导致Android TV出现溢出错误

我在登录屏幕上看到可怕的黑色和黄色条纹,这会阻止用户在键盘弹出时登录。过去,我尝试过在登录屏幕上修复此错误,但没有运气。这是屏幕截图。

由于键盘显示导致Android TV出现溢出错误

这是有问题的代码:

class LoginScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context){
   return new Scaffold(
     body: Container (
    decoration: BoxDecoration(
        gradient: new LinearGradient(
            colors: [Color.fromRGBO(1,89,99,1.0),Color.fromRGBO(1,1.0)],begin: Alignment.bottomLeft,end: Alignment.topRight
        )
    ),child: new Column(

      mainAxisAlignment: MainAxisAlignment.center,children:[
                           Container(
                                    margin: EdgeInsets.all(20.0),child:Image.asset('lib/img/LBConnect2_white_small_trans.png'),),new LoginForm(),]) 

                             ),);




   }

登录表单类代码

class LoginForm extends StatefulWidget {
 createState()
 {
   return new LoginFormState();
   }

} 

class LoginFormState extends State<LoginForm> with Validation
{

   final formKey = GlobalKey<FormState>();
   String emailaddress = '';
   String passWord = '';
   String token;
   Widget build(context) {
   return  SingleChildScrollView (
       child: Container(
  margin: EdgeInsets.all(20.0),child: Form(
    key: formKey,child: Column(
       children: [
            emailField(),passwordField(),Container(
         margin: EdgeInsets.all(20.0),child:OutlineButton(
        child: Text('LOGIN'),textColor: Colors.white,shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),onpressed: (){
          if(formKey.currentState.validate()){

           formKey.currentState.save();
           loginUser(emailaddress,passWord,token);

              }
            }
            )
             ),Container(
            margin: EdgeInsets.all(10.0),child: OutlineButton(
             child: Text('Create account'),onpressed: () { 
              Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => 
    new ProfileStep1()));
             },],)
)

);

}

Widget emailField()
{
        return TextFormField(
        keyboardType: TextInputType.emailaddress,style: new TextStyle(color: Colors.white),decoration : InputDecoration(
           labelText: 'Email Address',labelStyle: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),validator: validateEmail,onSaved: (String value){

           emailaddress = value;

         },);

}

  Widget passwordField()
  {
     return TextFormField(
         style: new TextStyle(color: Colors.white),obscureText: true,decoration : InputDecoration(
           labelText: 'Password',validator: validatePassword,onSaved: (String value){

            passWord = value;
         },);
  }


Future<User> loginUser(String username,String password,String token ) async {
 final FirebaseMessaging _fcm = FirebaseMessaging();
 String token = await _fcm.getToken();
 //print(token);
  final response =
      await http.post('api/Login',headers: {"Content-Type": "application/json",'accept': 'application/json',},body: json.encode({'email' : username,'password' : password,'token': token}));

  if (response.statusCode == 200) {
   // If the call to the server was successful,parse the JSON
    User _user;
  _user = User.fromJson(json.decode(response.body));
  if(_user.userId.length > 1)
  {
  // Check user group and send them to proper home screen
  if (_user.groupName == 'Member')
   {
  // Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new FirebaseTest()));

   Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new FlutterReduxApp(user: _user)));
   }
   // Caregiver has logged in
   else{

     Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new LoginChoose(user: _user)));
   }
}

return _user;

  } else {
    // If that call was not successful,throw an error.
    throw Exception('Failed to load user');
  }

}

}

仅在单击文本字段时显示键盘时才会发生。如您所见,登录按钮不可访问。

qipaoshaonian 回答:由于键盘显示导致Android TV出现溢出错误

您可以将loginForm包装在SingleChildScrollView中,以防溢出,它允许用户向下滚动

SingleChildScrollView(
   child : LoginForm();
)

OR

当空间不足时,您可以“牺牲”图像的高度,为此,请使用Flexible

Column(
    children:[
        Flexible(child:Center(    
        child:Image.asset('lib/img/LBConnect2_white_small_trans.png'),)),new LoginForm(),]) 

还有更多选择,包括使用OrientationBuilder来响应风景,等等。那两个例子是我会用的两个例子

本文链接:https://www.f2er.com/3164262.html

大家都在问