如何自动滚动到网格视图结束？

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个项目。我知道这只是一个草图，但我认为它可以带你到那里。