返回页面时,带有过滤器搜索页面的Flutter不断从查询中添加相同的列表视图

加斯·法比恩

我最近遵循了这个答案:Flutter中的Listview过滤器搜索,介绍如何使用搜索过滤器实现Flutter Listview。过滤器按照答案中的说明工作。每次我移出该特定页面然后再返回该问题时,列表视图中的结果都增加了一倍。当我再次走出页面并再次返回时,它的大小增加了两倍。

我知道我应该在离开列表视图页面时在某处清除列表,不确定您在哪里。下面是我遵循的示例代码。我的MySQL查询很简单。SELECT * FROM table_name。

import 'dart:async';

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

void main() => runApp(new MaterialApp(
  home: new HomePage(),
  debugShowCheckedModeBanner: false,
));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController controller = new TextEditingController();

  // Get json result and convert it to model. Then add
  Future<Null> getUserDetails() async {
    final response = await http.get(url);
    final responseJson = json.decode(response.body);

    setState(() {
      for (Map user in responseJson) {
        _userDetails.add(UserDetails.fromJson(user));
      }
    });
  }

  @override
  void initState() {
    super.initState();

    getUserDetails();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Home'),
        elevation: 0.0,
      ),
      body: new Column(
        children: <Widget>[
          new Container(
            color: Theme.of(context).primaryColor,
            child: new Padding(
              padding: const EdgeInsets.all(8.0),
              child: new Card(
                child: new ListTile(
                  leading: new Icon(Icons.search),
                  title: new TextField(
                    controller: controller,
                    decoration: new InputDecoration(
                        hintText: 'Search', border: InputBorder.none),
                    onChanged: onSearchTextChanged,
                  ),
                  trailing: new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
                    controller.clear();
                    onSearchTextChanged('');
                  },),
                ),
              ),
            ),
          ),
          new Expanded(
            child: _searchResult.length != 0 || controller.text.isNotEmpty
                ? new ListView.builder(
              itemCount: _searchResult.length,
              itemBuilder: (context, i) {
                return new Card(
                  child: new ListTile(
                    leading: new CircleAvatar(backgroundImage: new NetworkImage(_searchResult[i].profileUrl,),),
                    title: new Text(_searchResult[i].firstName + ' ' + _searchResult[i].lastName),
                  ),
                  margin: const EdgeInsets.all(0.0),
                );
              },
            )
                : new ListView.builder(
              itemCount: _userDetails.length,
              itemBuilder: (context, index) {
                return new Card(
                  child: new ListTile(
                    leading: new CircleAvatar(backgroundImage: new NetworkImage(_userDetails[index].profileUrl,),),
                    title: new Text(_userDetails[index].firstName + ' ' + _userDetails[index].lastName),
                  ),
                  margin: const EdgeInsets.all(0.0),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  onSearchTextChanged(String text) async {
    _searchResult.clear();
    if (text.isEmpty) {
      setState(() {});
      return;
    }

    _userDetails.forEach((userDetail) {
      if (userDetail.firstName.contains(text) || userDetail.lastName.contains(text))
        _searchResult.add(userDetail);
    });

    setState(() {});
  }
}

List<UserDetails> _searchResult = [];

List<UserDetails> _userDetails = [];

final String url = 'my url address for mysql php query ';
class UserDetails {
  final int id;
  final String firstName, lastName, profileUrl;

  UserDetails({this.id, this.firstName, this.lastName, this.profileUrl = 'https://i.amz.mshcdn.com/3NbrfEiECotKyhcUhgPJHbrL7zM=/950x534/filters:quality(90)/2014%2F06%2F02%2Fc0%2Fzuckheadsho.a33d0.jpg'});

  factory UserDetails.fromJson(Map<String, dynamic> json) {
    return new UserDetails(
      id: json['id'],
      firstName: json['name'],
      lastName: json['username'],
    );
  }
}
香托

在添加新值之前,请尝试清除列表。

setState(() {
  _userDetails.clear();
  for (Map user in responseJson) {
    _userDetails.add(UserDetails.fromJson(user));
  }
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在 Django 视图页面中添加查询集月份和年份下拉列表过滤器

来自分类Dev

弹性搜索 更像这个带有过滤器的查询是添加结果

来自分类Dev

带有搜索过滤器的Flutter应用网格视图?

来自分类Dev

雄辩的带有过滤器的复杂查询

来自分类Dev

带有过滤器的AppEngine数据存储区查询从不返回结果(Go)

来自分类Dev

Swift中带有过滤器的高级Firebase查询

来自分类Dev

如何从Python列表中创建不同的数据框(带有过滤器)

来自分类Dev

带有过滤器的GetPivotData

来自分类Dev

带有过滤器的mdChips

来自分类Dev

将多个过滤器添加到ElasticsearchPhp中的现有过滤器

来自分类Dev

当执行参数化的N1QL查询时,Couchbase不使用带有过滤器的索引

来自分类Dev

AngularJS搜索过滤器不会在所有页面中搜索

来自分类Dev

列表视图中的搜索过滤器在单击项目时返回错误值

来自分类Dev

带有布尔的弹性搜索过滤器查询返回无效结果

来自分类Dev

带有布尔的弹性搜索过滤器查询返回无效结果

来自分类Dev

Wagtail / Django:查询过滤器仅返回用户具有访问权限的页面?

来自分类Dev

带有多个下拉过滤器的页面

来自分类Dev

带有多个过滤器的Elasticsearch搜索查询

来自分类Dev

带有过滤器的搜索栏,以及使用Ionic 2的JSON数据

来自分类Dev

带有过滤器的高级搜索-Angular.js

来自分类Dev

在弹性搜索中使用带有过滤器的聚合

来自分类Dev

带有过滤器的多个字段的弹性搜索分组

来自分类Dev

SQL查询返回匹配任何或所有过滤器但不超过过滤器的行

来自分类Dev

在带有Cards的RecyclerView上添加搜索过滤器?

来自分类Dev

带有过滤器的ElasticSearch function_score查询

来自分类Dev

通过ForeignKey外部引用对带有过滤器的子查询进行了汇总

来自分类Dev

PHP Elasticsearch,带有过滤器的布尔查询未获得任何结果

来自分类Dev

带有过滤器的Get-ChildItem返回匹配但不包含的文件

来自分类Dev

枚举值到带有过滤器的字符串列表

Related 相关文章

  1. 1

    在 Django 视图页面中添加查询集月份和年份下拉列表过滤器

  2. 2

    弹性搜索 更像这个带有过滤器的查询是添加结果

  3. 3

    带有搜索过滤器的Flutter应用网格视图?

  4. 4

    雄辩的带有过滤器的复杂查询

  5. 5

    带有过滤器的AppEngine数据存储区查询从不返回结果(Go)

  6. 6

    Swift中带有过滤器的高级Firebase查询

  7. 7

    如何从Python列表中创建不同的数据框(带有过滤器)

  8. 8

    带有过滤器的GetPivotData

  9. 9

    带有过滤器的mdChips

  10. 10

    将多个过滤器添加到ElasticsearchPhp中的现有过滤器

  11. 11

    当执行参数化的N1QL查询时,Couchbase不使用带有过滤器的索引

  12. 12

    AngularJS搜索过滤器不会在所有页面中搜索

  13. 13

    列表视图中的搜索过滤器在单击项目时返回错误值

  14. 14

    带有布尔的弹性搜索过滤器查询返回无效结果

  15. 15

    带有布尔的弹性搜索过滤器查询返回无效结果

  16. 16

    Wagtail / Django:查询过滤器仅返回用户具有访问权限的页面?

  17. 17

    带有多个下拉过滤器的页面

  18. 18

    带有多个过滤器的Elasticsearch搜索查询

  19. 19

    带有过滤器的搜索栏,以及使用Ionic 2的JSON数据

  20. 20

    带有过滤器的高级搜索-Angular.js

  21. 21

    在弹性搜索中使用带有过滤器的聚合

  22. 22

    带有过滤器的多个字段的弹性搜索分组

  23. 23

    SQL查询返回匹配任何或所有过滤器但不超过过滤器的行

  24. 24

    在带有Cards的RecyclerView上添加搜索过滤器?

  25. 25

    带有过滤器的ElasticSearch function_score查询

  26. 26

    通过ForeignKey外部引用对带有过滤器的子查询进行了汇总

  27. 27

    PHP Elasticsearch,带有过滤器的布尔查询未获得任何结果

  28. 28

    带有过滤器的Get-ChildItem返回匹配但不包含的文件

  29. 29

    枚举值到带有过滤器的字符串列表

热门标签

归档