Flutter setState更新数据,PageView子控件

2020-10-15  本文已影响0人  Lcc不想混_b503

问题:

setState更新数据,PageView子控件没更新

原因:

State对象的要点是它在构建之间是持久的。

  1. 首次构建StateFulWidget小部件时,将创建一个新的State对象。
  2. 第二次调用,框架找到现有的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()
  }

收工

上一篇 下一篇

猜你喜欢

热点阅读