Lập trình cuộn đến cuối ListView

Tôi có một thanh cuộn ListViewtrong đó số lượng các mục có thể thay đổi động. Bất cứ khi nào một mục mới được thêm vào cuối danh sách, tôi muốn cuộn ListViewđến cuối theo chương trình . (ví dụ: một cái gì đó giống như danh sách tin nhắn trò chuyện, nơi có thể thêm tin nhắn mới vào cuối)

Tôi đoán là tôi sẽ cần tạo một đối tượng ScrollControllertrong Stateđối tượng của mình và chuyển nó theo cách thủ công cho hàm ListViewtạo, để sau này tôi có thể gọi animateTo()/ jumpTo()phương thức trên bộ điều khiển. Tuy nhiên, vì tôi không thể dễ dàng xác định độ lệch cuộn tối đa, nên dường như không thể thực hiện một cách đơn giản một scrollToEnd()loại thao tác (trong khi tôi có thể dễ dàng vượt qua 0.0để làm cho nó cuộn về vị trí ban đầu).

Có cách nào dễ dàng để đạt được điều này không?

Sử dụng reverse: truekhông phải là giải pháp hoàn hảo đối với tôi, bởi vì tôi muốn các mục được căn chỉnh ở trên cùng khi chỉ có một số lượng nhỏ các mục vừa với ListViewkhung nhìn.

Nếu bạn sử dụng một co-bọc ListViewvới reverse: true, di chuyển nó đến 0.0 sẽ làm những gì bạn muốn.

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

Sử dụng ScrollController.jumpTo()hoặc ScrollController.animateTo()phương pháp để đạt được điều này.

Thí dụ:

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

Nếu bạn muốn cuộn trơn tru, thì thay vì sử dụng jumpToở trên, hãy sử dụng

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

listViewScrollController.animateTo(listViewScrollController.position.maxScrollExtent) là cách đơn giản nhất.

để có được kết quả hoàn hảo, tôi đã kết hợp các câu trả lời của Colin Jackson và CopsOnRoad như sau:

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

Tôi gặp rất nhiều vấn đề khi cố gắng sử dụng bộ điều khiển cuộn để đi đến cuối danh sách mà tôi sử dụng một cách tiếp cận khác.

Thay vì tạo sự kiện để gửi danh sách xuống dưới cùng, tôi thay đổi logic của mình để sử dụng danh sách đảo ngược.

Vì vậy, mỗi khi tôi có một mục mới, tôi chỉ đơn giản là chèn vào đầu danh sách.

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

Không đặt widgetBinding trong initstate, thay vào đó, bạn cần đặt nó trong phương thức tìm nạp dữ liệu của bạn từ cơ sở dữ liệu. ví dụ, như thế này. Nếu được đặt trong initstate, scrollcontrollersẽ không đính kèm vào bất kỳ listview nào.

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

bạn có thể sử dụng điều này, đâu 0.09*heightlà chiều cao của một hàng trong danh sách và _controllerđược xác định như thế này_controller = ScrollController();

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