Comment faire défiler une page dans flutter

Question

Mon code pour une page est comme ceci. J'ai besoin de faire défiler la partie en dessous de la barre d'application.

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(... ),
      body: new Stack(
        children: <Widget>[
          new Container(
            decoration: BoxDecoration(
                image: DecorationImage(...),
          new Column(children: [
            new Container(...),
            new Container(...... ),
            new Padding(
              child: SizedBox(
                child: RaisedButton(..),
            ),
            new Divider(),
            new Column(
              children: <Widget>[
                new Container(
                  child: new Row(
                    children: <Widget>[
                      new Expanded(
                        child: new Text(  ),
                      ),
                      new IconButton(
                        icon: IconButton(..),
                        onPressed: () {
                          _changed(true, "type");
                        },
                      ),
                    ],
                  ),
                ),
                visibilityPropertyType
                    ? new Container(
                        margin: EdgeInsets.all(24.0),
                        child: new Column(
                          children: <Widget>[
                            new Row(
                              children: <Widget>[
                                new Expanded(... ),
                                new RaisedButton(..)
                              ],
                            ),
                            new Padding(
                              padding: const EdgeInsets.only(top: 10.0),
                              child: new Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                children: <Widget>[
                                  new Column(
                                    children: <Widget>[
                                      new Row(  
                                        children: <Widget>[.. ]),
                                      new Row(
                                        children: <Widget>[]),
                                      new Row(
                                        children: <Widget>[]),
                                      new Row(
                                        children: <Widget>[],
                                  ),
                                  new Column(
                                    children: <Widget>[
                                      new Row(
                                        children: <Widget>[],
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ))
                    : new Container(),
              ],
            ),
            new Divider(
              color: Colors.white,
            )
          ])
        ],
      ),
    );
  }

J'ai besoin de faire défiler une partie du corps. Comment puis-je mettre en œuvre ce défilement ? S'il existe une méthode de défilement personnalisée, j'ai déjà essayé. Scrollable et SingleChildScrollView mais ne répond pas à mes besoins. Lorsque j'ai utilisé SinglechildScrollView il se produit une erreur BoxConstraints force une hauteur infinie. si j'ai supprimé LayoutBuilder il provoque A RenderFlex overflowed by 22 pixels on the bottom erreur

Answer 1

Utilisez LayoutBuilder et obtenir la sortie que vous voulez

Enveloppez le SingleChildScrollView avec LayoutBuilder et implémenter la fonction Builder.

nous pouvons utiliser un LayoutBuilder pour obtenir la boîte contains ou la quantité d'espace disponible.

LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints){
      return SingleChildScrollView(
        child: Stack(
          children: <Widget>[
            Container(
              height: constraints.maxHeight,
            ),
            topTitle(context),
            middleView(context),
            bottomView(context),
          ],
        ),
      );
    }
)

Answer 2

Regardez ça, ça peut vous aider.

class ScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new LayoutBuilder(
      builder:
          (BuildContext context, BoxConstraints viewportConstraints) {
        return SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: ConstrainedBox(
            constraints: BoxConstraints(minHeight: viewportConstraints.maxHeight),
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("Hello world!!"),
                  //You can add another children
            ]),
          ),
        );
      },
    );
  }
}

Answer 3

Vous pouvez faire défiler n'importe quelle partie du contenu de deux façons ...

1. vous pouvez utiliser directement la vue en liste
2. ou SingleChildScrollView

La plupart du temps, j'utilise directement la vue Liste lorsqu'il y a une intraction du clavier dans cet écran spécifique afin que le contenu ne soit pas recouvert par le clavier et qu'il défile en haut de l'écran .....

cette astuce sera utile de nombreuses fois....

Answer 4

Très facile si vous utilisez déjà un statelessWidget : regardez mon code.

class _MyThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Understanding Material-Cards'),
      ),
      body: SingleChildScrollView(
          child: Column(
        children: <Widget>[
          _buildStack(),
          _buildCard(),
          SingleCard(),
          _inkwellCard()
        ],
      )),
    );
  }
}