Flutter:Streambuilder被多次调用

时间:2019-11-12 16:45:14

标签: flutter

我正在开发用于显示产品的应用程序。该应用程序在列表视图中有4个块。每个区块都展示了带有其信息的产品图片,并且可以水平滚动以获取更多数据。

我有以下示例代码

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomeState();
  }
}

class HomeState extends State<Home> {
    //------- other codes

  @override
  void initState() {
    bloc.fetchNewProperties(0);
    super.initState();
  }

  Widget build(BuildContext context) {


    return Scaffold(
      drawer: CustomDrawer(),
      backgroundColor: Constants.scaffoldColor,
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 216,
              floating: false,
              titleSpacing: 0.0,
              pinned: true,
              flexibleSpace: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [Constants.gradientStart, Constants.gradientEnd]),
                ),
                child: FlexibleSpaceBar(
                  centerTitle: true,
                  background: Swiper(
                    itemBuilder: (BuildContext context, int index) {
                      return new Image.asset(
                        tempBannerImages[index],
                        fit: BoxFit.fill,
                      );
                    },
                    itemCount: 2,
                    pagination: new SwiperPagination(),
                    autoplay: true,
                    autoplayDelay: 8000,
                    autoplayDisableOnInteraction: true,
                  ),
                ),
              ),
            ),
          ];
        },
        body: ListView(
          padding: EdgeInsets.only(
              left: size.getSizePx(10), right: size.getSizePx(10)),
          children: <Widget>[
            newProductsBlock(),
            newProductsBlock(),
            newProductsBlock(),
            newProductsBlock(),
            newProductsBlock(), //have added widget multiple times to make stuff scrollable
          ],
        ),
      ),
    );
  }

    Widget newProductsBlock() {

    print("---This gets called just once---");
    return Column(
      children: <Widget>[

        Text("New Products"),
        Container(
          height: 230,
          child: StreamBuilder(
            stream: bloc.allNewProps,
            builder: (context, AsyncSnapshot<ProductsModel> snapshot) {
              print("--this gets called multiple times.---");
              if (snapshot.hasData) {
                return buildNewPropListSwipe(snapshot);
              } else if (snapshot.hasError) {
                return Text(snapshot.error.toString());
              }
              return showCirularLoadingIndicator();
            },
          ),
        )
      ],
    );
  }

}

问题 产品已成功加载到这些块中。但是,当我一直向下滚动并回到顶部时。在第一个块中,circularloading指示器变得可见,而不是已经加载的项目。当我检查时,发现向下滚动并再次向上滚动时,会多次调用Streambuilder。

有人可以帮我吗,我是新手。

谢谢

1 个答案:

答案 0 :(得分:-2)

对于偶然发现同一问题的任何人,

我将父项Listview更改为ScrollSingleChildView并将小部件包装到Column中,现在看来已经解决了