Flutter之ListView实现自动滑动到底部

使用场景

在常见社交App中，发送消息或者接收到他人消息后，消息列表都会自动滑动到底部，不需要我们手动滑动，这样的用户体验好。

思路

ListView使用ScrollController来控制滑动，其中有jumpTo、animateTo2个方法滑动到指定的位置。

/// packages/flutter/lib/src/widgets/scroll_controller.dart

void jumpTo(double value){
    assert(_positions.isNotEmpty, 'ScrollController not attached to any scroll views.');
    for (final ScrollPosition position in List<ScrollPosition>.from(_positions))
      position.jumpTo(value);
}

Future<void> animateTo(
    double offset, {
      required Duration duration,
      required Curve curve,
    }) async {
    assert(_positions.isNotEmpty, 'ScrollController not attached to any scroll views.');
    await Future.wait<void>(<Future<void>>[
      for (int i = 0; i < _positions.length; i += 1) _positions[i].animateTo(offset, duration: duration, curve: curve),
    ]);
}

看命名就能看出来，jumpTo不带动画效果，animateTo能设置滑动动画。

第一个参数value和offset都是代表ListView中的指定位置。

ScrollPostion

那么应该传入哪个值才是代表ListView的底部呢？

通过ScrollController2个方法的源码发现最终调用的是_position的jumpTo、animateTo方法。

_postion是一个ScrollPostion，ScrollPostion中有2个变量minScrollExtent、maxScrollExtent，分别代表滑动到顶部、底部的位置。

最终可以使用以下代码实现滑动到底部

scrollController.jumpTo(scrollController.position.maxScrollExtent);

实现

布局

首先我们来定义一个简单的聊天界面。一个ListView，一个输入框，一个发送消息的按钮。

/// 消息列表
List<String> _messages = ["在干嘛","吃饭了吗","想你了","早点睡"];
TextEditingController _textEditingController = TextEditingController();
ScrollController _scrollController = ScrollController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('女神'),
    ),
    body: Column(
      children: [
        Expanded(
          child: ListView.builder(
            controller: _scrollController,
            itemBuilder: (context, index) {
              return SizedBox(
                child: Center(child: Text(_messages[index])),
                height: 50,
              );
            },
            itemCount: _messages.length,
          ),
        ),
        Row(
          children: [
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                child: TextField(
                  controller: _textEditingController,
                  decoration: InputDecoration(
                    hintText: "请输入消息",
                  ),
                  textInputAction: TextInputAction.send,
                  onSubmitted: sendMessage,
                ),
              ),
            ),
            IconButton(
              onPressed: () {
                /// 发送消息
                sendMessage(_textEditingController.text.trim());
                /// 清除输入框中的内容
                _textEditingController.text = "";
              },
              icon: Icon(Icons.send),
            ),
          ],
        ),
        SizedBox(height: 5),
      ],
    ),
  );
}

滑动到底部

点击发送按钮时，获取输入框中的消息，添加到消息列表中，更新ui，然后滑动到底部。

void sendMessage(String message) {
  if (message.isEmpty) return;
  setState(() {
    _messages.add(message);
  });
  _scrollController.jumpTo(_scrollController.position.maxScrollExtent)；
}

问题

看起来没啥问题，但是运行发现，每次发送完消息后，列表并没有滑动到底部，而是滑动到了倒数第二次数据。

原因是执行滑动到底部的操作时，列表数据还没有更新，maxScrollExtent还是更新之前的值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pucOH0Q3-1631608253352)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/308f11e872644472b83f78760105e2f3~tplv-k3u1fbpfcp-watermark.image)]

解决方案

那么我们需要等待setState刷新列表之后，再执行滑动操作。
所以我们可以使用延迟执行方案。一般延迟时间设置300到500毫秒即可。

void sendMessage(String message) {
  if (message.isEmpty) return;
  setState(() {
    _messages.add(message);
  });
  /// 延迟500毫秒，再进行滑动
  Future.delayed(Duration(milliseconds: 500), () {
    _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
  });
}

ok！大功告成，下面是演示效果。