LayoutBuilder 中的 FutureBuilder 多次调用 future答案

【问题标题】：FutureBuilder inside a LayoutBuilder call future many timesLayoutBuilder 中的 FutureBuilder 多次调用 future
【发布时间】：2018-12-25 05:06:23
【问题描述】：

我在尝试LayoutBuilder 和FutureBuilder 时遇到了一个情况。如果我将FutureBuilder 放在LayoutBuilder 以外的小部件中，一切都很好，未来只解决一次。但是当我将FutureBuilder 放在LayoutBuilder 中时，未来会无限解决，并且永远不会绘制最终的小部件。

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Photo View example',
      theme: theme,
      home: new Scaffold(
        body: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return ImagePainter();
          }
      ),
      ),
    );
  }
} 


class ImagePainter extends StatelessWidget{
  Future<ui.Image> loadImage() async {
    ByteData data = await rootBundle.load("graphics/test.jpg");
    if (data == null) {
      print("data is null");
    } else {
      var codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
      var frame = await codec.getNextFrame();
      return frame.image;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
                child: FutureBuilder(
        future: loadImage(),
        builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
          switch(snapshot.connectionState) {
            case ConnectionState.waiting : 
              return Center(child: Text("loading..."),);
            default:
              if (snapshot.hasError) {
                return Center(child: Text("error: ${snapshot.error}"),);
              } else {
                print("data: ${snapshot.data}");
                return Placeholder(); //just for testing
              }
            }
          },
        ),
    );
  }
}

所以可以解释一下？，或者我做错了什么。

【问题讨论】：

你说的“widget is never draw”是什么意思？是否绘制了错误小部件？
我认为您更改了FutureBuilder 中的小部件树，这会导致LayoutBuilder 的重建。结果，这个过程是循环的
@KirillShashov 我也是这么想的，但从我在代码中看到的情况看来不是这样。
不，正如您在代码示例中看到的那样，返回 Image Painter 时对小部件树没有任何更改。它一直在循环中。
@NatwarSingh 你解决了吗？我面临着类似的问题。

标签： flutter dart flutter-layout

【解决方案1】：

class ImagePainter extends StatelessWidget{
Future<ui.Image> loadImage() async {
ByteData data = await rootBundle.load("graphics/test.jpg");
if (data == null) {
  print("data is null");
} else {
  var codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
  var frame = await codec.getNextFrame();
  return frame.image;
}


}
  @override
  Widget build(BuildContext context) {
    return Container(
            child: FutureBuilder(
    future: loadImage(),
    builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
      switch(snapshot.connectionState) {
        case ConnectionState.waiting : 
            print("data: ${snapshot.data}");
          //return Center(child: Text("loading..."),);
        default:
          if (snapshot.hasError) {
            return Center(child: Text("error: ${snapshot.error}"),);
          } /*else {
            print("data: ${snapshot.data}");
            return Placeholder(); //just for testing
           }*/
         }
        },
      ),
   );
 }
}

【讨论】：

问题是当您将 Future builder 放入布局构建器时。