以编程方式滚动到 ListView 的末尾 [英] Programmatically scrolling to the end of a ListView

问题描述

我有一个可滚动的 ListView，其中项目的数量可以动态变化.每当将新项目添加到列表末尾时，我想以编程方式将 ListView 滚动到末尾.(例如，像聊天消息列表这样可以在末尾添加新消息的东西)

I have a scrollable ListView where the number of items can change dynamically. Whenever a new item is added to the end of the list, I would like to programmatically scroll the ListView to the end. (e.g., something like a chat message list where new messages can be added at the end)

我的猜测是我需要在我的 State 对象中创建一个 ScrollController 并手动将它传递给 ListView 构造函数，所以我稍后可以在控制器上调用 animateTo()/jumpTo() 方法.但是，由于我无法轻松确定最大滚动偏移量，因此似乎不可能简单地执行 scrollToEnd() 类型的操作(而我可以轻松地通过 0.0 使其滚动到初始位置).

My guess is that I would need to create a ScrollController in my State object and pass it manually to the ListView constructor, so I can later call animateTo() / jumpTo() method on the controller. However, since I cannot easily determine the maximum scroll offset, it seems impossible to simply perform a scrollToEnd() type of operation (whereas I can easily pass 0.0 to make it scroll to the initial position).

有没有简单的方法来实现这一目标?

Is there an easy way to achieve this?

使用 reverse: true 对我来说不是一个完美的解决方案，因为当只有少量项目适合 时，我希望项目在顶部对齐ListView 视口.

Using reverse: true is not a perfect solution for me, because I would like the items to be aligned at the top when there are only a small number of items that fit within the ListView viewport.

推荐答案

如果您使用带有 reverse: true 的收缩包装的 ListView，将其滚动到 0.0 即可你想要什么.

If you use a shrink-wrapped ListView with reverse: true, scrolling it to 0.0 will do what you want.

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

这篇关于以编程方式滚动到 ListView 的末尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！