使用提供者和模型类搜索/过滤 ListView

Question

我想通过输入到搜索字段中的文本过滤列表视图。在线和本网站上有许多示例，但所有示例都在一个有状态的小部件中过度简化和/或看起来有点混乱，可能不是构建事物的最佳方式。我有一个简单的应用程序，它使用 Provider、一个模型类 (Dog) 和一个 Dogs 类，其中包含我正在使用的列表。

目标：按输入的文本过滤狗列表。

狗模型

class Dog {
  final String breed;
  final String name;
  final int age;

  Dog({this.breed, this.name, this.age});
}

狗类

import 'package:flutter/cupertino.dart';
import 'dart:collection';

import '../models/dog.dart';

class Dogs extends ChangeNotifier {
  final List<Dog> _myDogs = [
    Dog(name: 'Mackie', age: 8, breed: 'Rottweiler'),
    Dog(name: 'Riley', age: 8, breed: 'Rottweiler'),
    Dog(name: 'Tank', age: 7, breed: 'Mastiff'),
    Dog(name: 'Tanner', age: 7, breed: 'Mastiff'),
    Dog(name: 'Rocky', age: 10, breed: 'Rottweiler'),
    Dog(name: 'Angel', age: 11, breed: 'Poodle'),
    Dog(name: 'Roxie', age: 8, breed: 'St. Bernard'),
    Dog(name: 'Spud', age: 8, breed: 'St. Bernard'),
    Dog(name: 'Nick', age: 4, breed: 'Rottweiler'),
  ];

  UnmodifiableListView<Dog> get dogs => UnmodifiableListView(_myDogs);
}

主要与 ListView

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';
import 'providers/dogs.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Dogs(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _controller = TextEditingController();
  String _searchText;

  @override
  void initState() {
    _controller.addListener((){
      setState(() {
        _searchText = _controller.text;
      });
    },);
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dogs',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dogs'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: "Search",
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(4.0),
                  ),
                ),
              ),
              onChanged: (value){
                //TODO when text is entered into search bar
              },
            ),
            Consumer<Dogs>(
              builder: (context, dogData, child) => Expanded(
                child: ListView.builder(
                    shrinkWrap: true,
                    itemCount: dogData.dogs.length,
                    itemBuilder: (context, index) => Card(
                          elevation: 3,
                          child: ListTile(
                            title: Text(dogData.dogs[index].name),
                          ),
                        )),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

经过几次迭代，根据我从网上找到的知识中学到的东西，我已经停止并清理了这一点。

我有我的列表视图显示狗和我的 TextField 我正在使用一个有状态的小部件，所以我可以将 init 用于 TextController 侦听器并在完成后处理它我的文本控制器与控制器一起设置，我正在初始化一个变量将搜索文本保存到 controller.text 我相当确定我需要使用 TextField 的 onChanged 来使用我的搜索工具的值（以某种方式）

目前，我的列表视图构建器正在获取基于 dogData.dogs.length 的列表，但这不包括过滤事物的逻辑，因为它只是从我的 Dogs 类中获取。

我可以轻松地在我的 do 类中构建一个方法，该方法将使用 .toLowerCase 和 .contains 返回一个列表，该方法接受一些文本以用于构建一个包含过滤项的新列表，但我也在这里抛出了一堆，因为我失败了通过消费者将其绑定回我的 dogData。

这是应用程序、移动应用程序、网络等中的一项常见任务，所以我必须相信有一种干净/优雅/正确（比其他方式更多）的方法来完成这项任务。我想只是迷失在细节中。

任何帮助将不胜感激。谢谢你，鲍勃

Answer 1

您可以在下面复制粘贴运行完整代码
这个想法就像 Todo App 有 3 个不同UnmodifiableListView

UnmodifiableListView<Task> get allTasks, 
UnmodifiableListView<Task> get incompleteTasks
UnmodifiableListView<Task> get completedTasks

Todo 的例子https://dev.to/shakib609/create-a-todos-app-with-flutter-and-provider-jdh

您可以使用以下代码片段UnmodifiableListView根据搜索字符串和onChanged调用返回您需要的provider changeSearchString
其他部分，例如ListView不必更改

  String _searchString = "";

  UnmodifiableListView<Dog> get dogs => _searchString.isEmpty
      ? UnmodifiableListView(_myDogs)
      : UnmodifiableListView(
          _myDogs.where((dog) => dog.breed.contains(_searchString)));

  void changeSearchString(String searchString) {
    _searchString = searchString;
    print(_searchString);
    notifyListeners();
  }

  ...

  onChanged: (value) {
            Provider.of<Dogs>(context, listen: false)
                .changeSearchString(value);
          },

工作演示用面包搜索狗

完整代码

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'dart:collection';
import 'package:provider/provider.dart';

class Dogs extends ChangeNotifier {
  final List<Dog> _myDogs = [
    Dog(name: 'Mackie', age: 8, breed: 'Rottweiler'),
    Dog(name: 'Riley', age: 8, breed: 'Rottweiler'),
    Dog(name: 'Tank', age: 7, breed: 'Mastiff'),
    Dog(name: 'Tanner', age: 7, breed: 'Mastiff'),
    Dog(name: 'Rocky', age: 10, breed: 'Rottweiler'),
    Dog(name: 'Angel', age: 11, breed: 'Poodle'),
    Dog(name: 'Roxie', age: 8, breed: 'St. Bernard'),
    Dog(name: 'Spud', age: 8, breed: 'St. Bernard'),
    Dog(name: 'Nick', age: 4, breed: 'Rottweiler'),
  ];

  String _searchString = "";

  UnmodifiableListView<Dog> get dogs => _searchString.isEmpty
      ? UnmodifiableListView(_myDogs)
      : UnmodifiableListView(
          _myDogs.where((dog) => dog.breed.contains(_searchString)));

  void changeSearchString(String searchString) {
    _searchString = searchString;
    print(_searchString);
    notifyListeners();
  }
}

class Dog {
  final String breed;
  final String name;
  final int age;

  Dog({this.breed, this.name, this.age});
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Dogs(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _controller = TextEditingController();
  String _searchText;

  @override
  void initState() {
    _controller.addListener(
      () {
        setState(() {
          _searchText = _controller.text;
        });
      },
    );
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dogs',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dogs'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: "Search",
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(4.0),
                  ),
                ),
              ),
              onChanged: (value) {
                Provider.of<Dogs>(context, listen: false)
                    .changeSearchString(value);
              },
            ),
            Consumer<Dogs>(builder: (context, dogData, child) {
              print(dogData.dogs.toString());
              return Expanded(
                child: ListView.builder(
                    shrinkWrap: true,
                    itemCount: dogData.dogs.length,
                    itemBuilder: (context, index) => Card(
                          elevation: 3,
                          child: ListTile(
                            title: Text(dogData.dogs[index].name),
                          ),
                        )),
              );
            }),
          ],
        ),
      ),
    );
  }
}