Програмне прокручування до кінця ListView

У мене є прокрутка, ListViewде кількість елементів може динамічно змінюватися. Щоразу, коли до кінця списку додається новий пункт, я хотів би програмно прокрутити його ListViewдо кінця. (наприклад, щось на зразок списку повідомлень чату, куди в кінці можна додати нові повідомлення)

Я припускаю, що мені потрібно було б створити ScrollControllerв моєму Stateоб'єкті і передати його вручну ListViewконструктору, щоб я пізніше міг викликати animateTo()/ jumpTo()метод на контролері. Однак, оскільки я не можу легко визначити максимальне зміщення прокрутки, здається неможливим просто виконати scrollToEnd()тип операції (тоді як я можу легко передати, 0.0щоб зробити її прокруткою у вихідне положення).

Чи є простий спосіб цього досягти?

Використання reverse: trueдля мене не є ідеальним рішенням, тому що я хотів би, щоб елементи були вирівняні вгорі, коли в області перегляду є лише невелика кількість елементів ListView.

Якщо ви використовуєте упакували ListViewз reverse: true, скролінг його в 0.0 буде робити те , що ви хочете.

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),
          );
        }
      ),
    );
  }
}

Використання ScrollController.jumpTo()або ScrollController.animateTo()метод для досягнення цього.

Приклад:

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')),
  );
}

Якщо ви хочете плавну прокрутку, то замість використання jumpToвищезазначеного використовуйте

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

listViewScrollController.animateTo(listViewScrollController.position.maxScrollExtent) це найпростіший спосіб.

щоб отримати ідеальні результати, я поєднав відповіді Коліна Джексона та CopsOnRoad наступним чином:

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

У мене так багато проблем із спробою використовувати контролер прокрутки, щоб перейти до кінця списку, що я використовую інший підхід.

Замість того, щоб створювати подію для надсилання списку внизу, я міняю свою логіку, використовуючи зворотний список.

Отже, кожного разу, коли у мене з’являється новий предмет, я просто роблю його при вставці вгорі списку.

// 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))
  ),
),

Не розміщуйте widgetBinding у initstate, натомість вам потрібно помістити його в метод, який отримує ваші дані з бази даних. наприклад, ось так. Якщо його вставити в initstate, scrollcontrollerвін не буде доданий до жодного списку.

    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');
    }
   }

Ви можете використовувати це, де 0.09*heightє висота рядка у списку і _controllerвизначається так_controller = ScrollController();

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