如何防止 FutureBuilder 在加载时更改旧的小部件？

Question

背景：目前我在远程服务器图像查看器上工作，我使用FutureBuilder显示图像并在图像之间切换，它工作正常，但会在切换图像之间的几毫秒内显示空白屏幕。

问题：我想在FutureBuilder加载时保留旧图像小部件或在旧图像小部件上显示加载圆圈，而不是在加载时显示新的空白加载页面。或者任何其他没有Futurebuilder的解决方案（如可滚动小部件）？

骨架代码：

class Viewer extends StatefulWidget {
  Viewer(this.filename, {Key key}) : super(key: key);
  final String filename;
  @override
  _ViewerState createState() {
    return _ViewerState();
  }
}

class _ViewerState extends State<Viewer> {
  int _index = 0;
  @override
  Widget build(BuildContext context) {
    return  GestureDetector(
          child: Container(
            child: showImage(context, _index),
          ),
          onPanDown: (DragDownDetails e) {
            //it will change _index to move to next image when tap down
            _index+=1;
          }
        );
  }

  Widget showImage(BuildContext context, int index) {
    return FutureBuilder<SmbHalfResult>(
      future: () async {
        //load image from remote server or from memory cache,the SmbHalfResult contain a Uint8List image.
        return SmbHalfResult();
      }(),
      builder: (BuildContext context, AsyncSnapshot<SmbHalfResult> snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            return Text("Error: ${snapshot.error}");
          } else {
            //show image.
            return Image.memory(snapshot.data.result.content);
          }
        } else {
          // show loading circle,it will new a blank page,but I even want to display old image other than a blank page when loading.
          return Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

Answer 1

最后我得到了带有参数物理的PreloadPageView physics: new NeverScrollableScrollPhysics()和preloadPageController.jumpToPage(index) ，它完美地满足了我的需要，没有任何闪烁。

GestureDetector(
          child: Container(
              child: PreloadPageView.builder(
            preloadPagesCount: 5,
            itemBuilder: (BuildContext context, int index) =>
                FutureImage(index, widget.filename),
            controller: preloadPageController,
            physics: new NeverScrollableScrollPhysics(),
          )),
          onPanDown: (DragDownDetails e) {
            Offset globalPosition = e.globalPosition;
            RenderBox findRenderObject = context.findRenderObject();
            Size size = findRenderObject.size;
            Area area = getArea(globalPosition, size);
            if (area == Area.lef) {
              index--;
              preloadPageController.jumpToPage(index);
            } else if (area == Area.right) {
              index++;
              preloadPageController.jumpToPage(index);
            }
          },
        )

Answer 2

提供商将是很好的解决方案。

在您的小部件树中，查看器小部件上方的小部件必须如下所示

ChangeNotifierProvider<SmbHalfResult>(
  create: (context) {
    var smbHalfResult = SmbHalfResult(); 
    smbHalfResult.fetchImage(0);
    return smbHalfResult; 
  },  
  child: Viewer(); 
)

SmbHalfResult class 应该与此类似

class SmbHalfResult extends ChangeNotifier{
  Uint8List image; 
  void fetchImage(int index) async {
    this.image = await downloadImage(index); 
    notifyListeners(); 
  }
}

最后你的实际用户界面必须是这样的

class _ViewerState extends State<Viewer> {
  int _index = 0;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        child: Consumer<SmbHalfResult>(
          builder: (context, model) {
            if(model.image != null) return Image.memory(model.image);
            return CircularProgressIndicator(); 
          }
        ),
      ),
      onPanDown: (DragDownDetails e) {
        Provider.of<SmbHalfResult>(context, listen: false).fetchImage(); 
      }
    );
  }
}