Flutter setState改變，但不重新渲染

Question

我創建了一個簡單的屏幕，它接受一個字母列表並將它們呈現在網格中。 我有一個帶有shuffle方法的按鈕，可以隨機播放此列表。 在我的構建方法中，我看到狀態正在使用新列表進行更新，並且每次按下按鈕時都會打印出一個洗牌列表，但屏幕不會更改。

class _LetterContainerState extends State<LetterContainer> {
  List<String> _letters = ['D', 'A', 'B', 'C', 'E', 'F', 'G', 'H'];



  void shuffle() {
    var random = new Random();
    List<String> newLetters = _letters;
    for (var i = newLetters.length - 1; i > 0; i--) {
      var n = random.nextInt(i + 1);
      var temp = newLetters[i];
      newLetters[i] = newLetters[n];
      newLetters[n] = temp;
    }

    setState(() {
      _letters = newLetters;
    });
  }

  @override
  Widget build(BuildContext context)  {
    print('LETTERS');
    print(_letters);
    List<LetterTile> letterTiles =
        _letters.map<LetterTile>((letter) => new LetterTile(letter)).toList();

    return new Column(
      children: <Widget>[
        new FlatButton(onPressed: shuffle, child: new Text("Shuffle")),
        new Container(

            color: Colors.amberAccent,
            constraints: BoxConstraints.expand(height: 200.0),
            child: new GridView.count(
              crossAxisCount: 4,
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
              children: letterTiles,
            ))
      ],
    );
  }
}

編輯：

import 'package:flutter/material.dart';

class Vowels {
  static const values = ['A', 'E', 'I', 'O', 'U'];

  static bool isVowel(String letter) {
    return values.contains(letter.toUpperCase());
  }
}

class LetterTile extends StatefulWidget {
  final String value;
  final bool isVowel;

  LetterTile(value)
            : value = value,
              isVowel = Vowels.isVowel(value);

  @override
  _LetterTileState createState() => new _LetterTileState(this.value);

}

class _LetterTileState extends State<LetterTile> {
  _LetterTileState(this.value);

  final String value;

  @override
  Widget build(BuildContext context) {
    Color color = Vowels.isVowel(this.value) ? Colors.green : Colors.deepOrange;
    return new
    Card(
      color: color,
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: Text(
          this.value,
          style: TextStyle(fontSize: 40.0, color: Colors.white)
        )
      )
    );

  }

}

Answer 1

如果您使用文本小部件替換示例LetterTile小部件，則重排將再次起作用。 這不起作用的原因是State對象僅在第一次實例化窗口小部件時創建。 因此，通過將值直接傳遞給狀態，可以確保它永遠不會更新。 而是通過widget.value引用該值：

class LetterTile extends StatefulWidget {
  final String value;
  final bool isVowel;

  LetterTile(this.value) : isVowel = Vowels.isVowel(value);

  @override
  _LetterTileState createState() => new _LetterTileState();
}

class _LetterTileState extends State<LetterTile> { 
  @override
  Widget build(BuildContext context) {
    Color color = Vowels.isVowel(widget.value) ? Colors.green : Colors.deepOrange;
    return Card(
      color: color,
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: Text(
          widget.value,
          style: TextStyle(fontSize: 40.0, color: Colors.white)
        )
      )
    );
  }
}

編輯：更多解釋。

State對象的意思是它在構建過程中是持久的。 第一次構建特定的LetterTile小部件時，這也會創建一個新的State對象。 第二次調用構建時，框架會查找現有的State對象並重用它。 這就是如何將定時器，網絡請求等資源綁定到不可變的小部件樹的方法。

在您的情況下，由於您將該字母傳遞給State對象，因此每個字母都會與第一個傳遞的字母保持關聯。 相反，通過從小部件中讀取它們，當替換與State對象關聯的小部件時，您始終會收到最新的數據。