Трепетание ListView.builder заикается и переходит наверх при прокрутке

Question

При прокрутке вверх отчасти вниз по списку страница переходит наверх.Я использую 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;
        });
  }
}

Answer 1

Если вы имеете дело со статическими данными очень небольшого числа элементов списка, вы можете ускорить список, используя

ListView(
          addAutomaticKeepAlives: true,
          ...
)

Answer 2

дать ему scrollController:

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

Answer 3

Вы делаете это в режиме отладки или в режиме выпуска?Режим отладки иногда демонстрирует странные артефакты, которые исчезают в финальной сборке.