如何在 flutter 應用程序中搜索數據

Question

我是 flutter 的新手，我正在學習如何搜索數據的教程。 我無法使用我自己的示例重新創建它。 我想知道如何從這個 json 數據中搜索 ListView 中的數據。

{

    "success": "true",
    "data": [
        {
            "id": 1,
            "name": "football"
        },
        {
            "id": 2,
            "name": "rugby"
        },
        {
            "id": 3,
            "name": "basketball"
        },
        {
            "id": 4,
            "name": "hockey"
        },
        {
            "id": 5,
            "name": "tennis"
        },
        {
            "id": 6,
            "name": "golf"
        }
    ]

}

使用此代碼顯示

            if (snapshot.hasData) {
              return ListView.builder(
                itemCount: sports.games.length,
                itemBuilder: (context, index) {
                  if (sports.games.length > 0) {
                    final x = sports.games[index];
                    final y = sports.games[index].id.toString();
                    return ListTile(
                      title: Text(y),
                      subtitle: Text(x.name),
                    );
                  }
                },
              );
            }
          },

Answer 1

首先，根據此答案，您的 JSON 文件將作為 Map 返回

未處理的異常：InternalLinkedHashMap<String, dynamic>' 不是 'List<dynamic> 類型的子類型

對於您的問題，這是解決方案。 首先你需要像這樣創建一個 model，可以放在單獨的文件中，也可以放在同一個文件中

class Sports {
  int id;
  String name;

  Sports({
    this.id,
    this.name,
  });

  factory Sports.fromJson(Map<String, dynamic> json) {
    return Sports(id: json['id'], name: json['name']);
  }
}

比這里是主要的。dart

import 'package:aberdeen/model.dart';
import 'package:flutter/material.dart';
import 'dart:convert';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyApp> {
  TextEditingController controller = new TextEditingController();
  List<Sports> array = [];
  List<Sports> _filtered = [];
  List<Sports> _null_filtered = [];
  String jsonTest =
      '{"success": "true","data": [{"id": 1,"name": "football"},{"id": 2,"name": "rugby"},{"id": 3,"name": "basketball"},{"id": 4,"name": "hockey"},{"id": 5,"name": "tennis"},{"id": 6,"name": "golf"}]}';

  void initState() {
    super.initState();
    test();
  }

  void _alterfilter(String query) {
    List<Sports> dummySearchList = [];
    dummySearchList.addAll(_filtered);
    if (query.isNotEmpty) {
      List<Sports> dummyListData = [];
      dummySearchList.forEach((item) {
        if (item.name.contains(query)) { //if you want to search it order by id you can change item.name.contains to item.id.contains
          dummyListData.add(item);
        }
      });
      setState(() {
        _filtered.clear();
        _filtered.addAll(dummyListData); //dummyListData will place all the data that match at your search bar
      });
      return;
    } else {
      setState(() {
        _filtered.clear();
        _filtered.addAll(_null_filtered); //_null_filtered will place all the data if search bar was empty after enter a words
      });
    }
  }

  Future<Sports> test() async {
    Map<String, dynamic> tagObjsJson = json.decode(jsonTest);
    List<dynamic> data = tagObjsJson["data"];
    setState(() {
      for (Map Data in data) {
        array.add(Sports.fromJson(Data));
      }
      _filtered.addAll(array);
      _null_filtered.addAll(array);
      for (int a = 0; a < _filtered.length; a++) {
        print(_filtered[a].name);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Container(
                  alignment: Alignment.center,
                  child: Container(
                    margin: const EdgeInsets.only(top: 50),
                    width: 300,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        border: Border.all(
                            width: 1,
                            color: Color.fromRGBO(11, 189, 180, 1),
                            style: BorderStyle.solid)),
                    child: TextField(
                      decoration: InputDecoration(
                          hintText: 'Search your data',
                          contentPadding: EdgeInsets.all(15),
                          border: InputBorder.none),
                      controller: controller,
                      onChanged: (value) {
                        _alterfilter(value);
                      },
                    ),
                  ),
                ),
              ],
            ),
            Expanded(
                child: Container(
              margin: const EdgeInsets.all(20),
              child: ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: _filtered.length,
                itemBuilder: (context, index) {
                  if (array.length > 0) {
                    final x = _filtered[index];
                    final y = _filtered[index].id.toString();
                    return ListTile(
                      title: Text(y),
                      subtitle: Text(x.name),
                    );
                  }
                },
              ),
            ))
          ],
        ),
      ),
    ));
  }
}

抱歉，如果我的英語很糟糕，請告訴我你是否感到困惑