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

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

我最近关注了这个答案：Listview filter search in Flutter 关于如何使用搜索过滤器实现 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,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),],);
  }

  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'],);
  }
}

解决方法

试试添加这个

@override
  void dispose() {
    _userDetails .clear();
    _searchResult.clear();

    super.dispose();
  }

,

在添加新值之前尝试清除列表..

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