Блог

У меня есть массив строк расположения изображений. В моем классе есть int с именем displayImage, и когда я инициализирую экземпляр этого класса, я устанавливаю значение displayImage равным 0. Итак, я вижу изображение, соответствующее первому изображению в массиве. Затем я вызываю функцию, которая после тайм-аута изменяет значение int с 0 на 1, но я не вижу соответствующего второго изображения. Изображение не обновляется. Как изменить изображение при изменении отображения индекса массива?

 var images = ["amusement1.jpeg", "amusement2.jpg", "amusement3.png", "amusement4.jpeg",
    "amusement5.jpeg", "amusement6.jpeg"];

class RandomWords extends StatefulWidget {
  @override
  _RandomWordsState createState() => _RandomWordsState(0);
}

class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = TextStyle(fontSize: 10.0);
  int displayImage;

  _RandomWordsState(firstImage) {
    this.displayImage = firstImage;
  }

  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      )
    );
  }

  final timeout = Duration(seconds: 3);

  void handleTimeout() {
    print(this.displayImage);
    this.displayImage  ;
    print(this.displayImage);
  }

  switchImages () {
    print("switching image");
    const timeout = Duration(seconds: 3);
    const ms = Duration(milliseconds: 1);

    Timer startTimeout(milliseconds) {
      var duration = milliseconds == null ? timeout : ms * milliseconds;
      return Timer(duration, handleTimeout);
    }

    startTimeout(1000);
  }

  Widget _buildSuggestions() {

    return ListView.builder(
      padding: EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        if (i.isOdd) return Divider();

        final index = i ~/ 2;
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      });
    }

  @override
  Widget build(BuildContext context) {

    switchImages();
    String imageUrl = "assets/amusement/"   images[displayImage];
    final wordPair = WordPair.random();
    return Image(image: AssetImage(imageUrl));
  }
}

 

Попробуйте обновить это:

 void handleTimeout() {
   print(this.displayImage);
   this.displayImage  ;
   print(this.displayImage);
 }
 

К этому:

 void handleTimeout() {
   print(this.displayImage);

   setState((){
     this.displayImage  ;
   });
   
   print(this.displayImage);
 }
 

Чтобы перестроить виджет, вы должны инициировать изменение с помощью этого setState метода.