在颤振中，我将如何从生成的文本框中保存文本框输入？

Posted 2023-02-23

【中文标题】在颤振中，我将如何从生成的文本框中保存文本框输入？

【英文标题】：In flutter, how would I save the TextBox input from generated textboxes?

【发布时间】：2020-07-28 07:23:01

【问题描述】：

下面是我的完整代码，运行它只需在 pubspec.yaml 中添加“http:any”到依赖项。

代码的作用是从源中获取 JSON 输入，并为 json 提要中的每个条目创建一张卡片。现在对于每个问题，我希望用户提供一个答案，所以当我将按钮添加到底部时，它会弹出一个显示答案的弹出框（我稍后会发回我的服务器）。 它看起来像：

Q1：“三”

Q2：“三十”

Q3：“某个电影角色”

第四季度：“沃尔特怀特”

（稍后我会验证我的答案）

我的 json 贴在代码下方。

import 'dart:async';
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;


Future<List<Question>> fetchQuestions(http.Client client) async 
  final response =
      await client.get('https://jsonblob.com/api/jsonBlob/a5885973-7f02-11ea-b97d-097037d3b153');

  // Use the compute function to run parsePhotos in a separate isolate
  return compute(parseQuestion, response.body);


// A function that will convert a response body into a List<Photo>
List<Question> parseQuestion(String responseBody) 
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();

  return parsed.map<Question>((json) => Question.fromJson(json)).toList();


class Question 
  final int id;
  final String question;
  final String answer;

  Question(this.id, this.question, this.answer);

  factory Question.fromJson(Map<String, dynamic> json) 
    return Question(
      id: json['id'] as int,
      question: json['question'] as String,
      answer: json['answer'] as String
    );
  


void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final appTitle = 'Isolate Demo';

    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  


 class MyHomePage extends StatelessWidget 
  final String title;

  MyHomePage(Key key, this.title) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Padding(
        child: FutureBuilder<List<Question>>(
          future: fetchQuestions(http.Client()),
          builder: (context, snapshot) 
            if (snapshot.hasError) print(snapshot.error);

            return snapshot.hasData
                ? QuestionList(questions: snapshot.data)
                : Center(child: CircularProgressIndicator());
          ,
        ),
        padding: EdgeInsets.fromLTRB(1.0, 10.0, 1.0, 10.0),
      ),
    );
  


class QuestionList extends StatelessWidget 
  final List<Question> questions;

  QuestionList(Key key, this.questions) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return ListView.builder(
      itemCount: questions.length,
      itemBuilder: (context, index) 
        return Column(
          children: <Widget>[
            Container(
                constraints: BoxConstraints.expand(
                  height: Theme.of(context).textTheme.display1.fontSize * 1.1 +
                      200.0,
                ),
                color: Colors.blueGrey,
                alignment: Alignment.center,
                child: Card(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      ListTile(

                        title: Text(questions[index].id.toString()),
                        subtitle: Text(questions[index].question),
                      ),
                      new TextFormField(
                      decoration: new InputDecoration(
                        labelText: "Answer Question",
                        fillColor: Colors.white,
                        border: new OutlineInputBorder(
                          borderRadius: new BorderRadius.circular(25.0),
                          borderSide: new BorderSide(
                          ),
                        ),
                      ),
                      validator: (val) 
                        if(val.length==0) 
                          return "Type your answer here";
                        else
                          return null;
                        
                      ,
                      keyboardType: TextInputType.text,
                      style: new TextStyle(
                        fontFamily: "Poppins",
                      ),
                    ),

                        /*
                        // make buttons use the appropriate styles for cards
                        ButtonBar(
                          children: <Widget>[                         
                            RaisedButton(
                              color: Colors.lightBlue,
                              hoverColor: Colors.blue,
                              child: const Text('Open'),
                              onPressed: () /* ... */,
                            ),
                          ],
                        ),
                     */
                    ],
                  ),
                )),
          ],
        );
      ,
    );
  




[
    
        "id" : 1,
        "question" : "what is one plus two",
        "answer": "three"
    ,
    
        "id" : 2,
        "question" :  "what is five times 6",
        "answer": "thirty"
    ,
    
        "id" : 3,
        "question" : "Who said show me the money",
        "answer": "Cuba Gooding Jnr"
    ,
    
        "id" : 4,
        "question" : "who said I am the danger",
        "answer": "Walter White"
    
]

【参考方案1】：

考虑通过controller 属性将TextEditingController 附加到TextFormField。您可以使用控制器的 text 字段访问当前 TextField 中的文本。

【讨论】：

好的，这似乎是有道理的，但目前，我的表单是作为无状态小部件构建的，我是否需要将其更改为有状态，以便我可以处理小部件？以及如何将答案绑定到从 json 获得的问题 ID？

只有当你希望你的 UI 根据给定的答案而改变时，你才可以使用 StatefulWidget。考虑将字段包装在表单中，这样您就可以通过调用表单状态的 save() 方法来保存所有字段。然后，您可以通过 onSaved 属性配置保存表单时每个字段的行为，特别是设置相应 Question 实例的 answer 属性。表单文档：api.flutter.dev/flutter/widgets/Form-class.htmlFormState 文档：api.flutter.dev/flutter/widgets/FormState-class.html