我创建了一个简单的屏幕,该屏幕接受字母列表并将其呈现在网格中。我有一个带随机播放方法的按钮,可以随机播放此列表。在我的构建方法中,我看到状态正在用新列表更新,并且每次按下按钮时都会打印出随机排列的列表,但是屏幕没有变化。
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) ) ) ); } }
如果将您的示例LetterTile小部件替换为Text小部件,则改组将再次起作用。这不起作用的原因是,仅在第一次实例化窗口小部件时才创建State对象。因此,通过将值直接传递给状态,可以确保它永远不会更新。而是通过widget.value以下方式引用值:
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对象关联的小部件时,您始终会收到最新的数据。