Flutter: Comment centrer en bas un bouton dans un ListView?

grizzasd

J'ai besoin de centrer en bas un bouton contenu dans un fichier ListView. Par bas, je veux dire en bas de l'écran, ou si le contenu de l'écran est plus long que la hauteur de l'écran, à la fin du contenu.

Je peux le faire en utilisant un Columnavec un Spacerwidget car la hauteur est définie, mais mon écran comporte une saisie de texte. Si j'utilise a Columnau lieu de a ListView, l'écran déborde lorsque je tape.

Comment puis-je non plus

  1. En bas au centre un bouton, ou
  2. Utilisez a Columnmais empêchez l'écran de se redimensionner ou de déborder lors de la saisie; Je voudrais qu'il puisse faire défiler l'éther ou simplement que le clavier recouvre le contenu de l'écran lors de la frappe.

Exemple de code de base:

return Scaffold(
      body: Center(
        child: Container(
          width: workingWidth,
          child: Center(
            child: ListView(children: <Widget>[
              ScreenHeader("Tell Us a Little About Yourself"),
              TextFormField(
                maxLines: 16,
                controller: bioController,
                autocorrect: true,
                textCapitalization: TextCapitalization.sentences,
                maxLength: 500,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(paddingH5),
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: colorPrimary)),
                  border: UnderlineInputBorder(
                      borderSide: BorderSide(color: colorMuted)),
                  hintText: "Enter your bio here...",
                  hintStyle: textMuted,
                ),
              ),
              Spacer(), //This doesn't work because I am using a ListView instead of a Column
              RoundedButton(
                  buttonText: 'Continue',
                  buttonStyle: buttonPrimary,
                  onPressed: () {}
            ),
            ],)
          ),
        ),
      ),
    );
haroldolivieri

Pour utiliser une Columnerreur sans bandes jaunes / noires lors de l'ouverture du clavier, vous devez l'envelopper dans un SingleChildScrollView, mais Spacerne fonctionnera pas dans ce cas si vous ne déclarez pas la hauteur de son RenderFlexparent.

Vous pouvez utiliser MediaQuery.of(context).size.heightpour obtenir la taille de l'écran sur son contexte et la définir sur votre Container.

À la fin, vous pouvez obtenir la mise en page souhaitée avec ceci:

return Scaffold(
              body: SingleChildScrollView(
                child: Container(
                  width: workingWidth,
                  height: MediaQuery.of(context).size.height,
                  child: Column(
                    children: <Widget>[
                      ScreenHeader("Tell Us a Little About Yourself"),
                      TextFormField(
                        maxLines: 16,
                        controller: bioController,
                        autocorrect: true,
                        textCapitalization: TextCapitalization.sentences,
                        maxLength: 500,
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.all(paddingH5),
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: colorPrimary)),
                          border: UnderlineInputBorder(
                              borderSide: BorderSide(color: colorMuted)),
                          hintText: "Enter your bio here...",
                          hintStyle: textMuted,
                        ),
                      ),
                      Spacer(),
                      RoundedButton(
                          buttonText: 'Continue',
                          buttonStyle: buttonPrimary,
                          onPressed: () {}
                      ),
                    ],
                  ),
                ),
              ),
            );

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

TOP liste

  1. 1

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  2. 2

    Enregistrer le chemin de l'image de la galerie vers la base de données de la salle et l'afficher dans la liste des recycleurs

  3. 3

    Microsoft.WebApplication.targets

  4. 4

    knn classification 10 plis de l'outil et du tri

  5. 5

    Quelle est la relation entre le modèle et le tableau ? C'est compliqué

  6. 6

    Créer un système Buzzer à l'aide de python

  7. 7

    Fonction de puissance en Java

  8. 8

    opérations en virgule flottante dans go

  9. 9

    Comment définir la couleur de l'intersection dans un diagramme de Venn?

  10. 10

    Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative

  11. 11

    comment supprimer "compte de connexion google" à des fins de développement - actions sur google

  12. 12

    AutoMapper.Collection.EFCore - Erreur générée lors de la configuration

  13. 13

    Je continue à obtenir l'objet 'WSGIRequest' n'a pas d'attribut 'Get' sur django

  14. 14

    Comment remplir les valeurs manquantes avec plusieurs colonnes dans R

  15. 15

    Comment puis-je ajouter un UIView sous mon contrôleur de barre d'onglets par programme?

  16. 16

    Yat-il un référentiel maven application Java à démarrer rapidement 11

  17. 17

    Comment rechercher des éléments dans une ArrayList? - Java

  18. 18

    Comment utiliser HttpClient avec TOUT cert ssl, quelle que soit la « mauvaise » est

  19. 19

    Comment créer un bot à compte à rebours dans Discord en utilisant Python

  20. 20

    Sélectionnez le bouton radio sur la saisie de texte

  21. 21

    Placez le modeBar en haut au centre à l'aide de plotly.js

chaudétiquette

Archive