如何自動滾動到網格視圖結束？

Question

當我將項目添加到網格視圖的末尾時，我希望用戶看到添加的內容。下面是我的意思的例子：

用戶通過按下+圖標添加項目。問題是，在項目14之後，沒有反饋顯示任何項目已被添加。如何將它添加到列表中時自動滾動到最後一個項目？

（加分點：我如何可以滾動到當它在列表中的中間位置添加的第n項）

Here is an answer for scrolling to the end of a list view，但如果我顛倒順序列表，然後它會看起來很奇怪有時有頂部一行'缺少'項目。

這裏是我的代碼：

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

聲明一個滾動控制器，並用它移動到你想要的點。這是一個滾動到最後一個元素的例子。請注意，滾動控制器顯式聲明所以你不能發出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), 
    ), 
    ); 
    } 
} 

關於「加分」我不是那麼熟練ScrollControllers但據我得到的.animateTo()方法要求作爲第一輸入雙，設置在那裏的scrollpoint：原則上，把你想要滾動到

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

調整此值取決於每行網格有多少對象第i個項目。我知道這只是一個草圖，但我認爲它可以帶你到那裏。