如何在Flutter中使用ListView创建搜索?

问题描述 投票:0回答:1

如何为该代码创建搜索过滤器?

List<myclass> words = [
  myclass("Start","دەستپێدکت"),
  myclass("Go","دچت"),
  myclass("Drive","دهاژوت"),
  myclass("Sleep","دنڤت"),
];
android listview flutter searchbar
1个回答
0
投票
您可以在下面复制粘贴运行完整代码您可以比较TextEditingController.textListView中的元素并返回所需的结果代码段

ListView.builder( shrinkWrap: true, itemCount: words.length, itemBuilder: (context, index) { if (editingController.text.isEmpty) { return ListTile( title: Text('${words[index].word1} ${words[index].word2}'), ); } else if (words[index] .word1 .toLowerCase() .contains(editingController.text) || words[index] .word2 .toLowerCase() .contains(editingController.text)) { return ListTile( title: Text('${words[index].word1} ${words[index].word2}'), ); } else { return Container(); } }),

工作演示

enter image description here

完整代码

import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'ListView with Search'), ); } } class myclass { String word1; String word2; myclass(this.word1, this.word2); } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { TextEditingController editingController = TextEditingController(); final duplicateItems = List<String>.generate(10000, (i) => "Item $i"); var items = List<String>(); List<myclass> words = [ myclass("Start", "دەستپێدکت"), myclass("Go", "دچت"), myclass("Drive", "دهاژوت"), myclass("Sleep", "دنڤت"), ]; @override void initState() { super.initState(); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: Container( child: Column( children: <Widget>[ Padding( padding: const EdgeInsets.all(8.0), child: TextField( onChanged: (value) { setState(() {}); }, controller: editingController, decoration: InputDecoration( labelText: "Search", hintText: "Search", prefixIcon: Icon(Icons.search), border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(25.0)))), ), ), Expanded( child: ListView.builder( shrinkWrap: true, itemCount: words.length, itemBuilder: (context, index) { if (editingController.text.isEmpty) { return ListTile( title: Text('${words[index].word1} ${words[index].word2}'), ); } else if (words[index] .word1 .toLowerCase() .contains(editingController.text) || words[index] .word2 .toLowerCase() .contains(editingController.text)) { return ListTile( title: Text('${words[index].word1} ${words[index].word2}'), ); } else { return Container(); } }), ), ], ), ), ); } }

© www.soinside.com 2019 - 2024. All rights reserved.