加载数据后如何更改循环进度指示器 Flutter

Question

加载数据后循环进度指示器不会消失。

这是我使用进度指示器的代码

当我到达网格视图的末尾时，它应该加载其他数据，但是

进度指示器与它加载的内容相同，并且在获取数据后不会消失。

我尝试创建一个布尔 isLoading 并尝试将其更改为真或假，但找不到我可以这样做的地方

int pageNumber = 1;
String filterName = '';

class ShowsListDesign extends StatefulWidget {
  @override
  _ShowsListDesignState createState() => _ShowsListDesignState();
}

class _ShowsListDesignState extends State<ShowsListDesign> {
  ScrollController controller = ScrollController();
  ServicesClass service = ServicesClass();
  bool isLoading = false;

  @override
  void initState() {
controller.addListener(listenScrolling);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
  future: service.getFilms('posts/$pageNumber/$filterName'),
  builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
    if (snapshot.hasData) {
      return Stack(
        alignment: Alignment.bottomCenter,
            children: [
              GridView.builder(
                itemCount: snapshot.data.length,
                gridDelegate: const             
SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 250,
                  crossAxisSpacing: 24,
                  mainAxisSpacing: 24,
                  childAspectRatio: (3 / 5),
                ),
                controller: controller,
                itemBuilder: (context, index) {
                  return FilmsCard(
                    image: snapshot.data[index]['thumbnailUrl'],
                    title: snapshot.data[index]['title'],
                    year: snapshot.data[index]['year'],
                  );
                },
              ),
              FloatingActionButton(
                onPressed: () {
                  scrollUp();
                },
                elevation: 24,
                backgroundColor: PRIMARY,
                child: const Text(
                  'Scroll Up',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 12,
                  ),
                ),
              ),
            ],
          );
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }

  void scrollUp() {
    const double start = 0;
    controller.animateTo(start,
        duration: const Duration(seconds: 1, milliseconds: 50),
        curve: Curves.easeIn);
  }

  void listenScrolling() {
    if (controller.position.atEdge) {
      final isTop = controller.position.pixels == 0;
      if (isTop) {
      } else {
        setState(() {
          pageNumber++;

          ShowsListDesign();
        });
      }
    }
  }
}

Answer 1

未来可能会出现错误或没有数据，处理这些状态会更好。

builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
  if (snapshot.connectionState == ConnectionState.waiting) {
    return const Center(
      child: CircularProgressIndicator(),
    );
  } else if (snapshot.hasData &&
      snapshot.connectionState == ConnectionState.done) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [...],
    );
  } else if (!snapshot.hasData &&
      snapshot.connectionState == ConnectionState.done) {
    return const Text("couldn't find any data");
  } else if (snapshot.hasError) {
    return Text("${snapshot.error}");
  } else {
    return const Text(" any other");
  }
},

更多关于FutureBuilder class。

Answer 2

如果不是单页加载，则不能使用 FutureBuilder。尝试这个： （虽然我不明白你的滚动机制），当你覆盖时也调用 super.initState

String filterName = '';

class ShowsListDesign extends StatefulWidget {
  @override
  _ShowsListDesignState createState() => _ShowsListDesignState();
}

class _ShowsListDesignState extends State<ShowsListDesign> {
  ScrollController controller = ScrollController();
  ServicesClass service = ServicesClass();
  bool isLoading = false;

// New
  int pageNumber = 1;
  List? data;

  Future<void> load() async {
    setState(() {
      isLoading = true;
     
    });
    data = await service.getFilms('posts/1/$filterName');
    setState(() => isLoading = false);
    
  }

  @override
  void initState() {
// Make sure you call super.initState() when you override
    controller.addListener(listenScrolling);
    super.initState();
    load();
    
    
  }

// Also call dispose to remove listener
@override
  void dispose() {
    controller.removeListener(listener);
    controller.dispose();
    super.dispose();
}

  @override
  Widget build(BuildContext context) {
    return Builder(
  
  builder: (BuildContext context) {
    if (data != null) {
      return Stack(
        alignment: Alignment.bottomCenter,
            children: [
              GridView.builder(
                itemCount: data!.length,
                gridDelegate: const             
SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 250,
                  crossAxisSpacing: 24,
                  mainAxisSpacing: 24,
                  childAspectRatio: (3 / 5),
                ),
                controller: controller,
                itemBuilder: (context, index) {
                  return FilmsCard(
                    image: data![index]['thumbnailUrl'],
                    title: data![index]['title'],
                    year: data![index]['year'],
                  );
                },
              ),
              FloatingActionButton(
                onPressed: () {
                  scrollUp();
                },
                elevation: 24,
                backgroundColor: PRIMARY,
                child: const Text(
                  'Scroll Up',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 12,
                  ),
                ),
              ),
            ],
          );
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }

  void scrollUp() {
    const double start = 0;
    controller.animateTo(start,
        duration: const Duration(seconds: 1, milliseconds: 50),
        curve: Curves.easeIn);
  }

  Future<void> listenScrolling() async {
// Change this depending on the scrolling works ?!
    if (controller.position.pixels == controller.position.maxScrollExtent && data != null) {
        List new_data = await service.getFilms('posts/${pageNumber + 1}/$filterName');
        data.addAll(new_data);
        setState(() {
          
          pageNumber++;

        });
      
    }
  }
}