Flutter Body 与 ListView 不滚动

Question

新的 Flutter 开发人员 --> 我已经查看了许多有关滚动的问题，并且基于实现它看起来具有挑战性。试图想出标准方法但无法让它滚动。

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:shmc_memberapp/models/data/get_chapters.dart';

class SampleChapter extends StatefulWidget {
  const SampleChapter({super.key});

  @override
  State<SampleChapter> createState() => _SampleChapterState();
}

class _SampleChapterState extends State<SampleChapter> {
  //Do I need this was Auth and User in Example
  //final chaptersRef = FirebaseFirestore.instance.collection('shmc_chapters');

  List<String> chapterDocIDs = [];

  //Method to get chapter Doc IDs
  //Apply Sorting if needed
  Future getChapterDocIDs() async {
    //getting all IDs in Chapter Collection
    await FirebaseFirestore.instance
        .collection('shmc_chapters')
        .orderBy('orderID', descending: false)
        .get()
        .then(
          (chapterSnapshot) => chapterSnapshot.docs.forEach((chapterDoc) {
            print(chapterDoc.reference);
            //Collect ALL Chapter Doc IDs into our List Collection
            chapterDocIDs.add(chapterDoc.reference.id);
          }),
        );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text("SHMC Chapters"),
          backgroundColor: const Color.fromARGB(255, 43, 55, 138),
          foregroundColor: Colors.white),
      //drawer: const NavigationDrawer(),
      body: Center(
        child: FutureBuilder(
          future: getChapterDocIDs(),
          builder: (context, chapterSnapshot) {
            return ListView.builder(
              itemCount: chapterDocIDs.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(4.0),
                    child: ListTile(
                    title: GetChapterData(
                      documentID: chapterDocIDs[index]),
                      tileColor: Colors.white,
                      onTap: () {},
                        //trailing: const Icon(Icons.edit),
                    ),
                  );
                }
              );
            },
          ),
        ),
    );
  }
}

我错过了什么？

我尝试过：物理：NeverScrollableScrollPhysics（）和shrinkWrap：true， - 但无法弄清楚这一点。随着列表的不断增长，预计会发生滚动。

Answer 1

要使 listView 可滚动。您只需将返回函数包装在 Scrollable 小部件中，例如 SingleChildScrollView() 而不是 Center Widget

import 'package:flutter/material.dart';

// ... your data fetching function
Future<List<YourData>> fetchData() async {
  // ... fetch data asynchronously
}

class YourWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: FutureBuilder<List<YourData>>(
        future: fetchData(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              shrinkWrap: true,
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data![index].title), // Use your data here
                  // ... other list item content
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}