0
votes

Faire défiler juste un conteneur spécifique

J'ai l'écran suivant et j'ai besoin que la zone d'image soit corrigée et que la pièce de formulaire doit être défilable lorsque le clavier s'ouvre:

 Vue de clavier effondré Vue de clavier expansé p>

Pourquoi le défilement ne fonctionne pas pour la pièce de formulaire? J'ai essayé les deux avec listview code> et singlechecildscrollview code>, mais cela ne fonctionne que si j'enmène tout le contenu (image et formulaire) avec elle. P>

import 'package:ahgora/models/user.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final _user = User();
  final _formKey = GlobalKey<FormState>();
  final _tokenNode = FocusNode();
  final _userNode = FocusNode();
  final _passwordNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Builder(
          builder: (context) => Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  child: Image.asset("assets/images/logo.jpg",
                      fit: BoxFit.scaleDown,
                      width: 160,
                      alignment: Alignment.center),
                  margin: EdgeInsets.only(top: 100.0),
                ),
                ListView(shrinkWrap: true, children: <Widget>[
                      Container(
                        margin: EdgeInsets.all(20.0),
                        child: TextFormField(
                          textInputAction: TextInputAction.next,
                          focusNode: _tokenNode,
                          onFieldSubmitted: (term) {
                            _fieldFocusChange(context, _tokenNode, _userNode);
                          },
                          decoration: InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'Chave ',
                          ),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.all(20.0),
                        child: TextFormField(
                          textInputAction: TextInputAction.next,
                          focusNode: _userNode,
                          onFieldSubmitted: (term) {
                            _fieldFocusChange(
                                context, _userNode, _passwordNode);
                          },
                          decoration: InputDecoration(
                              border: OutlineInputBorder(),
                              labelText: 'Usuário'),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.all(20.0),
                        child: TextFormField(
                          textInputAction: TextInputAction.next,
                          focusNode: _passwordNode,
                          decoration: InputDecoration(
                              border: OutlineInputBorder(), labelText: 'Senha'),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.all(20.0),
                        child: MaterialButton(
                          color: Colors.redAccent,
                          textColor: Colors.white,
                          onPressed: () => {},
                          child: Text('Registrar'),
                        ),
                      )
                    ]),
              ],
            ),
          ),
        ),
      ),
    );
  }

  _fieldFocusChange(
      BuildContext context, FocusNode currentFocus, FocusNode nextFocus) {
    currentFocus.unfocus();
    FocusScope.of(context).requestFocus(nextFocus);
  }
}


4 commentaires

Avez-vous essayé avec ResizetoAvoidBottPPAdding False dans l'échafaud?


Oui. Même problème avec resizetoavoidbottompadding .


Désolé, il est obsolète, essayez avec resizetoavoidebottominset


Toujours le même problème. Le défilement ne fonctionne pas lorsque singlechechildscrollview est l'un des enfants d'une colonne .


3 Réponses :


0
votes

Il vous suffit de terminer votre colonne avec SingLechechLildScrollView Widget et vous obtiendrez votre soultion.

SingleChildScrollView(child: Column( children: <Widget>[]))


1 commentaires

Si je enveloppe ma colonne, tout l'écran fera défiler et ce n'est pas ce que je veux.



1
votes

J'ai fait de petits changements, si possible, essayez ceci. XXX

 Entrez la description de l'image ici

deuxième approche avec Développez xxx

Entrez la description de l'image ici


1 commentaires

La deuxième approche est celle dont j'avais besoin. Merci. Travaillé parfaitement.



0
votes

// Si vous avez besoin de faire défiler uniquement la partie du formulaire,

Enveloppez simplement votre widget ListView avec widget flexible. xxx

// Si vous avez besoin de faire défiler Toute la page

Vous devez envelopper votre formulaire Widget dans le widget SingLechechildScrollView.

SingLechechLildScrollView ( ScrollDirection: Axis.vertical, Enfant: Formulaire () // Enveloppez votre formulaire en entier ici. )


1 commentaires

Ce n'est pas ce dont j'ai besoin. J'ai besoin d'un rouleau partiel, pas un défilement complet de l'écran.