Flutter - json过滤器列表视图答案

【问题标题】：Flutter - json filter listviewFlutter - json过滤器列表视图
【发布时间】：2020-09-16 15:07:39
【问题描述】：

我是 Flutter 的新手，我有一个如下所示的本地 json 文件，设法在我的 UI 中显示它，并且还显示了过滤器/搜索栏，但现在我正在尝试制作过滤器列表视图功能。我尝试了几件事，但没有成功。如何将用户输入与我的 JSON 文件中的数据进行比较？我想知道如何使搜索功能适用于“名称”？

{
    "name": "Telekinesis",
    "description": "Rubick uses his telekinetic powers to lift the enemy into the air briefly and then hurls them back at the ground.",
    "logo_url": "http://static.wikia.nocookie.net/dota2_gamepedia/images/0/0e/Telekinesis_icon.png"
  },

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Header'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController controller = new TextEditingController();

  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(child: Text(widget.title)),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                decoration: InputDecoration(
                    hintText: "Search Title",
                    border: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Theme.of(context).primaryColor))),
              ),
            ),
            Expanded(
              child: FutureBuilder(
                future: DefaultAssetBundle.of(context)
                    .loadString('components/abilities-list.json'),
                builder: (context, snapshot) {
                  var myData = jsonDecode(snapshot.data.toString());
                  return ListView.builder(
                    itemBuilder: (BuildContext context, index) {
                      return ListTile(
                          leading: CircleAvatar(
                              backgroundImage:
                                  NetworkImage(myData[index]['logo_url'])),
                          title: Text('Name: ' + myData[index]['name']),
                          subtitle: Text(
                            'Description: ' + myData[index]['description'],
                          ));
                    },
                    itemCount: myData == null ? 0 : myData.length,
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

com/users/14288499/muhammad-medani 制作一个类似的数据类

class JSONData {
  String name;
  String description;
  String logoUrl;

  JSONData({this.name, this.description, this.logoUrl});

  JSONData.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    description = json['description'];
    logoUrl = json['logo_url'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['name'] = this.name;
    data['description'] = this.description;
    data['logo_url'] = this.logoUrl;
    return data;
  }
}

当您从未来的构建器获取数据时，然后将此 snapshot.data 传递给 fromJson 方法，这样您就可以获取它的对象，然后您也可以进行搜索。像这样创建List<JSONData> data= [];，然后您可以在 listview builder 中访问它并像这样进行搜索

data.forEach((userDetail) {
      if (data.name.contains(text) || data.name.contains(text))
        _searchResult.add(userDetail);
    });

【讨论】：