flutter - Flutter-如何添加搜索栏以在列表中搜索

Question

我有一个国家列表，显示了这些国家的时间。请让我知道如何添加搜索栏。您可以在代码中看到WorldTime列表。因此，它将显示带有图像的国家名称。代码如下。
Choose_Location.dart

class  Chooselocation extends StatefulWidget {
      @override
      _ChooseLocationState createState() => _ChooseLocationState();
    }
    
    class _ChooseLocationState extends State<Chooselocation> {
    
      List<WorldTime> locations =[
      WorldTime(url:'Europe/London', location: 'London', flag: 'England.png'),
      WorldTime(url:'Europe/Berlin', location: 'Berlin', flag: 'Germany.jpg'),
      WorldTime(url:'Africa/Cairo', location: 'Cairo', flag: 'Egypt.jpg'),
      WorldTime(url:'Africa/Nairobi', location: 'Nairobi', flag: 'Kenya.jpg'),
      WorldTime(url:'Asia/Jakarta', location: 'Seoul', flag: 'Indonesia.jpg'),
      WorldTime(url:'Asia/Qatar', location: 'Qatar', flag: 'Qatar.png'),
      WorldTime(url:'Africa/Khartoum', location: 'Sudan', flag: 'Sudan.jpg'),
      WorldTime(url:'Asia/Karachi', location: 'Pakistan', flag: 'Pakistan.png'),
      WorldTime(url:'America/New_York', location: 'USA', flag: 'USA.jpg'),
           
      ];
    
    
      void updatetime(index) async{
      WorldTime instance = locations[index];
      await instance.getTime();
      // mnavigate to home screen
      Navigator.pop(context,{
    'location':instance.location,
    'flag':instance.flag,
    'time':instance.time,
    'isDaytime':instance.isDaytime,
    
      });
      }
     
     
      @override
      Widget build(BuildContext context) {
        print('Build state function');
        return Scaffold(
           
          backgroundColor: Colors.blueGrey[200],
          appBar: AppBar(
          title:Text('Choose a Location'),
          centerTitle:true,
          elevation:0,
          ),
    
          body: ListView.builder(
            itemCount:locations.length,
            itemBuilder: (context,index){
              return Padding(
                padding: const EdgeInsets.symmetric(vertical:1.0, horizontal: 4.0),
                child: Card(child: ListTile(
                  onTap: (){
                    updatetime(index);
                    print(locations[index].location);
    
                  },
                  title:Text(locations[index].location),
                  leading: CircleAvatar(
                    backgroundImage: AssetImage('assets/${locations[index].flag}')),
                ),
                ),
              );
            }      
          ),
        );
      }    
    }

您可以在下面看到用户界面的图像。

Answer 1

就我而言，我没有WorldTime模型类，因此我将List<String>用于过滤器功能。您可以使用模型类来过滤列表。

class Chooselocation extends StatefulWidget {
  @override
  _ChooseLocationState createState() => _ChooseLocationState();
}

class _ChooseLocationState extends State<Chooselocation> {
  List<String> locations = [
    'London',
    'Berlin',
    'Cairo',
    'Nairobi',
    'Seoul',
    'Qatar',
    'Sudan',
    'Pakistan',
    'USA'
  ];
  List<String> locationList;
  var locationDataList = List<String>();

  final TextEditingController _filter = TextEditingController();
  String _searchText = "";
  Icon _searchIcon = new Icon(Icons.search);
  Widget _appBarTitle;

  void _searchPressed(String title) {
    setState(() {
      if (this._searchIcon.icon == Icons.search) {
        this._searchIcon = new Icon(Icons.close);
        this._appBarTitle = new TextField(
          style: setTextStyle(),
          controller: _filter,
          decoration: new InputDecoration(
              focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white)),
              prefixIcon: new Icon(
                Icons.search,
                color: Colors.white,
              ),
              hintText: 'Search...',
              hintStyle: setTextStyle()),
        );
      } else {
        this._searchIcon = new Icon(Icons.search);
        this._appBarTitle = new Text(title);
        _filter.clear();
        this._appBarTitle = null;
      }
    });
  }

  setTextStyle() {
    return TextStyle(color: Colors.white);
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print("object");
    _filter.addListener(() {
      if (_filter.text.isEmpty) {
        setState(() {
          _searchText = "";
          updateFilter(_searchText);
        });
      } else {
        setState(() {
          _searchText = _filter.text;
          updateFilter(_searchText);
        });
      }
    });
  }

  void updateFilter(String text){
    print("updated Text: ${text}");
    filterSearchResults(text);
  }

  void filterSearchResults(String query) {
    List<String> dummySearchList = List<String>();
    dummySearchList.addAll(locationList);
    print("List size : " + dummySearchList.length.toString());
    if(query.isNotEmpty) {
      List<String> dummyListData = List<String>();
      dummySearchList.forEach((item) {
        if(item.toLowerCase().contains(query.toLowerCase())) {
          dummyListData.add(item);
        }
      });
      setState(() {
        locationDataList.clear();
        locationDataList.addAll(dummyListData);
      });
      return;
    } else {
      setState(() {
        locationDataList.clear();
        locationDataList.addAll(locations);
      });
    }
  }

  @override
  Widget build(BuildContext context) {

    if (locationList == null) {
      locationList = List<String>();
      locationList.addAll(locations);
      locationDataList.addAll(locationList);
    }

    return Scaffold(
      backgroundColor: Colors.blueGrey[200],
      appBar: AppBar(
        actions: <Widget>[
          IconButton(
            icon: _searchIcon,
            onPressed: () {
              _searchPressed("Choose Location");
            },
            tooltip: "Search",
          )
        ],
        title: _appBarTitle == null ? Text('Choose a Location') : _appBarTitle,
        centerTitle: true,
        elevation: 0,
      ),
      body: ListView.builder(
          itemCount: locationDataList.length,
          itemBuilder: (context, index) {
            return Padding(
              padding:
                  const EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
              child: Card(
                child: ListTile(
                  title: Text(locationDataList[index]),
                  leading: CircleAvatar(),
                ),
              ),
            );
          }),
    );
  }
}

以上代码的输出为:

希望这可以对您有所帮助:)