Question

在我的flutter项目中，我有一个 SteamBuilder ，由一个包装在 ListView 内的容器包装，而Scaffold的主体部分是一列。

它看起来像下面的图像-

在图像中，蓝色部分是Container 1，黄色部分是Stream builderone（我从API加载了一些数据），红色部分是Container2。

现在问题是------

当我在容器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中的数据，并确保父容器根据加载的元素数来调整其高度。

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

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

1 个答案: