栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何在Flutter中创建工具栏SearchView

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何在Flutter中创建工具栏SearchView

借助帮助@aziza,我用下面的列表过滤器编写了搜索视图的详细代码段。对别人有帮助

import 'package:flutter/material.dart';class SearchList extends StatefulWidget {  SearchList({ Key key }) : super(key: key);  @override  _SearchListState createState() => new _SearchListState();}class _SearchListState extends State<SearchList>{  Widget appBarTitle = new Text("Search Sample", style: new TextStyle(color: Colors.white),);  Icon actionIcon = new Icon(Icons.search, color: Colors.white,);  final key = new GlobalKey<ScaffoldState>();  final TextEditingController _searchQuery = new TextEditingController();  List<String> _list;  bool _IsSearching;  String _searchText = "";  _SearchListState() {    _searchQuery.addListener(() {      if (_searchQuery.text.isEmpty) {        setState(() {          _IsSearching = false;          _searchText = "";        });      }      else {        setState(() {          _IsSearching = true;          _searchText = _searchQuery.text;        });      }    });  }  @override  void initState() {    super.initState();    _IsSearching = false;    init();  }  void init() {    _list = List();    _list.add("Google");    _list.add("IOS");    _list.add("Andorid");    _list.add("Dart");    _list.add("Flutter");    _list.add("Python");    _list.add("React");    _list.add("Xamarin");    _list.add("Kotlin");    _list.add("Java");    _list.add("RxAndroid");  }  @override  Widget build(BuildContext context) {    return new Scaffold(      key: key,      appBar: buildBar(context),      body: new ListView(        padding: new EdgeInsets.symmetric(vertical: 8.0),        children: _IsSearching ? _buildSearchList() : _buildList(),      ),    );  }  List<ChildItem> _buildList() {    return _list.map((contact) => new ChildItem(contact)).toList();  }  List<ChildItem> _buildSearchList() {    if (_searchText.isEmpty) {      return _list.map((contact) => new ChildItem(contact))          .toList();    }    else {      List<String> _searchList = List();      for (int i = 0; i < _list.length; i++) {        String  name = _list.elementAt(i);        if (name.toLowerCase().contains(_searchText.toLowerCase())) {          _searchList.add(name);        }      }      return _searchList.map((contact) => new ChildItem(contact))          .toList();    }  }  Widget buildBar(BuildContext context) {    return new AppBar(        centerTitle: true,        title: appBarTitle,        actions: <Widget>[          new IconButton(icon: actionIcon, onPressed: () { setState(() {   if (this.actionIcon.icon == Icons.search) {     this.actionIcon = new Icon(Icons.close, color: Colors.white,);     this.appBarTitle = new TextField(       controller: _searchQuery,       style: new TextStyle(         color: Colors.white,       ),       decoration: new InputDecoration(prefixIcon: new Icon(Icons.search, color: Colors.white),hintText: "Search...",hintStyle: new TextStyle(color: Colors.white)       ),     );     _handleSearchStart();   }   else {     _handleSearchEnd();   } });          },),        ]    );  }  void _handleSearchStart() {    setState(() {      _IsSearching = true;    });  }  void _handleSearchEnd() {    setState(() {      this.actionIcon = new Icon(Icons.search, color: Colors.white,);      this.appBarTitle =      new Text("Search Sample", style: new TextStyle(color: Colors.white),);      _IsSearching = false;      _searchQuery.clear();    });  }}class ChildItem extends StatelessWidget {  final String name;  ChildItem(this.name);  @override  Widget build(BuildContext context) {    return new ListTile(title: new Text(this.name));  }}

输出:



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/398183.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号