为什么 setState 无法重述小部件类答案

【问题标题】：Why setState could not restate the widget class为什么 setState 无法重述小部件类
【发布时间】：2021-01-11 23:17:09
【问题描述】：

我已经编写了纸牌游戏的代码，尝试使用扑克牌库显示纸牌，并且在小部件类中创建了显示玩家手牌，它可以在静态阶段以良好的顺序显示纸牌。但是，当我尝试发牌并将附加牌添加到列表（即手牌）和 setState 时，并没有相应地更新筛选。有人可以帮忙吗？

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Games _game = Games();
  int _counter = 0;
  List<Kar> desk = [];
  List<Kar> remainingDesk = [];
  Kar _drawnCard;
  double _avgCounter = 0;
  ShapeBorder shape = RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
      side: BorderSide(color: Colors.black, width: 1));
  List<Kar> _playerA = [
    Kar(suit: 1, rank: 14),
    Kar(suit: 1, rank: 11),
  ];
  List<Kar> _dealer = [
    Kar(suit: 2, rank: 12),
    Kar(suit: 3, rank: 13),
  ];
  List<Kar> _blackJack = [
    Kar(suit: 1, rank: 14),
    Kar(suit: 1, rank: 11),
    Kar(suit: 3, rank: 13),
  ];
  double _cardSize = 0;
  bool _selected = false;
  bool _second = false;
  bool _playerTurn = false;
  bool _dealerTurn = false;
  bool _playerTurnEnd = false;
  bool _dealerTurnEnd = false;
  int _handScore = 0;

  @override
  void initState() {
    Games _games = Games();
    setState(() {
      desk = createDesk();
      remainingDesk = List.from(desk);
    });
    _incrementCounter();
    super.initState();
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          width: 300,
          height: 580,
          child: Stack(
            children: [
              PlayerHand(player: false, hand: _playerA),
              Text('Score: ' + _handScore.toString()),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            Kar _drawnCard = drawCardfromDesk(remainingDesk);
              setState(() {
                _handScore += _drawnCard.rank;
                _playerA.add(_drawnCard);

              });
            });
          },
               tooltip: 'Increment',
          child: Icon(Icons
              .add)), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  List<Kar> createDesk() {
    List<Kar> desk = [];
    for (int _rank = 2; _rank < 15; _rank++) {
      for (int _suit = 1; _suit < 5; _suit++) {
        desk.add(Kar(suit: _suit, rank: _rank));
      }
      ;
    }
    ;
    return desk;
  }

  Kar drawCardfromDesk(List<Kar> desk) {
    Kar _dealCard;
    var rng = new Random();
    _dealCard = desk[rng.nextInt(desk.length)];
    desk.remove(_dealCard);
    return _dealCard;
  }
}


import 'dart:convert';

import 'dart:io';

import 'package:blackjack/main.dart';
import 'package:flutter/material.dart';
import 'package:playing_cards/playing_cards.dart';


class PlayerHand extends StatefulWidget {
  List<Kar> hand;
  bool player= false;
  BuildContext context;


  PlayerHand({
    @required this.hand,
    @required this.player
  });

  @override
  _PlayerHandState createState() => _PlayerHandState();
}

class _PlayerHandState extends State<PlayerHand> {
  int _handLength=0;
  bool _player= false;
  ShapeBorder shape = RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
      side: BorderSide(color: Colors.black, width: 1));




@override
  void initState() {
    //var authBloc = Provider.of<AuthBloc>(context);
    // TODO: implement initState
    setState(() {
      _handLength = widget.hand.length;
      _player = widget.player;
    });
    

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //final authBloc = Provider.of<AuthBloc>(context);
    

    return _handLength==0
    ?Container()
    : _handLength ==1
    ? Container(
        child: PlayingCardView(
          card: PlayingCard(
              suitsName[widget.hand[0].suit], cardValue[widget.hand[0].rank]),
          showBack: false,
          shape: shape,
        ),
      )
    : _handLength ==2
    ? Container(
      child:Container(
                  height: 180,
                  width: 380,
                 // duration: Duration(seconds: 1),
                  child: FlatCardFan(children: [
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[0].suit],
                            cardValue[widget.hand[0].rank]),
                        showBack: _player?true:false,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[1].suit],
                            cardValue[widget.hand[1].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                  ]))
    )
    : _handLength ==3
    ? Container(
      child:Container(
                  height: 180,
                  width: 380,
                  //duration: Duration(seconds: 1),
                  child: FlatCardFan(children: [
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[0].suit],
                            cardValue[widget.hand[0].rank]),
                        showBack: _player?true:false,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[1].suit],
                            cardValue[widget.hand[1].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                        PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[2].suit],
                            cardValue[widget.hand[2].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                  ]))
    ): _handLength ==4
    ? Container(
      child:Container(
                  height: 180,
                  width: 300,
                 // duration: Duration(seconds: 1),
                  child: FlatCardFan(children: [
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[0].suit],
                            cardValue[widget.hand[0].rank]),
                        showBack: _player?true:false,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[1].suit],
                            cardValue[widget.hand[1].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[2].suit],
                            cardValue[widget.hand[2].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[3].suit],
                            cardValue[widget.hand[3].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                  ]))
    ): _handLength ==5
    ? Container(
      child:AnimatedContainer(
                  height: 180,
                  width: 300,
                  duration: Duration(seconds: 1),
                  child: FlatCardFan(children: [
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[0].suit],
                            cardValue[widget.hand[0].rank]),
                        showBack: _player?true:false,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[1].suit],
                            cardValue[widget.hand[1].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[2].suit],
                            cardValue[widget.hand[2].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[3].suit],
                            cardValue[widget.hand[3].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                      PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[4].suit],
                            cardValue[widget.hand[4].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                  ]))
    ) : _handLength ==6
    ?Container(
      child:AnimatedContainer(
                  height: 180,
                  width: 300,
                  duration: Duration(seconds: 1),
                  child: FlatCardFan(children: [
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[0].suit],
                            cardValue[widget.hand[0].rank]),
                        showBack: _player?true:false,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[1].suit],
                            cardValue[widget.hand[1].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[2].suit],
                            cardValue[widget.hand[2].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[3].suit],
                            cardValue[widget.hand[3].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                      PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[4].suit],
                            cardValue[widget.hand[4].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                      PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[5].suit],
                            cardValue[widget.hand[5].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                  ]))
    )
    : Container(
      child:AnimatedContainer(
                  height: 180,
                  width: 300,
                  duration: Duration(seconds: 1),
                  child: FlatCardFan(children: [
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[0].suit],
                            cardValue[widget.hand[0].rank]),
                        showBack: _player?true:false,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[1].suit],
                            cardValue[widget.hand[1].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[2].suit],
                            cardValue[widget.hand[2].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                    PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[3].suit],
                            cardValue[widget.hand[3].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                      PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[4].suit],
                            cardValue[widget.hand[4].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                      PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[5].suit],
                            cardValue[widget.hand[5].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                        PlayingCardView(
                        card: PlayingCard(suitsName[widget.hand[6].suit],
                            cardValue[widget.hand[6].rank]),
                        //showBack: true,
                        elevation: 3.0,
                        shape: shape),
                  ])));

  }


}

【问题讨论】：

标签： setstate playing-cards

【解决方案1】：

动态构建您的小部件：

FlatCardFan( 
           children: List.generate(widget.hand.length, (index) =>  
                PlayingCardView(
                    card: PlayingCard(suitsName[widget.hand[index].suit],
                        cardValue[widget.hand[0].rank]),
                    showBack: _player?true:false,
                    elevation: 3.0,
                    shape: shape
                   ),
                ),
             ),

让我知道这是否适合你。

【讨论】：

════════ 渲染库捕获异常═══════════════════════════ ════ Offset 参数包含一个 NaN 值。 'dart:ui/painting.dart'：断言失败：第 40 行：''
卡显示正确，但调试控制台显示一些错误代码如上
你已经在 initstate 中设置了 _handLength = widget.hand.length;并检查_handLength == 0，等等，但是当您在手牌列表中添加一个值时，您并没有更新_handLength，最好在绘制小部件时动态检查_handLength条件。
感谢 shorol，我已经删除了初始化状态并让小部件按照建议动态工作。效果很好。
此外，Nan 的错误应该与扑克牌功能有关，当手长为 1 时，FlatCardFan 会出错。我添加了一个条件来显示 PlayingCardView 而不是 FlatCardFan，并且效果很好。