我想通过在搜索字段中输入的文本来过滤列表视图。在线和本网站上有很多示例，但所有内容都过于简化，所有内容都在一个有状态的小部件中，和/或看起来有点混乱，可能不是构建事物的最佳方式。我有一个简单的应用程序，它使用 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类中获取。
我可以轻松地在我的 dos 类中构建一个方法，该方法将使用 .toLowerCase 和 .contains 返回一个列表，该方法接受一些文本用于构建包含已过滤项目的新列表，但是当我失败时，我也在这里旋转了一堆通过消费者将其绑定回我的dogData。
这是应用程序、移动应用程序、网络等中的常见任务，因此我必须相信有一种干净/优雅/正确（比其他方式更多）的方法来完成此任务。我想，只是迷失在细节中。
任何帮助将不胜感激。 谢谢你， 鲍勃
您可以复制粘贴运行下面的完整代码
这个想法就像 Todo 应用程序有 3 种不同的UnmodifiableListView
UnmodifiableListView<Task> get allTasks,
UnmodifiableListView<Task> get incompleteTasks
UnmodifiableListView<Task> get completedTasks
托多的例子https://dev.to/shakib609/create-a-todos-app-with-flutter-and-provider-jdh
您可以使用以下代码片段返回UnmodifiableListView您需要基于搜索字符串并在onChanged call 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),
),
)),
);
}),
],
),
),
);
}
}