Flutter setState更新数据,PageView子控件
2020-10-15 本文已影响0人
Lcc不想混_b503
问题:
setState更新数据,PageView子控件没更新
原因:
State对象的要点是它在构建之间是持久的。
- 首次构建StateFulWidget小部件时,将创建一个新的State对象。
- 第二次调用,框架找到现有的State对象并重新使用它。
StateFulState生命周期
生命周期如下:
1. initState() 只调用一次
2. didChangeDependencies() //
3. build()
4. didUpdateWidget()
5. deactivate()
6. dispose()
7. mounted == false
//当 Widget 的配置发生变化,需要重新在widget中获取新值
didUpdateWidget()
问题重现代码
/// 出现问题的页面
class LetterContainer extends StatefulWidget {
@override
_LetterContainerState createState() => _LetterContainerState();
}
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 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,
))
],
);
}
}
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(value);
}
class _LetterTileState extends State<LetterTile> {
_LetterTileState(this.value);
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更新,_LetterTileState.build 没有刷新, 结合生命周期,在_LetterTileState添加didUpdateWidget() 解决:
@override
didUpdateWidget(LetterTile oldWidget) {
value = widget.value
super.didUpdateWidget()
}
收工