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

Question

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

我试过这个代码

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

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

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

Answer 1

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

Answer 2

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

Answer 3

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

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

Flutter scroll slowly to the bottom of a dynamic Listview

flutter

dart

flutter-listview