15

画像アセットのリストがあり、画面上に 1 つの画像ウィジェットがあります。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」が表示される前に短い白いフラッシュが発生します。

これは簡単な質問につながります: 事前にフラッシュがないように、後続のイメージ (または複数のイメージ) をメモリにプリロードする簡単な方法はありますか?

大まかな概算については、添付の GIF を参照してください。

4

1 に答える 1

29

gaplessPlayback画像が に設定されていることを確認しtrueてください。

これでプリロードの問題は解決しませんが、アセットを切り替えるときに画像が白く点滅するのを防ぐことができます。

gaplessPlayback を true に設定すると、新しい画像の読み込みが完了するまで元の画像が残り、「ホワイト フラッシュ ギャップ」がなくなります。

var img = new Image.asset(
  _photoData[_coverPhoto],
  fit: ImageFit.cover,
  height: 600.0,
  gaplessPlayback: true,
);
于 2017-01-10T01:10:47.363 に答える