隐藏在键盘颤动下的文本框

问题描述 投票:0回答:1

在使用文本字段使键盘向上移动之前,但现在它没有消失并隐藏在键盘下。我已经尝试了Internet中的所有解决方案,例如resizeToAvoidBottomInset,resizeToAvoidBottomPadding等,但是它们都不适合我。这非常令人沮丧。你们可以帮我吗?

import 'package:darpandentalhome/services/auth.dart';
import 'package:darpandentalhome/shared/const.dart';
import 'package:darpandentalhome/shared/loading.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter_svg/flutter_svg.dart';

class SignIn extends StatefulWidget {

  final Function toggleView;
  SignIn({this.toggleView});

  @override
  _SignInState createState() => _SignInState();
}

class _SignInState extends State<SignIn> {

  final AuthService _auth = AuthService();
  final _formKey = GlobalKey<FormState>();
  GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

  bool loading = false;

  String email = '';
  String password = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      backgroundColor: Color(0xfff9f9f9),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Container(
              width: MediaQuery. of(context). size. width,
              child: SvgPicture.asset('assets/images/Illustration.svg', fit: BoxFit.cover,),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Center(
                child: Text(
                  'Darpan Dental Home',
                  style: GoogleFonts.rubik(
                    textStyle: TextStyle(
                      fontSize: 35,
                      fontWeight: FontWeight.w500
                    ),
                  ),
                ),
              ),
            ),
            loading ? Loading() : SizedBox(height: 6),
            Form(
              key: _formKey,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                      padding: const EdgeInsets.fromLTRB(25,10,20,0),
                      child: Text(
                        'Email:',
                        style: GoogleFonts.rubik(
                          textStyle: TextStyle(
                              fontSize: 18,
                          ),
                        )
                      )
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(20,10,20,10),
                    child: TextFormField(
                      textInputAction: TextInputAction.next,
                      onEditingComplete: () => FocusScope.of(context).nextFocus(),
                      validator: (val) => val.isEmpty ? "Please Enter your email" : null,
                      onChanged: (val) {
                        setState(() {
                          email = val;
                        });
                      },
                      style: GoogleFonts.rubik(
                        textStyle: TextStyle(
                          fontSize: 15,
                        ),
                      ),
                      cursorColor: Colors.black,
                      decoration: textInputDecoration.copyWith(hintText: '[email protected]'),
                    ),
                  ),
                  Padding(
                      padding: const EdgeInsets.fromLTRB(25,10,20,0),
                      child: Text(
                        'Password:',
                          style: GoogleFonts.rubik(
                            textStyle: TextStyle(
                              fontSize: 18,
                            ),
                          )
                      )
                  ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(20,10,20,20),
                      child: TextFormField(
                        textInputAction: TextInputAction.done,
                        validator: (val) => val.length<6 ? "Please enter a password 6+ character" : null,
                        onChanged: (val) {
                          setState(() {
                            password = val;
                          });
                        },
                          style: GoogleFonts.rubik(
                            textStyle: TextStyle(
                              fontSize: 15,
                            ),
                          ),
                          obscureText: true,
                          cursorColor: Colors.black,
                          decoration: textInputDecoration.copyWith(hintText: '**********'),
                      ),
                  )
                ],
              ),
            ),
            MaterialButton(
              height: 55,
              minWidth: 230,
              elevation: 0,
              shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(10.0)),
              color: Color(0xff4CBBB9),
              onPressed: () async {
                if(_formKey.currentState.validate()){
                  setState(() {
                    loading = true;
                  });
                  dynamic result = await _auth.signInWithEmailAndPassword(email, password);
                  if(result==null) {
                    setState(() {
                      loading = false;
                    });
                    _scaffoldKey.currentState.showSnackBar(
                        SnackBar(
                          behavior: SnackBarBehavior.floating,
                          elevation: 0,
                          duration: Duration(milliseconds: 800),
                          backgroundColor: Colors.red[700],
                          content: Text(
                              'Error Signing In',
                              style: GoogleFonts.rubik(
                                textStyle: TextStyle(
                                    color: Colors.white,
                                    fontSize: 18,
                                  letterSpacing: 1.5
                                ),
                              )
                          ),
                        )
                    );
                  }
                }
              },
              child: Text(
                'Sign In',
                  style: GoogleFonts.rubik(
                    textStyle: TextStyle(
                      fontSize: 17,
                      color: Colors.white,
                      fontWeight: FontWeight.w500
                    ),
                  )
              ),
            ),
            Center(
                child: Padding(
                  padding: EdgeInsets.only(top: 10, bottom: 10),
                  child: InkWell(
                    onTap: () {
                      widget.toggleView();
                    },
                    child: Text(
                      'Want a new account?',
                      style: GoogleFonts.rubik(
                        textStyle: TextStyle(
                          fontSize: 15,
                          color: Color(0xffCE5B51),
                        ),
                      ),
                    ),
                  ),
                )
            ),
          ],
        ),
      ),
    );
  }
}

Screen after keyboard is up

Screen before keyboard is up

flutter flutter-layout
1个回答
0
投票
MediaQuery.of(context).viewInsets.bottom

这使您可以在屏幕上弹出的键盘高度。

padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom + 15 

因此,您可以根据需要在输入中添加底部填充(常规填充+键盘高度)。

您还应该用SingleChildScrollView

包装页面,以便在由于键盘出现时引入额外的填充而使内容增大到设备高度以上时滚动显示。

Soution1

1)使用WidgetsBindingObserver

mixin

2)将scrollController

添加到SingleChildScrollView

3)使用didChangeMetrics

监听键盘的存在并根据需要滚动。
class _SignInState extends State<SignIn> with WidgetsBindingObserver{

ScrollController _scrollController = new ScrollController();

void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    _scrollController.jumpTo(200);
  }

[内部脚手架小部件将控制器添加到SingleChildScrollView

  body: SingleChildScrollView(
        controller: _scrollController,
    )

解决方案2

按键盘的高度滚动页面中的每个内容可能是最佳解决方案。但是另一个想法可能是像这样使用图像的高度

Container(
              width: MediaQuery. of(context). size. width,
              height: 350-MediaQuery.of(context).viewInsets.bottom,
              child: SvgPicture.asset('assets/images/Illustration.svg', fit: BoxFit.cover,),
            ),

我使用350的高度作为初始高度。您可以以此高度进行游戏。但是请确保高度不会降低为负数。

© www.soinside.com 2019 - 2024. All rights reserved.