Flutter ListView.builder在滚动时结结巴巴并跳到顶部[重复]

Posted 2023-02-23

【中文标题】Flutter ListView.builder在滚动时结结巴巴并跳到顶部[重复]

【英文标题】：Flutter ListView.builder Stutters and Jumps to Top on Scroll [duplicate]

【发布时间】：2019-06-29 22:11:30

【问题描述】：

从列表的中途向上滚动会使页面跳到顶部。我正在使用 Flutter 和 Firestore，以及 StreamBuilder 来获取数据。

我试过改变滚动物理，设置占位符，但似乎没有帮助。

  StreamBuilder<QuerySnapshot>(
    // Create a stream listening to the posts collection
    stream: widget.firestore
        .collection('posts')
        .orderBy('sequence', descending: false)
        .snapshots(),
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) 
      // When we don't have data yet (!...hasData), display the text "Loading..."
      if (!snapshot.hasData) return const Text('Loading...');
      final int messageCount = snapshot.data.documents.length;

      // When data is availible, load
      return new ListView.builder(
        //padding: EdgeInsets.all(3.0),
        itemCount: messageCount,
        itemBuilder: (_, int index) 
          final DocumentSnapshot document = snapshot.data.documents[index];
          if (document["type"] == "standard")
            return StandardCard(widget.firestore, document.documentID);
          else if (document["type"] == "text")
            return TextCard(widget.firestore, document.documentID);
          else if (document["type"] == "video")
            return VideoCard(widget.firestore, document.documentID);
          else
            return Card(
              // Database is incorrect
              child: Center(
                child: Text("[Missing sufficient information]"),
              ),
            );
        ,
      );
    ,
  ),

当你向下滚动时它会平滑滚动，但在向上滚动时会猛拉到顶部。

这是一个独立的示例。

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'ListView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'ListView Demo'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  stream() async* 
    yield ObjectHasFuture();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: StreamBuilder(
            stream: stream(),
            builder: (BuildContext context, snapshot) 
              if (!snapshot.hasData) return const Text('Loading...');
              return ListView.builder(
                itemBuilder: (_, int index) 
                  return Card(
                    child: snapshot.data,
                  );
                ,
              );
            ));
  


class ObjectHasFuture extends StatelessWidget 
  data() async 
    await Future.delayed(Duration(seconds: Random().nextInt(2)));
    return Container(
      height: 250,
      color: Colors.green,
      child: Center(
        child: Text(Random().nextInt(10000).toString()),
      ),
    );
  

  @override
  Widget build(BuildContext context) 
    return FutureBuilder(
        future: data(),
        builder: (context, snapshot) 
          if (!snapshot.hasData) return const Text("Loading");

          return snapshot.data;
        );
  

【问题讨论】：

您好，Nathan，您找到解决方案了吗？我也有同样的问题。

@miloss 有点像。将基于流的逻辑移动到 List 的 builder 方法中在一定程度上是可行的。

用这里的答案解决了这个问题：***.com/a/62462777/144857

【参考方案1】：

您是在调试模式还是发布模式下执行此操作？调试模式有时会显示在最终构建中消失的奇怪工件。

【讨论】：

它处于发布模式。调试模式只比发布模式更不稳定。

【参考方案2】：

给它一个滚动控制器：

Listview.builder(
  controller: ScrollController(),
  //
)

【讨论】：

这个解决方案非常适合我。在“屏幕”内有一个“表单”，ListView 正在“弹出”回到顶部。添加此行并修复！谢谢你，Kit。

【参考方案3】：

如果您正在处理列表项数量非常少的静态数据，您可以使用加快列表速度

ListView(
          addAutomaticKeepAlives: true,
          ...
)