Wie scrollt man automatisch zum Ende der Rasteransicht?

Question

Wenn ich Elemente am Ende einer Rasteransicht hinzufüge, möchte ich, dass der Benutzer sieht, was hinzugefügt wurde. Hier ist ein Beispiel dafür, was ich meine:

Der Anwender fügt Elemente durch Drücken auf das Symbol +. Das Problem ist, dass es nach Punkt 14 keine Rückmeldung gibt, um anzuzeigen, dass ein Element hinzugefügt wurde. Wie kann ich automatisch zum letzten Element blättern, wenn es zur Liste hinzugefügt wird?

(Bonuspunkte: wie kann ich navigieren Sie zu dem n-ten Element, wenn es irgendwo in der Mitte der Liste hinzugefügt wird)

Here is an answer for scrolling to the end of a list view, aber wenn ich die Reihenfolge der Liste umkehren, dann wird es seltsam aussehen zu haben manchmal "fehlende" Elemente in der oberen Reihe.

Hier ist mein Code:

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     title: 'Flutter Demo', 
     theme: new ThemeData(
     primarySwatch: Colors.blue, 
    ), 
     home: new MyHomePage(), 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    @override 
    _MyHomePageState createState() => new _MyHomePageState(); 
} 

class _MyHomePageState extends State<MyHomePage> { 
    int _counter = 0; 

    @override 
    Widget build(BuildContext context) { 
    List items = []; 
    for (int i = 0; i < _counter; i++) { 
     items.add(new Text("Item $i")); 
    } 
    return new Scaffold(
     appBar: new AppBar(title: new Text("Scroll To End Test")), 
     body: new GridView.extent(
     primary: true, 
     maxCrossAxisExtent: 150.0, 
     children: items, 
    ), 
     floatingActionButton: new FloatingActionButton(
     onPressed:() { 
      setState(() { 
      _counter++; 
      }); 
     }, 
     tooltip: 'Increment', 
     child: new Icon(Icons.add), 
    ), 
    ); 
    } 
} 

Answer 1

eine Scroll-Controller deklarieren und verwenden Sie es auf den Punkt, den Sie wünschen, zu bewegen. Hier ist ein Beispiel, das zum letzten Element scrollt. Beachten Sie, dass der Scroll-Controller ausdrücklich so deklariert ist, kann man nicht primary: true

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     title: 'Flutter Demo', 
     theme: new ThemeData(
     primarySwatch: Colors.blue, 
    ), 
     home: new MyHomePage(), 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    @override 
    _MyHomePageState createState() => new _MyHomePageState(); 
} 

class _MyHomePageState extends State<MyHomePage> { 
    int _counter = 0; 

    ScrollController _scrollController;         // NEW 

    @override               // NEW 
    void initState() {             // NEW 
    super.initState();            // NEW 
    _scrollController = new ScrollController(      // NEW 
     initialScrollOffset: 0.0,          // NEW 
     keepScrollOffset: true,           // NEW 
    ); 
    } 

    void _toEnd() {              // NEW 
    _scrollController.animateTo(          // NEW 
     _scrollController.position.maxScrollExtent,      // NEW 
     duration: const Duration(milliseconds: 500),     // NEW 
     curve: Curves.ease,            // NEW 
    );                // NEW 
    }                 // NEW 

    @override 
    Widget build(BuildContext context) { 
    List items = []; 
    for (int i = 0; i < _counter; i++) { 
     items.add(new Text("Item $i")); 
    } 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text("Scroll To End Test"), 
     actions: <Widget>[           // NEW 
      new IconButton(           // NEW 
       icon: new Icon(Icons.arrow_downward), onPressed: _toEnd)// NEW 
     ],               // NEW 
    ), 
     body: new GridView.extent(
     //primary: true, // REMOVED 
     maxCrossAxisExtent: 150.0, 
     children: items, 
     controller: _scrollController,        // NEW 
    ), 
     floatingActionButton: new FloatingActionButton(
     onPressed:() { 
      setState(() { 
      _counter++; 
      }); 
     }, 
     tooltip: 'Increment', 
     child: new Icon(Icons.add), 
    ), 
    ); 
    } 
} 

über den „Bonuspunkt“ Ausgabe bin ich nicht so geschickt im Umgang mit ScrollControllers aber soweit ich erhielt, die .animateTo() Methode fragt als erster Eingang für ein Doppelzimmer, Einstellung gibt die Scroll: im Prinzip die wollen diesen Wert auf

var cursor = i/(# items) * _scrollController.position.maxScrollExtent 

blättern Sie i-ten Artikel setzen Einstellung je nachdem, wie viele Objekte pro Zeile Ihr Gitter hat. Ich weiß, das ist nur eine Skizze, aber ich denke, es kann dich dorthin führen.