参数类型 'Future<>' 不能分配给参数类型 ''

Question

我正在尝试构建一个 GridView 列表。 当我创建一个简单的“玩家”列表时，这一切都有效，但现在我尝试使用 sqflite 保留数据，但出现错误：

错误：无法将参数类型“Future”分配给参数类型“int”

这是我的列表构建器小部件：

class PlayerList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<PlayerData>(
      builder: (context, playerData, child) {
        return GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 20,
              crossAxisSpacing: 20,
            ),
            itemCount: playerData.playerCount,
            itemBuilder: (BuildContext context, int index) {
              final player = playerData.players[index];
              return RawMaterialButton(
                  fillColor: Color(0x991c5597),
                  elevation: 20,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        CircleAvatar(
                          backgroundColor: Colors.tealAccent,
                          radius: 30,
                          child: Icon(
                            Icons.star,
                            color: Color(0xFF16377a),
                            size: 30,
                          ),
                        ),
                        Text(player.name, style: smallTitleText),
                      ],
                    ),
                  ),
                  onPressed: () {
                    playerData.makeActive(player.name);
                    playerData.printList();
                    Navigator.pushNamed(context, PlayScreen.id);
                  });
            });
      },
    );
  }
}

这就是我获得列表计数的方式：

Future<int> get playerCount async {
  final Database db = await getDBConnector();
  final List<Map<String, dynamic>> maps = await db.query('players');
  if (maps.length != null) {
    return maps.length;
  } else { return 0;}
}

Answer 1

出现错误是因为 playerCount 没有返回 int 它返回一个 Future。 首先，您必须将您的类更改为有状态小部件并加载您的数据，如下所示

class PlayerList extends StatefulWidget {
  @override
  _PlayerListState createState() => _PlayerListState();
}

class _PlayerListState extends State<PlayerList> {
  int count;

  @override
  void initState() {
    super.initState();
    loadPlayerCount();
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<PlayerData>(
      builder: (context, playerData, child) {
        return GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 20,
              crossAxisSpacing: 20,
            ),
            itemCount: count??0,
            itemBuilder: (BuildContext context, int index) {
              final player = playerData.players[index];
              return RawMaterialButton(
                  fillColor: Color(0x991c5597),
                  elevation: 20,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        CircleAvatar(
                          backgroundColor: Colors.tealAccent,
                          radius: 30,
                          child: Icon(
                            Icons.star,
                            color: Color(0xFF16377a),
                            size: 30,
                          ),
                        ),
                        Text(player.name, style: smallTitleText),
                      ],
                    ),
                  ),
                  onPressed: () {
                    playerData.makeActive(player.name);
                    playerData.printList();
                    Navigator.pushNamed(context, PlayScreen.id);
                  });
            });
      },
    );
  }

  void loadPlayerCount() async{
    final Database db = await getDBConnector();
    final List<Map<String, dynamic>> maps = await db.query('players');
    if (maps.length != null) {
      setState(() {
        this.count = maps.length;
      });

    } else {
      setState(() {
        this.count = 0;
      });
    }
  }
}

Answer 2

用FutureBuilder包裹你的 GridView

像这样的东西

return FutureBuilder(
       future: playerData.playerCount,
       builder : (context,snapshot){
         if(!(snapshot.hasData)){
          return Container();
         }
         else{
           return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 20,
          crossAxisSpacing: 20,
        ),
        itemCount: snapshot.data,
        itemBuilder: (BuildContext context, int index) {
          final player = playerData.players[index];
          return RawMaterialButton(
              fillColor: Color(0x991c5597),
              elevation: 20,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    CircleAvatar(
                      backgroundColor: Colors.tealAccent,
                      radius: 30,
                      child: Icon(
                        Icons.star,
                        color: Color(0xFF16377a),
                        size: 30,
                      ),
                    ),
                    Text(player.name, style: smallTitleText),
                  ],
                ),
              ),
              onPressed: () {
                playerData.makeActive(player.name);
                playerData.printList();
                Navigator.pushNamed(context, PlayScreen.id);
              });
         });
         },
       );
      }
    }
);