如何在加载图像之前消除间隙？

Question

我有一个应用程序，我在 sliverappbar 中显示图像。首次加载页面时，图像尚不存在。加载图像需要一段时间，在那段时间里，我看到了 sliverappbar 的背景颜色。

我参考了这个线程 - Flutter: Preload images on SliverAppbar，并按照它所说的进行操作。然而，加载图像的延迟仍然存在。有没有办法可以摆脱延迟？

class DescriptionPage extends StatefulWidget {
  @override
  _DescriptionPageState createState() => _DescriptionPageState();
}

class _DescriptionPageState extends State<DescriptionPage> {
  Image img;

  void initState() {
    super.initState();
    img = Image.asset("Assets/Images/bnha.jpg");
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    precacheImage(img.image, context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(slivers: <Widget>[
          SliverAppBar(
            leading: GestureDetector(
              child: Icon(Icons.arrow_back),
              onTap: () => Navigator.of(context).pop(),
            ),
            shape: ContinuousRectangleBorder(
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(50.0),
                    bottomRight: Radius.circular(50.0))),
            elevation: 5,
            expandedHeight: 200,
            pinned: true,
            floating: true,
            flexibleSpace: FlexibleSpaceBar(
              /*centerTitle: true,
          title: Text(
            'Boku no Hero Academia',
          ),*/
              background: ClipRRect(
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(15.0),
                    bottomRight: Radius.circular(15.0)),
                child: img,
              ),
            ),
          ),
        ]));
  }
}

Answer 1

使用cached_network_image缓存图片，对于第一次和更新的图片，你可以使用占位符参数放置你喜欢的任何默认图片。

更新： 使用 FadeInImage.assetNetwork() 代替