Programowe przewijanie do końca ListView

Mam przewijaną listę, w ListViewktórej liczba elementów może zmieniać się dynamicznie. Za każdym razem, gdy na końcu listy zostanie dodany nowy element, chciałbym programowo przewinąć ListViewdo końca. (np. coś w rodzaju listy wiadomości na czacie, gdzie na końcu można dodawać nowe wiadomości)

Domyślam się, że musiałbym utworzyć ScrollControllerw moim Stateobiekcie i przekazać go ręcznie do ListViewkonstruktora, aby móc później wywołać animateTo()/ jumpTo()metodę na kontrolerze. Ponieważ jednak nie mogę łatwo określić maksymalnego przesunięcia przewijania, wydaje się niemożliwe wykonanie po prostu scrollToEnd()rodzaju operacji (podczas gdy mogę łatwo przejść, 0.0aby przewinąć do pozycji początkowej).

Czy jest na to łatwy sposób?

Używanie reverse: truenie jest dla mnie idealnym rozwiązaniem, ponieważ chciałbym, aby elementy były wyrównane u góry, gdy jest tylko niewielka liczba elementów, które mieszczą się w ListViewwidoku.

Jeśli używasz ofoliowana ListViewz reverse: true, przewijanie go na 0.0 będzie robić to, co chcesz.

import 'dart:collection';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Example',
      home: new MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _messages = <Widget>[new Text('hello'), new Text('world')];
  ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Container(
          decoration: new BoxDecoration(backgroundColor: Colors.blueGrey.shade100),
          width: 100.0,
          height: 100.0,
          child: new Column(
            children: [
              new Flexible(
                child: new ListView(
                  controller: _scrollController,
                  reverse: true,
                  shrinkWrap: true,
                  children: new UnmodifiableListView(_messages),
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.add),
        onPressed: () {
          setState(() {
            _messages.insert(0, new Text("message ${_messages.length}"));
          });
          _scrollController.animateTo(
            0.0,
            curve: Curves.easeOut,
            duration: const Duration(milliseconds: 300),
          );
        }
      ),
    );
  }
}

Użyj ScrollController.jumpTo()lub ScrollController.animateTo()metody, aby to osiągnąć.

Przykład:

final _controller = ScrollController();

@override
Widget build(BuildContext context) {
  
  // After 1 second, it takes you to the bottom of the ListView
  Timer(
    Duration(seconds: 1),
    () => _controller.jumpTo(_controller.position.maxScrollExtent),
  );

  return ListView.builder(
    controller: _controller,
    itemCount: 50,
    itemBuilder: (_, __) => ListTile(title: Text('ListTile')),
  );
}

Jeśli chcesz płynne przewijanie, zamiast używać jumpTopowyższego, użyj

_controller.animateTo(
  _controller.position.maxScrollExtent,
  duration: Duration(seconds: 1),
  curve: Curves.fastOutSlowIn,
);

listViewScrollController.animateTo(listViewScrollController.position.maxScrollExtent) to najprostszy sposób.

aby uzyskać doskonałe rezultaty, połączyłem odpowiedzi Colina Jacksona i CopsOnRoad w następujący sposób:

_scrollController.animateTo(
                              _scrollController.position.maxScrollExtent,
                              curve: Curves.easeOut,
                              duration: const Duration(milliseconds: 500),
                            );

Mam tak duży problem, że próbuję użyć kontrolera przewijania, aby przejść na koniec listy, że używam innego podejścia.

Zamiast tworzyć zdarzenie w celu wysłania listy na sam dół, zmieniam logikę na odwróconą listę.

Tak więc za każdym razem, gdy mam nową pozycję, po prostu wstawiłem ją na górze listy.

// add new message at the begin of the list 
list.insert(0, message);
// ...

// pull items from the database
list = await bean.getAllReversed(); // basically a method that applies a descendent order

// I remove the scroll controller
new Flexible(
  child: new ListView.builder(
    reverse: true, 
    key: new Key(model.count().toString()),
    itemCount: model.count(),
    itemBuilder: (context, i) => ChatItem.displayMessage(model.getItem(i))
  ),
),

Nie umieszczaj widgetBinding w initstate, zamiast tego musisz umieścić go w metodzie, która pobiera dane z bazy danych. na przykład w ten sposób. Jeśli ustawisz initstate, scrollcontrollernie zostanie dołączony do żadnego widoku listy.

    Future<List<Message>> fetchMessage() async {

    var res = await Api().getData("message");
    var body = json.decode(res.body);
    if (res.statusCode == 200) {
      List<Message> messages = [];
      var count=0;
      for (var u in body) {
        count++;
        Message message = Message.fromJson(u);
        messages.add(message);
      }
      WidgetsBinding.instance
          .addPostFrameCallback((_){
        if (_scrollController.hasClients) {
          _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
        }
      });
      return messages;
    } else {
      throw Exception('Failed to load album');
    }
   }

Natknąłem się na ten problem, gdy korzystałem z StreamBuilderwidżetu do pobierania danych z mojej bazy danych. Położyłem WidgetsBinding.instance.addPostFrameCallbackna górze buildmetodę widżetu i nie przewijałbym go do końca. Naprawiłem to, robiąc to:

...
StreamBuilder(
  stream: ...,
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    // Like this:
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_controller.hasClients) {
        _controller.jumpTo(_controller.position.maxScrollExtent);
      } else {
        setState(() => null);
      }
     });

     return PutYourListViewHere
}),
...

Też próbowałem, _controller.animateToale nie działało.

możesz użyć tego, gdzie 0.09*heightjest wysokością wiersza na liście i _controllerjest zdefiniowany w ten sposób_controller = ScrollController();

(BuildContext context, int pos) {
    if(pos != 0) {
        _controller.animateTo(0.09 * height * (pos - 1), 
                              curve: Curves.easeInOut,
                              duration: Duration(milliseconds: 1400));
    }
}