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

Posted 2023-02-23

【中文标题】Android Studio 从 Textfield 获取价值并将其插入 API url

【英文标题】：Android Studio Getting value from Textfield and inserting them into API url

【发布时间】：2022-01-18 22:23:14

【问题描述】：

我使用的 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();
            ,
          ),
        ),
      ),
    );
  

【参考方案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

【讨论】：

我试过了，我得到了这个错误：未定义的名称'nummerpladeController'。

@mhmh 看看我更新的答案