在Flutter中預載本地圖像資產

Question

我有一個簡單的圖像資源列表，並且我在屏幕上有一個圖像小部件。我使用一個按鈕來遍歷它們，使用setState（）。

const List<String> _photoData = const [ 
    "assets/generic-cover.jpg", 
    "assets/generic-cover2.jpg", 
    "assets/generic-cover3.jpg", 
    "assets/generic-cover4.jpg", 
]; 

class _MyHomePageState extends State<MyHomePage> { 

    int _coverPhoto = 0; 

    void _switchCoverPhoto() { 
    setState(() { 
     _coverPhoto++; 
     if (_coverPhoto == _photoData.length) { 
     _coverPhoto = 0; 
     } 
    }); 
    } 

    @override 
    Widget build(BuildContext context) { 

    return new Scaffold(
     body: new Stack(
     children: <Widget>[ 
      new Image.asset (
      _photoData[_coverPhoto], 
      fit: ImageFit.cover, 
      height: 600.0, 
     ), 
      new Positioned (// photo toggle button 
      child: new IconButton(
       icon: new Icon (Icons.photo), 
       onPressed: _switchCoverPhoto, 
       color: Colors.white, 
      ), 
      top: 32.0, 
      right: 32.0, 
     ), 
     ] 
    ) 
    ); 
    } 

第一張圖片呈現良好。但是，當我調用_switchCoverPhoto（）時，會在「assets/generic-cover2.jpg」顯示之前出現一個簡短的白色閃爍。

這導致了一個簡單的問題：是否有一種簡單的方法來預先加載後續圖像（或圖像）到內存中，以便事先沒有閃光？

See attached GIF for a loose approximation.

Answer 1

請確保您有gaplessPlayback設置爲true爲你的形象。

這不會解決預加載問題，但它會防止圖像在切換資源時閃爍變白。

將gaplessPlayback設置爲true時，您的原始圖像將保留到新圖像加載完成，並且不會出現「白色閃光間隙」。

var img = new Image.asset(
    _photoData[_coverPhoto], 
    fit: ImageFit.cover, 
    height: 600.0, 
    gaplessPlayback: true, 
);