Flutter ScrollController 无法正常工作

Posted

技术标签:

【中文标题】Flutter ScrollController 无法正常工作【英文标题】:Flutter ScrollController is not work properly 【发布时间】:2021-08-22 14:17:45 【问题描述】:

在我的颤振应用程序中,我尝试使用 scrollController 在 listBuilder 中滚动列表视图,但 ScrollController 无法正常工作。它不显示错误或异常,但列表不滚动。即使我使用滚动控制器 jumpTo 或 animateTo 它也不起作用。即使我在 animateTo 和 jumpTo 中给出 1000 和 20000 之类的最大值,它也不会滚动。

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

class Class extends StatefulWidget 
final int data;
final List list;
Class(required this.data, required this.list);
@override
_ClassState createState() => _ClassState();


class _ClassState extends State<Class> with TickerProviderStateMixin 
late Animation<double> animation;
late AnimationController animationController;
late double height = 0;

final List lst = [
 [true, true, true, true],
[false, false, false, false],
[true, false, false, false],
[true, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
];

void initState() 
  super.initState();

animationController =
    AnimationController(vsync: this, duration: Duration(seconds: 5));

animation = Tween<double>(begin: 0, end: 200).animate(animationController)
  ..addListener(() 
    setState(() );
  )
  ..addStatusListener((status) );
animationController.forward();
 

Widget container(data) 
return Stack(
  children: [
    GestureDetector(
      onTap: () 
        setState(() 
          animationController.forward();
        );
      ,
      child: Transform.translate(
        offset: Offset(0, animation.value),
        child: Container(
          color: lst[data][0] ? Colors.black : Colors.transparent,
          height: MediaQuery.of(context).size.height / 4,
          width: MediaQuery.of(context).size.width / 4,
          child: Text('$data'),
        ),
      ),
    ),
  ],
);
 

 @override
 Widget build(BuildContext context) 
return container(widget.data);
  

 @override
 void dispose() 
super.dispose();
animationController.dispose();
  
 

class Yes extends StatefulWidget 
 @override
_YesState createState() => _YesState();
  

 class _YesState extends State<Yes> 
   List lst = [
[true, true, true, true],
[false, false, false, false],
[true, false, false, false],
[true, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
[false, false, false, false],
[true, false, false, false],
   ];

 ScrollController _scrollController = ScrollController();

 void initState() 
if (_scrollController.hasClients) 
  super.initState();
  // _scrollController.animateTo(0,
  //     // _scrollController.offset + MediaQuery.of(context).size.height/6,
  //     duration: Duration(seconds: 2),
  //     curve: Curves.linear);
  _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
    
   

 @override
 Widget build(BuildContext context) 
    return ListView(
  controller: _scrollController,
  //  physics: NeverScrollableScrollPhysics(),
  children: [
    ListView.builder(
          // physics: NeverScrollableScrollPhysics(),
        reverse: true,
        itemCount: lst.length,
        controller: _scrollController,
        itemBuilder: (BuildContext context, int position) 
          return Stack(children: [Class(data: position, list: lst)]);
        ),
  ],
);
  
   

【问题讨论】:

【参考方案1】:

您的代码不够清晰,但是 试试这个作为例子工作得很好

  runApp(MyApp());


class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: ListExample(),
    );
  


class ListExample extends StatelessWidget 
  ListExample(Key? key) : super(key: key);

  final ScrollController controller = ScrollController();
  double pos = 0;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              controller: controller,
              itemCount: 10000,
              itemBuilder: (context, index) 
                return Text('item $index');
              ,
            ),
          ),
          ElevatedButton(
              onPressed: () 
                controller.jumpTo(pos+=250);
              ,
              child: Text(' Jump'))
        ],
      ),
    );
  

【讨论】:

以上是关于Flutter ScrollController 无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

Flutter ScrollController maxScrollExtent 等于 0.0

25.Flutter的ListView监听滚动事件之ScrollController

Flutter 之 滚动监听及控制(十九)

Flutter - 使用 StreamBuilder 从 firebase 获取数据后,如何使用 ScrollController 跳转到列表视图的底部?

Flutter - ScrollController 滚动监听及控制

FlutterListView 列表高级功能 ( ScrollController 上拉加载更多 )