Flutter ListView 在构建时滚动到底部

Posted 2023-02-23

【中文标题】Flutter ListView 在构建时滚动到底部

【英文标题】：Flutter ListView scroll to bottom on build

【发布时间】：2020-07-16 23:06:31

【问题描述】：

是否可以在 Flutter 列表视图最初加载所有数据后滚动到底部？我知道 scrollController.jumpTo() 逻辑，但是必须在某个事件处理程序中调用它，如何在列表视图构建完成后调用它，以便屏幕打开后立即滚动到底部？

【参考方案1】：

嗯，我认为你在正确的轨道上实现它！

您应该尝试_controller.jumpTo() 并以编程方式触发该事件。

您可以创建一个 Timer，并在 500 毫秒（半秒）后调用其中的 _controller。

ScrollController _myController = ScrollController();

@override
Widget build(BuildContext context) 
      
      // here we set the timer to call the event
      Timer(Duration(milliseconds: 500), () => _myController.jumpTo(_myController.position.maxScrollExtent));

      // add _myController to the ListView
      return ListView.builder(
         controller: _myController,
         // itemCount: yourItemsCount,
         // ...
      )

---

也请检查这个答案 --> Programmatically scrolling to the end of a ListView

还有这个 --> How to get full size of a ScrollController

他们在那里使用SchedulerBinding.instance.addPostFrameCallback，我认为这也是一个很好的解决方案来触发你的滚动。

SchedulerBinding.instance.addPostFrameCallback((_) 
            _myController.animateTo(
              _myController.position.maxScrollExtent,
              duration: const Duration(milliseconds: 500),
              curve: Curves.easeOut,
            );
          );

---

更新：

请试试这个代码，没有过渡，没有可见的跳转给我。

是我前面几段的组合。

请注意，如果行数增加，例如 10000。

但我认为你应该控制显示的消息数量。

  Widget build(BuildContext context) 
    final items = List<String>.generate(50, (i) => "Item $i");

    ScrollController _controller = ScrollController();

    SchedulerBinding.instance.addPostFrameCallback((_) 
        _controller.jumpTo(_controller.position.maxScrollExtent);
      );

    return Scaffold(
        body: SafeArea(
          child: ListView.builder(
            controller: _controller,
            itemCount: items.length,
            itemBuilder: (context, index) 
              return ListTile(
                title: Text('$items[index]'),
              );
            ,
          ),
        ));
  

【讨论】：

感谢您的回复 encubos 然而，无论我如何减少持续时间，您仍然会在屏幕打开时看到从对话顶部到底部的明显过渡。我基本上希望屏幕在 ListView 的底部打开，就像所有聊天应用程序（如 WhatsApp 等）一样，因为最新的对话位于底部。

我更新了我的答案，底部有一个新代码。它是一个完整的构建功能，显示 50 行。试试看。