我如何使用文本字段和按钮搜索来查找 api id

Question

现在这是我的代码，现在我可以从我的服务器调用 api，我想知道，如何在我的模拟器上创建用于点击搜索 api id 的文本字段和按钮

现在我尝试先创建 about 文本字段，但我不知道我可以将文本字段放在我的代码中的什么地方，我也尝试将其放入 body 和 child 中，但它也不起作用

    import 'dart:async';
    import 'dart:convert';
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    Future<Album> fetchAlbum() async {
      final response =
      await http.get(Uri.parse('http://192.168.176.131:3000/api/courses/1'));
      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 Album {
      final int userId;
      final int id;
      final String title;
      Album({
        required this.userId,
        required this.id,
        required this.title,
      });
      factory Album.fromJson(Map<String, dynamic> json) {
        return Album(
          userId: json['userId'],
          id: json['id'],
          title: json['title'],
        );
      }
    }
    void main() => runApp(MyApp());
    class MyApp extends StatefulWidget {
      MyApp({Key? key}) : super(key: key);
      @override
      _MyAppState createState() => _MyAppState();
    }
    class _MyAppState extends State<MyApp> {
      late Future<Album> futureAlbum;
      @override
      void initState() {
        super.initState();
        futureAlbum = fetchAlbum();
      }
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Fetch Data Example',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            appBar: AppBar(
              title: Text('Fetch Data Example'),
            ),
    
            body: Center(
              child: FutureBuilder<Album>(
                future: futureAlbum,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text(snapshot.data!.title);
                  } else if (snapshot.hasError) {
                    return Text("${snapshot.error}");
                  }
    
                  // By default, show a loading spinner.
                  return CircularProgressIndicator();
                },
              ),
            ),
          ),
        );
      }
    }

Answer 1

根据您想要的视图布局，您有很多选择。 TextField is the control you likely will want to use for entering the search keyword. TextEditingController 建议用于获取值和管理 TextField。

将 TextEditingController 添加到您的小部件：

TextEditingController searchController = new TextEditingController();

在您的脚手架主体中，您将希望能够显示一个小部件列表。在此示例中，我通过将小部件包装在 Column. The TextField and the FlatButton are inside of a Row using Expanded 中来堆叠小部件，以使它们彼此内嵌排列。左边是文本输入，右边是按钮。该行被抛出 Container。当您按下按钮时，控制台将打印一条消息，其中包含在文本字段中输入的关键字。这是您搜索数据并根据搜索结果调整向用户显示的内容的机会。

这是我创建的构建方法：

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),

        body: Column(children: [
          Container(
            child: Row(children: [
              Expanded(
                flex: 2,
                child: TextField(
                  controller: searchController
                )
              ),
              Expanded(
                flex: 1,
                child: FlatButton(
                  onPressed: () {
                    print("this is the text to search for => ${searchController.text}");
                  },
                  child: Text("Search"),
                )
              )
            ],)
          ),
          Center(
            child: FutureBuilder<Album>(
              future: futureAlbum,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(snapshot.data?.title);
                } else if (snapshot.hasError) {
                  return Text("${snapshot.error}");
                }
                // By default, show a loading spinner.
                return CircularProgressIndicator();
              },
            ),
          ),
        ],)
        
      ),
    );

我如何使用文本字段和按钮搜索来查找 api id

How can i use text field and button search to find api id

dart

flutter

flutter-test

flutter-layout

flutter-web