flutter 在屏幕上显示多个小部件的快照数据的正确方法

Question

我是 Flutter 的新手，我在显示多个小部件和快照数据时遇到问题。

在没有静态高度或特殊滚动的情况下，在具有多个小部件的列中显示快照数据的正确方法是什么？

我的意思是我只想拥有类似 SingleChildScrollView 的东西，所有其他小部件都必须与 _builderViewWidget 一起移动，但是当我尝试使用 SingleChildScrollView 时，我会遇到很多错误，例如：

RenderFlex 子级具有非零弹性，但传入的高度约束是无界的。

这是我的代码：

Widget build(BuildContext context) {

  StoreDatum store = widget.store;

  return Scaffold(
    appBar: AppBar(
      title: Text('HelloWorld')
    ),
    body: Container(
      padding: EdgeInsets.all(20.0),
      child: Column(
        children: <Widget>[
          Text(store.title, style: TextStyle(fontSize: 30.0),),
          Text(store.details, style: TextStyle(fontSize: 20.0),),
          _builderViewWidget(context), <---------------------------- BUILDERVIEWWIDGET
          Container(
            child: Text(store.address, style: TextStyle(fontSize: 20.0),),
          )
        ]
      ),
    ),
  );

}

Widget _builderViewWidget(BuildContext context){

  return Container(
    // height: 500.0, <------------------------------------- I DONT WANT THIS
    child: Expanded(
      child: Container(
        child: _productBuilder(context)
      )
    )
  );

}

Widget _productBuilder(BuildContext context) {

  return FutureBuilder(
    future: loadStoreProducts(),
    builder: (context,  snapshot) {
      if(snapshot.hasData){
        return _productWidget(context, snapshot.data);
      }
      else if(snapshot.hasError){
        print(snapshot.error);
        return Center(
          child: Text('ERROR'),
        );
      }
      return Center( child: CircularProgressIndicator() );
    },
  );

}

Widget _productWidget(BuildContext context, product){
  return  ListView.builder(
    // physics: const NeverScrollableScrollPhysics(),
    itemCount: product == null ? 0 : product.length,
    itemBuilder: (context, i) {
      return Container(
        child: Row(
          children: <Widget>[
            Image.network(product[i].image),
            Text(product[i].title, style: TextStyle(fontSize: 20.0),)
          ],
        )
      );
    }
  );
}

Answer 1

您在垂直轴上的高度是无限的，因为您的ListView将尝试无限扩展。 您可以将shrinkWrap: true添加到您的ListView.builder这将解决您的问题。

由于您希望整个屏幕滚动，因此您必须将您的Column包装在SingleChildScrollView中并删除所有Expanded小部件。 您可以向ListViewBuilder添加一个NeverScrollableScrollPyhsics ，这可确保 ListView 不会自行滚动，而是由SingleChildScrollView滚动整个屏幕。