flutter - LayoutBuilder 中的 FutureBuilder 多次调用 future

Question

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

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
              }
            }
          },
        ),
    );
  }
}

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

Answer 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
           }*/
         }
        },
      ),
   );
 }
}