Question

我有一个电子商务应用程序，其中加载了多个小部件，这些小部件使用自己的Future来构建它。我在SingleChildScrollView中有6个小部件。问题是我看到了6 CircularProgressIndicator，看起来很糟糕。

我如何检查SingleChildScrollView中的小部件是否已构建并将setstate设置为_isLoading = false;

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _isLoading = false;

@override
  void initState() {
    super.initState();
    _isLoading = true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isLoading
          ? Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Center(child: CircularProgressIndicator()))
          : SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  CarouselSliderList(),
                  Banner1Slot(),
                  TopCategoriesList(),
                  HotProducts(),
                  TopCategoriesIconList(),
                  AllProduct(),
                ],
              ),
            ),
    );
  }
}

在HomeScreen的SingleChildScrollView中有1个小部件的示例。

class Banner1Slot extends StatefulWidget {
  @override
  _TopCategoriesListState createState() => _TopCategoriesListState();
}

class _TopCategoriesListState extends State<Banner1Slot> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Banner1>>(
      future: getBanner1(http.Client()),
      builder: (context, snapshot) {
        if (snapshot.hasError) print(snapshot.error);
        return snapshot.hasData
            ? Banner1Image(
                banner1: snapshot.data,
              )
            : Center(
                child: CircularProgressIndicator(
                  backgroundColor: Colors.black26,
                ),
              );
      },
    );
  }
}

Answer 1

您需要使用ChangeNotifierProvider来更好地处理CircularProgressIndicator并为setState调用notifierlistener布局

Answer 2

让侦听器侦听小部件中的所有isLoadingWidget并执行AND操作，该怎么办？ isLoading = isLoadingWidget1 && isLoadingWidget2 ...

Answer 3

尝试使用 Banner1Image 中的功能，如下所示：

class Banner1Slot extends StatefulWidget {
   Function onLoadedData;
      Banner1Image({this.onLoadedData})
  @override
  _TopCategoriesListState createState() => _TopCategoriesListState();
}

class _TopCategoriesListState extends State<Banner1Slot> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Banner1>>(
      future: getBanner1(http.Client()),
      builder: (context, snapshot) {
        if (snapshot.hasError) print(snapshot.error);
        if( snapshot.hasData)
          {
              widget.onLoadedData();
                return  Banner1Image(
                   banner1: snapshot.data,
                );
           }
              else return Center(
                  child: CircularProgressIndicator(
                    backgroundColor: Colors.black26,
                  ));
      }  
    );
  }
}

将主屏幕中的代码更改为喜欢的

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isLoading
          ? Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Center(child: CircularProgressIndicator()))
          : SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  CarouselSliderList(),
                  Banner1Slot((){
                    setState(){
                       _isLoading = false;
                      };
                   }),
                  TopCategoriesList(),
                  HotProducts(),
                  TopCategoriesIconList(),
                  AllProduct(),
                ],
              ),
            ),
    );
  }

Flutter检查HomeScreen中SingleChildScrollView内部的小部件是否已构建

3 个答案: