web-dev-qa-db-fra.com

Comment déplacer la feuille de fond avec le clavier qui a un champ de texte (la mise au point automatique est vraie)?

J'essaie de créer une feuille de fond qui a un champ de texte et la mise au point automatique est définie sur true pour que le clavier s'affiche. Mais, la feuille de fond est chevauchée par le clavier. Existe-t-il un moyen de déplacer la feuille de fond au-dessus du clavier?

Padding(
  padding:
      EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  child: Column(children: <Widget>[
    TextField(
      autofocus: true,
      decoration: InputDecoration(hintText: 'Title'),
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Additional details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),]);
dartflutterflutter-layout
15
Manjunath Rao

Après avoir combiné différentes solutions, j'ai obtenu ceci:

si vous ne voulez pas qu'il soit Plein écran et que vous ne voulez pas utiliser la solution de contournement Padding

  showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      enableDrag: true,
      isDismissible: true,
      useRootNavigator: true,
      builder: (BuildContext ctx) {
        return Scaffold( // use CupertinoPageScaffold for iOS
          backgroundColor: Colors.transparent,
          resizeToAvoidBottomInset: true, // important
          body: SingleChildScrollView(
            child: Form(
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    TextFormField(),
                    TextFormField(),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );

on Flutter (Channel master, v1.15.3-pre.37, sur Mac OS X 10.15.2 19C57, locale en-US)

0
tewshi

Essaye ça

Ma solution est

  • Utilisez isScrollControlled: true,
  • Ajouter un remplissage padding: EdgeInsets.only( bottom: MediaQuery.of(context).viewInsets.bottom)
  • Enveloppez votre mise en page dans SingleChildScrollView

EXEMPLE DE CODE

Future<void> future = showModalBottomSheet(
    context: context,
    isDismissible: true,
    isScrollControlled: true,
    backgroundColor: Colors.white.withOpacity(0.2),
    builder: (context) => SingleChildScrollView(
          child: GestureDetector(
              child: Padding(
            padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Column(
                children: <Widget>[
                 // add your widget here
                ],
              ),
            ),
          )),
        ));
0
Nilesh Rathod

Enveloppez le Form avec un widget Scaffold, puis enveloppez le TextFormField avec un SingleChildScrollView:


 return Container(
          height: screenHeight * .66,
          child: Scaffold(
             body: Form(
               key: _form,
               child: SingleChildScrollView(
                 child:TextFormField()
               )
              )
             )
           )
0
MFC creations