如何使 StreamBuilder 滚动在 Flutter 的 ListView 内工作？

Question

在我的颤振项目中，我有一个 SteamBuilder 被一个容器包裹在一个 ListView 内，而 Scaffold 的主体部分是一个 Column。

如下图-

图中，蓝色部分是Container 1，黄色部分是Stream builder one（里面我从API加载了一些数据），红色部分是Container 2。

现在问题是 ------

当我滚动浏览容器 1 和容器 2 时，滚动效果很好，但是当我滚动浏览 StreamBuilder 容器时，它就不起作用了。

这是我的代码-

    return Scaffold(

      body: Column(
        children: <Widget>[

          Expanded(
            child: ListView(
              children: <Widget>[


                  Container(

                    width: double.minPositive,
                    height: 200,
                    color: Colors.blue,

                    child: Text("Container 1"),
                  ),


                Container(

                  color: Colors.yellow,
                  height: 300,

                  child: StreamBuilder(
                      stream: bloc.allFrontList,
                      builder: (context, AsyncSnapshot<List<ModelFrontList>> snapshot){
                        if (snapshot.hasData) {
                          return buildList(snapshot);
                        } else if (snapshot.hasError) {
                          return Text(snapshot.error.toString());
                        }
                        return Center(child: CircularProgressIndicator());

                      }
                  ),
                ),


                Container(
                  height: 150,
                  width: double.infinity,
                  color: Colors.red,

                  child: Text("Container 2"),
                ),

              ],

            ),
          ),
          Container(
            height: 60,
            width: double.maxFinite,
            decoration: BoxDecoration(

                color: Colors.white,
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
            ),
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[

                showBottomIcons(Icons.home, "Home", "/HomeScreen"),
                showBottomIcons(Icons.category, "Category", "/CategoryScreen"),
                showBottomIcons(Icons.shopping_cart, "Cart", "/CartScreen"),
                showBottomIcons(Icons.person, "Account", "/AccountScreen"),

              ],
            ),
          )
        ],
      ),
    );
  }



  Widget buildList(AsyncSnapshot<List<ModelFrontList>> snapshot) {
    return ListView.builder(

      shrinkWrap: true,
        itemCount: snapshot.data.length,

        itemBuilder: (BuildContext context, int index) {
          return Container(

              margin: EdgeInsets.fromLTRB(0, 50, 0, 20),
              child: Text("${snapshot.data[index].products[index].nameEnglish}"),
              //onTap: () => openDetailPage(snapshot.data, index),
          );
        });
  }

所以，我需要一个解决方案，让整个屏幕在每个容器中都可以滚动，包括提到的 StreamBuilder。

Answer 1

这里的问题是您在 StreamBuilder 中返回另一个列表，并且您的拖动手势被传递到该列表（其中包含黄色容器中的元素）。 尚不完全清楚所需的全部功能是什么，但快速解决方法是添加

physics: NeverScrollableScrollPhysics()

到您的 ListView.Builder。

更好的解决方案（取决于您所需的功能）是不使用可滚动小部件来显示来自 StreamBuilder 的数据，并确保父容器根据您加载的元素数量调整其高度。

如果您还想为加载的元素保留滚动功能，则必须将控制器附加到两个列表，并且一旦内部列表到达末尾，将滚动偏移量转发给外部控制器。