web-dev-qa-db-fra.com

Le clavier pousse le contenu vers le haut / redimensionne l'écran

Modifier :

J'ai reçu un rapport indiquant qu'il s'agit d'un doublon de Lorsque le clavier apparaît, les widgets Flutter se redimensionnent. Comment éviter cela? . Bien que cela soit lié, c'est un problème différent. Je veux que le clavier chevauche l'interface utilisateur jusqu'à ce qu'il atteigne le TextField qui a le focus. Il s'agit d'un comportement par défaut sur Android

Original:

Je suis un développeur Android et je viens de commencer avec Flutter. Je voulais créer un écran de connexion. Je voulais une image au-dessus de TextField. Alors j'ai pensé, j'utilise un Stack pour avoir l'image en arrière-plan et quelques TextField ci-dessous.

Le problème est que dès que le clavier apparaît, il pousse tout le contenu vers le haut. Sur Android, le clavier ne pousse généralement que si nécessaire et uniquement jusqu'à ce qu'il atteigne le EditText.

J'ai essayé de définir resizeToAvoidBottomPadding sur false, mais ensuite rien ne bouge (bien sûr) et les TextField sont couverts par le clavier.

Je me souviens d'avoir joué avec iOS dans le passé, c'est un comportement par défaut, peut-être devrais-je reconsidérer ma disposition?

Pour le moment, je l'enveloppe dans un ListView pour que l'utilisateur puisse faire défiler lorsque le clavier apparaît.

Ceci est ma mise en page (juste pour les tests)

@override
Widget build(BuildContext context) {
  this.context = context;
  return new Scaffold(
      key: _scaffoldKey,
      body: new Stack(
          children: <Widget>[loginImage(), new Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[new TextField(), new TextField(),
        new TextField(), new TextField(),
        new TextField(), new TextField()],
      )])
  );
}

enter image description here : enter image description here

flutterflutter-layout
6
Boy

J'ai rencontré ce problème lors de la configuration de autoFocus: true Dans une CupertinoTextField() et je l'ai résolu en définissant resizeToAvoidBottomInset: false Dans Scaffold().

resizeToAvoidBottomPadding est désormais obsolète.

tilisez resizeToAvoidBottomInset.

14
Hahnemann

Je pense que cela fait ce que vous voulez. Le plus gros problème est que vous avez choisi d'utiliser une pile. Une pile n'est utilisée que si vous souhaitez empiler des objets les uns sur les autres. Dans ce cas, vous ne voulez pas ça. Le placer dans une colonne et remplir l'espace ouvert avec une extension (ce widget se développe en espace utilisable et pousse tout vers le bas) est la façon dont je le fais. Je ne dis pas que c'est la meilleure façon (seulement 2 semaines d'expérience de flottement). Mais c'est un moyen. J'espère que ça aide!

import 'package:flutter/material.Dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Flutter Demo',
            theme: new ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: new Scaffold(
                body: new Column(
                    children: <Widget>[
                        new Center(
                            child: new Container(
                                height: 150.0,
                                width: 75.0,
                                color: Colors.red,
                            ),
                        ),
                        new Expanded(
                            child: new Container(),
                        ),
                        new Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: <Widget>[
                                new TextField(),
                                new TextField(),
                                new TextField(),
                                new TextField(),
                                new TextField(),
                                new TextField()
                            ],
                        ),
                    ],
                ),
            ),
        );
    }
}
2
Kevin Walter

Au lieu de Stack, je vous suggère d'utiliser ListView. Vous pouvez également essayer SingleChildScrollView (mais vous devrez peut-être ajouter des codes supplémentaires pour l'implémentation).

Bon codage ...

1
The Dead Guy