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

Posted 2023-02-23

【中文标题】FutureBuilder 能够获取数据，但使用 Flutter 多次获取数据

【英文标题】：FutureBuilder is able to get data but data is taken multiple times with Flutter

【发布时间】：2021-04-04 06:19:15

【问题描述】：

我正在使用这样的简单 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,
              );
            ,
          )),
    );
  

【问题讨论】：

你能发布你的构建方法的代码吗？ （返回 FutureBuilder 的那个）

我已经在问题底部添加了构建方法，提前谢谢你我整天都在阅读和尝试

【参考方案1】：

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

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

【讨论】：

谢谢你的回答我真的很感激，但问题不是我无法获取数据，问题是数据被多次获取。当我尝试你的建议时，它并没有改变任何东西

好的，我更明白这个问题了，谢谢，我刚刚测试了你的代码，当你像你说的那样反对几个屏幕时，它在家里运行良好？

它创建了一个可滚动的页面，该页面以不同的文本值重复自己

您可以在我的驱动器上查看我执行的代码和屏幕截图：drive.google.com/drive/folders/…

【参考方案2】：

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