【问题标题】:Flutter ListView scroll to bottom on buildFlutter ListView 在构建时滚动到底部
【发布时间】:2020-07-16 23:06:31
【问题描述】:

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

【问题讨论】:

    标签: listview flutter flutter-layout


    【解决方案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 行。试试看。
    猜你喜欢
    • 2018-06-03
    • 2023-03-26
    • 2021-07-25
    • 2016-11-22
    • 2021-07-31
    • 2018-02-27
    • 1970-01-01
    • 1970-01-01
    • 2014-12-12
    相关资源
    最近更新 更多