首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter——实现微信搜索框

Flutter——实现微信搜索框

作者头像
CC老师
发布2022-01-14 15:08:24
1.8K0
发布2022-01-14 15:08:24
举报

1. 页面传值

我们要搜索首页数据,所以我们跳转的时候需要把值传递过来。定义数据,和初始化的方法,选择可选的

class SearchPage extends StatefulWidget {

   final List<ChatModel>? listData;
   SearchPage({this.listData});
    @override
  _SearchPageState createState() => _SearchPageState();
}

(滑动显示更多)

我们点击searchCell的时候传入,这样我们searchPage就拿到数据了

return GestureDetector(
  onTap: (){

    Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => SearchPage(listData: _listData,)));

    print('点击了');
  },

(滑动显示更多)

2. 实现搜索

我们是把searchBar抽出来放到了一个单独的类,我们可以把数据传进去,根据搜索的内容匹配搜索的结果在在searchPage展示,也可以把searcheBar的值告诉当前页面,之后进行搜索结果展示

2.1 searchBar搜索

class SearchBar extends StatefulWidget {
  final List<ChatModel>? listData;
  final ValueChanged<List<ChatModel>>? searchResult;


  SearchBar({this.listData,this.searchResult});
  @override
  _SearchBarState createState() => _SearchBarState();
}

(滑动显示更多)

我们定义一个ValueChanged,当发生改变的时候就回调,我们实现这个搜索的方法

//搜索
 searchResult(String searchText){
 if (searchText.isNotEmpty && widget.listData!.isNotEmpty) {
   searResults.clear();
   print('statr');
   print(searchText);
   print(widget.listData!.length);
   for( int i =0;i<widget.listData!.length;i++){
   String name = widget.listData![i].name!;

   if(name.contains(searchText)){
     searResults.add(widget.listData![i]);
   }
 }
   print(searResults);
   widget.searchResult!(searResults);//返回
 }
}

(滑动显示更多)

我们在搜索框的值发生改变的使用调用

_onChanged(String text){
 searchResult(text);
  setState(() {
    isShowCancleIcon = text.length>0;//当输入框内容大于0的时候显示清除按钮

  });
}

(滑动显示更多)

我们定义时候监听回调,当发生改变的时候我们就setState的方式赋值刷新页面

cell我们之前首页的样式

2.2 searchPage实现搜索

我们定义搜索框的回调,把搜索框的搜索内容传递出去

final ValueChanged<String>? onChanged;
SearchBar({this.onChanged});

(滑动显示更多)

传递出去

if(widget.onChanged != null){
  widget.onChanged!(text);
}

(滑动显示更多)

在page页接收

SearchBar(listData: widget.listData,
  searchResult:(List<ChatModel> list){
  // print(list);
  //  setState(() {
  //    searResults =list;
  //  });


  },
  onChanged: (String str){
    _searchData(str);
  },
),

(滑动显示更多)

接受的数据进行处理

List<ChatModel> _modals = [];

void _searchData(String text) {
  _modals.clear(); //每次搜索先清空!
  if (text.length > 0) {
    for (int i = 0; i < widget.listData!.length; i++) {
      //循环检索
      String name = widget.listData![i].name!;
      if (name.contains(text)) {
        _modals.add(widget.listData![i]);
      }
    }
  }
  setState(() {});
}

(滑动显示更多)

结果

3. 显示选中字体

想要实现我们输入的字显示选中的颜色,我们要自定义标题使用富文本展示 这里我们修改下接口改为英文名字

我们根据这个传入的字符串截取split

Widget _titleName(String name){
  List<TextSpan> spans = [];
  List<String> strs = name.split(_searchStr);
  print('$name:$strs');



  return RichText(text: TextSpan(children: spans));

}

(滑动显示更多)

打印结果

字符串根据我们选中的进行分割,其中数组中空字符串代表了我们输入的搜素内容,我们可以根据这个判断

但是还是有些问题,比如我们搜素ss,打印结果 Jessica Rodriguez:[Je, ica Rodriguez],

我们判断数组下标不是最后一个的话,每次添加他们之间的间隔,因为字符串时以这个搜索内容区分的,没在数组中展示,但是有间隔就表示我们之间有输入内容。我们判断当前i不是最后一个就加入我们的搜索内容

我们还有一个问题,当最后一个是我们检索的内容的话,它是‘’但是我们在他前面又添加了,有问题会。

因此我们在判断空字符串的时候还要加个判断,空字符串不是最后一个。

最终代码我们替换之前的Text

Widget _titleName(String name){
  TextStyle _normalStyle =const TextStyle(
    color: Colors.black,
    fontSize: 16
);

  TextStyle _selectStyle = const TextStyle(
      color: Colors.green,
      fontSize: 16
);
  List<TextSpan> spans = [];
  List<String> strs = name.split(_searchStr);
  print('$name:$strs');
  for(int i =0 ;i<strs.length;i++){

    String indexStr = strs[i];
    if(indexStr == ''&& i < strs.length - 1){
      spans.add(TextSpan(text: _searchStr,style: _selectStyle));
    }else{
      spans.add(TextSpan(text: indexStr,style: _normalStyle));
      if(i< strs.length -1){
        spans.add(TextSpan(text: _searchStr,style: _selectStyle));

      }
    }

  }
  return RichText(text: TextSpan(children: spans));

}

(滑动显示更多)

后面会上传下这个demo到github 感兴趣的可以看看。

原文链接:

https://juejin.cn/post/7034073463736238093#heading-0

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-12-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 HelloCoder全栈小集 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 页面传值
  • 2. 实现搜索
  • 3. 显示选中字体
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档