json - FutureBuilder 能够获取数据，但使用 Flutter 多次获取数据

Question

我正在使用这样的简单 Json：

[
    {
        "question" : "Sky",
        "answer" : "Blue",
        
    },
    {
        "question" : "Sun",
        "answer" : "Yellow",
        
    },
]

并且能够按照我的意愿在文本小部件中获取数据，问题是jsondecoder 多次获取数据并创建多个屏幕，我知道这是因为我将 FutureBuilder 放在构建方法中，而当我将未来放在构建之外这个 ：

Future getDataArray() async {
    final dynamic resp =
        DefaultAssetBundle.of(context).loadString('load_json/words.json');
    return resp;
  }

  @override
  void initState() {
    myFuture = getDataArray();
    super.initState();
  }

var mydata = JsonDecoder().convert(snapshot.data.toString()); 仍然在 build 和 FutureBuilder 中，这就是问题所在。 我无法var mydata = JsonDecoder().convert(snapshot.data.toString());脱离构建，请帮我解决这个问题。

构建方法是：

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.purple[900],
      appBar: new AppBar(
        title: Text(widget.title),
      ),
      body: new Padding(
          padding: EdgeInsets.fromLTRB(2, 20, 2, 20),
          child: FutureBuilder(
            future: myFuture,
            builder: (context, snapshot) {
              //decode json
              var mydata = JsonDecoder().convert(snapshot.data.toString());
              return new ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                     
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          GestureDetector(
                            child: Card(
                              color: Colors.indigoAccent[400],
                              shape: RoundedRectangleBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(24.0)),
                              ),
                              elevation: 10.0,
                              shadowColor: Colors.black,
                              child: Stack(
                                fit: StackFit.loose,
                                alignment: Alignment.center,
                                children: <Widget>[
                                  new Container(
                                    width: 100.0,
                                    height: 100.0,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(24.0),
                                      color: Colors.white,
                                    ),
                                    child: Center(
                                      child: Text(
                                        mydata[index]['answer'],
                                        style: TextStyle(
                                          fontFamily: 'Arial',
                                          fontSize: 20,
                                          color: Colors.indigoAccent[400],
                                          height: 1,
                                          fontWeight: FontWeight.bold,
                                        ),
                                        textAlign: TextAlign.center,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            onTap: () {
                              print('button1');
                            },
                          ),
                          
                        ],
                      )
                    ],
                  );
                },
                itemCount: mydata == null ? 0 : mydata.length,
              );
            },
          )),
    );
  }

Answer 1

您好，亲爱的，在您未来的构建者级别上，您应该首先测试数据是否可用，然后再转换 json 以完成我建议您：

FutureBuilder(
    future: myFuture,
    builder: (context, snapshot) {
      if(snapshot.hasData){
        var mydata = JsonDecoder().convert(snapshot.data.toString());
      }else{
        // no data available
     }
 );

Answer 2

社区，我使用了 ListView.builder，而 itemCount 导致问题不是 json，我已经删除了 ListView.builder，现在问题已解决。如果有其他人像我一样误会他们的错误原因，这个问题可能会保留，但如果你认为这个问题并不常见，我可能会删除它。请在评论中这样说。谢谢你。