Flutter缓慢滚动到动态Listview的底部

Posted 2023-02-23

【中文标题】Flutter缓慢滚动到动态Listview的底部

【英文标题】：Flutter scroll slowly to the bottom of a dynamic Listview

【发布时间】：2021-07-25 07:21:09

【问题描述】：

我有一个列表视图，它的项目可能每次都不同。我想让它自动滚动。

我试过这段代码

scrollController.animateTo(
      scrollController.position.maxScrollExtent,
      duration: Duration(seconds: 10),
      curve: Curves.easeOut);

它非常适用于小型列表视图，但是当列表视图项目为 100 或更多时，它开始移动得如此之快。

当列表视图有更多项目但它混乱时，我也尝试延长持续时间

【问题讨论】：

你是通过api获取数据的吗？

数据不是问题我从本地数据库正确获取数据。

您是否一次获取所有数据？或者你正在使用分页？

是的，我立即获取数据并填充列表视图，然后我希望它开始滚动。

【参考方案1】：

问题是由动画本身引起的，而不是由持续时间引起的。 我通过增加持续时间和设置来解决它 curve: Curves.linear.

【参考方案2】：

// Declaring the controller and the item size
ScrollController _scrollController;
final itemSize = 100.0;

// Initializing
@override
void initState() 
  _scrollController = ScrollController();
  _scrollController.addListener(_scrollListener);
  super.initState();


// Your list widget (must not be nested lists)
ListView.builder(
      controller: _scrollController,
      itemCount: <Your list length>,
      itemExtent: itemSize,
      itemBuilder: (context, index) 
          return ListTile(<your items>);
      ,
),

// With the listener and the itemSize, you can calculate which item
// is on screen using the provided callBack. Something like this:
void _scrollListener() 
  setState(() 
    var index = (_scrollController.offset / itemSize).round() + 1;
  );

【讨论】：

没有时间不是问题。我已经说过，当我设置更长的时间时，它仍然可以工作，但它会以一种凌乱的方式移动。就像它停止然后移动

scrollController.position.maxScrollExtent 更改此

改成什么？

我改了答案看看

项目大小不是静态的，它会根据里面的内容而改变。有没有其他不使用高度的解决方案

【参考方案3】：

import 'dart:async';
import 'package:flutter/material.dart';

class Home extends StatefulWidget 
  @override
  _HomeState createState() => _HomeState();


class _HomeState extends State<Home> 
  final _controller = ScrollController();
  
  @override
  void dispose() 
    _controller.dispose();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    Timer(
      Duration(seconds: 2),
          () => _controller.animateTo(
            _controller.position.maxScrollExtent,
            duration: Duration(seconds: 2),
            curve: Curves.fastOutSlowIn,
          ),
    );
    return Scaffold(
      body: ListView.builder(itemBuilder:(context, index) 
        return Text('hi');
      ,
     controller: _controller,
      )
    );
  

【讨论】：

这段代码等待两秒钟，然后开始快速滚动。我的问题是快速滚动，但不是时间问题

您可以使用Curves.easeIn 或任何其他类。有很多选择。

检查***.com/questions/43485529/…

谢谢 Ujjwal。我通过将曲线设置为Curves.linear来解决它。