Question

用户可以使用InputChips输入答案，也可以在TextField中手动键入答案。当我尝试使用InputChips时，未检测到正确答案。当我尝试手动键入它时，当我输入和离开TextField时，FutureBuilder会重新加载。是什么原因？ Future函数仅应调用一次，因为它从Firestore中获取随机文档，分割String并加扰不同的部分。这是测验的一种形式。

class _buildPhrases extends State<PhrasesSession>{
  TextEditingController _c;
  String _text = "initial";

  @override
  void initState(){
    _c = new TextEditingController();
    super.initState();
  }

  @override
  void dispose(){
    _c?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    final Arguments args = ModalRoute.of(context).settings.arguments;
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;



    // TODO: implement build
    return Scaffold(
      body: Column(
        children: <Widget>[
          Flexible(flex: 2, child: _buildRest(context),),
          Flexible(flex: 5,
            child: FutureBuilder(
              future: getEverything(args.colName),
              builder: (context, snapshot){
                if(!snapshot.hasData){
                  return Center(child: CircularProgressIndicator(),);
                }else{

                  return Column(
                    children: <Widget>[
                      Flexible(flex: 1, child: Text(snapshot.data[1]),),
                      Divider(),
                      Flexible(flex: 2, child: Container(
                        child: TextField(
                        onChanged: (t){
                            _text += "$t ";
                            if(_c.text == snapshot.data[0]){
                              return print("CORRECT ANSWER");
                            }
                        },
                        controller: _c,
                        textAlign: TextAlign.center,
                          enabled: true,

                      ),
                      ),),
                      Flexible(flex: 3,
                        child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: snapshot.data.length - 2,
                          itemBuilder: (context, index){
                            if(index>snapshot.data.length - 2){
                              return null;
                            }else{
                              return Padding(
                                padding: const EdgeInsets.all(4.0),
                                child: InputChip(
                                  label: Text(snapshot.data[index + 2]),
                                  onPressed: (){
                                    _c.text += "${snapshot.data[index  + 2]} ";
                                  },
                                ),
                              );
                            }
                          },
                        ))
                    ],
                  );
                }
              },
            ),)
        ],
      )
    );
  }
}

Answer 1

让我们分部分解决。

当我尝试手动键入它时，当我输入和离开TextField时，FutureBuilder会重新加载。是什么原因？

这之所以令人沮丧，是因为当键盘显示或隐藏小部件的颤动框架调用build方法时，这种默认行为是FutureBuilder重新加载的原因。您应该避免在build方法内调用网络方法，我建议您使用BLoC模式来处理小部件的状态。

我的未来需要从另一条路线传递的字符串。看到参数args =...。知道我如何在initState中获取它吗？

好吧，如果您需要context实例来获得此String，则无法在initState方法内访问当前上下文，因为您的小部件尚未完全初始化。针对您的情况但并非最佳解决方案，一种简单的解决方法是验证数据是否已经从网络中获取。

Future _myNetworkFuture; // declare this as member of your stateWidgetClass

Widget build(BuildContext context){
   final Arguments args = ModalRoute.of(context).settings.arguments;
   var height = MediaQuery.of(context).size.height;
   var width = MediaQuery.of(context).size.width;

   // this line says if(_myNetworkFuture == null) do the thing.
   _myNetworkFuture ??= getEverything(args.colName);

   return ...
   Flexible(flex: 5,
        child: FutureBuilder(
          future: _myNetworkFuture,
          builder: (context, snapshot){ 
           // ...
          }
}

使用这种方法，当flutter框架调用build方法时，如果您已经获取了数据，则无需再次下载数据。但我真的建议您在这种情况下使用BLoC模式。

在Flutter中按/左键时，TextField将重新加载FutureBuilder

1 个答案: