Android Studio 从 Textfield 获取价值并将其插入 API url

Question

我使用的 API 是一个汽车登记处，您可以在其中输入车牌号，它会显示有关车辆的详细信息。基本上我已经尝试实现一个文本字段，我可以在其中检索它的值，以便我可以插入 API url（VALUE FROM TEXTFIELD）。我已经尝试使用本教程实现它：https://docs.flutter.dev/cookbook/forms/retrieve-input 但没有运气。

Future<Album> fetchAlbum() async {
  final response = await http
      .get(Uri.parse('https://v1.motorapi.dk/vehicles/(VALUE FROM TEXTFIELD)'),
       headers: {"X-AUTH-TOKEN": "rfrzsucnc7eo3m5hcmq6ljdzda1lz793",
        "Content-Type": "application/json",
        "Accept": "application/json",
      });

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body));
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

我尝试在小部件中插入文本字段，但没有成功

class _MyAppState extends State<MyApp> {
  late Future<Album> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
    TextEditingController nummerpladeController = new TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Fetch Data Example'),
        ),
        body: Center(
          child:
          FutureBuilder<Album>(
            future: futureAlbum,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Column( mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [ Text("Registreringsnummer: ""${snapshot.data!.registration_number}"),
                  Text("Status: ""${snapshot.data!.status}"),
                  Text("Type: ""${snapshot.data!.type}"),
                  Text("Brug: ""${snapshot.data!.use}"),
                  Text("Første registrerings dato: ""${snapshot.data!.first_registration}"),
                  Text("Vin nummer: ""${snapshot.data!.vin}"),
                  Text("Mærke: ""${snapshot.data!.make}"),
                  Text("Model: ""${snapshot.data!.model}"),
                  Text("Variant: ""${snapshot.data!.variant}"),
                  Text("Model type: ""${snapshot.data!.model_type}"),
                  Text("Farve: ""${snapshot.data!.color}"),
                  Text("Bil type: ""${snapshot.data!.chasis_type}"),
                  Text("Brændstof: ""${snapshot.data!.fuel_type}"),
                  Text("Sidste syn: ""${snapshot.data!.date}"),
                ], );

              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }

              // By default, show a loading spinner.
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Answer 1

您必须将 TextEditingController 分配给 TextField 小部件，如下所示：

TextField(
  controller: nummerpladeController,
);

要检索其值，您必须调用 nummerpladeController.text

此外，您目前无法在构建方法中访问您的 nummerpladeController，因为它是在 initState 方法中定义的。要解决此问题，请执行以下操作：

late final TextEditingController nummerpladeController;
@override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
    nummerpladeController = new TextEditingController();
  }

您可以在这里阅读更多关于 late 的信息：https://dart.dev/null-safety/understanding-null-safety#lazy-initialization