实现的效果如下：
image.png

1 定义聊天界面ChatPage

显示一个ListView，在ListView的顶部cell是SearchCell,其他cell为统一的聊天记录cell

网络请求封装 http_manager.dart

  2. import 'package:dio/dio.dart';
  4. class HttpRespons {
  5.   final int status;
  6.   final body;
  8.   HttpRespons({this.status, this.body});
  9. }
  12. class HttpManager {
  13.   static final Dio dio = Dio();
  16.   static Future<HttpRespons> request(String url,
  17.       {String method = 'get',
  18.         Map<String, String> headers,
  19.         Map<String, dynamic> queryParameters,
  20.         int timeOut}) async {
  21.     //1.创建配置,什么方式请求
  22.     final options = Options(headers:headers,method: method, receiveTimeout: timeOut);
  23.     //2.发网络请求
  24.     Response response = await dio.request(
  25.       url,
  26.       queryParameters: queryParameters,
  27.       options: options,
  28.     );
  29.     // print(response.data);
  30.     return HttpRespons(status:response.statusCode,body: response.data);
  31.   }
  32. }
  34. Future<HttpRespons> get(url,
  35.     { Map<String, String> headers,
  36.       Map<String, dynamic> queryParameters,
  37.       int timeout}) {
  38.   return HttpManager.request(url,headers: headers,
  39.       queryParameters: queryParameters, method: 'get', timeOut: timeout);
  40. }

需要显示的数据，数据模型定义 Chat

  2. class Chat {
  3.   final String name;
  4.   final String message;
  5.   final String imageUrl;
  7.   const Chat({this.name, this.message, this.imageUrl});
  9.   factory Chat.fromJson(Map json) {
  10.     return Chat(
  11.       name: json['name'],
  12.       message: json['message'],
  13.       imageUrl: json['imageUrl'],
  14.     );
  15.   }
  16. }

SearchCell和SearchBar的定义 search_bar.dart

  1. import 'package:flutter/material.dart';
  2. import 'chat_page.dart';
  3. import 'search_page.dart';
  5. class SearchCell extends StatelessWidget {
  6.   final List<Chat> datas;
  7.   const SearchCell({this.datas});
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     return GestureDetector(
  11.       onTapDown: (d) {
  12.         Navigator.of(context).push(MaterialPageRoute(builder: (context) {
  13.           return SearchPage(
  14.             datas: datas,
  15.           );
  16.         }));
  17.       },
  18.       child: Container(
  19.         height: 44,
  20.         color: Color.fromRGBO(220, 220, 220, 1),
  21.         padding: EdgeInsets.only(left: 5, right: 5, bottom: 5),
  22.         child: Stack(
  23.           alignment: Alignment.center,
  24.           children: [
  25.             Container(
  26.               decoration: BoxDecoration(
  27.                 color: Colors.white,
  28.                 borderRadius: BorderRadius.circular(6.0),
  29.               ),
  30.             ), //白色底
  31.             Row(
  32.               mainAxisAlignment: MainAxisAlignment.center,
  33.               children: <Widget>[
  34.                 Image(
  35.                   image: AssetImage('images/放大镜b.png'),
  36.                   width: 15,
  37.                   color: Colors.grey,
  38.                 ),
  39.                 Text(
  40.                   '  搜索',
  41.                   style: TextStyle(fontSize: 15, color: Colors.grey),
  42.                 ),
  43.               ],
  44.             ), //中间的文字和放大镜
  45.           ],
  46.         ),
  47.       ),
  48.     );
  49.   }
  50. }
  54. class SearchBar extends StatefulWidget {
  55.   final ValueChanged<String> onChanged;
  56.   const SearchBar({this.onChanged});
  57.   @override
  58.   _SearchBarState createState() => _SearchBarState();
  59. }
  61. class _SearchBarState extends State<SearchBar> {
  62.   final TextEditingController _controller = TextEditingController();
  63.   bool _showClear = false;
  64.   _onChange(String text) {
  65.     if (text.length > 0) {
  66.       widget.onChanged(text);
  67.       setState(() {
  68.         _showClear = true;
  69.       });
  70.     } else {
  71.       widget.onChanged('');
  72.       _showClear = false;
  73.       setState(() {});
  74.     }
  75.   }
  77.   @override
  78.   Widget build(BuildContext context) {
  79.     return Container(
  80.       height: 84,
  81.       color: Color.fromRGBO(220, 220, 220, 1),
  82.       child: Column(
  83.         children: <Widget>[
  84.           SizedBox(
  85.             height: 40,
  86.           ),
  87.           Container(
  88.             height: 44,
  89. //            color: Colors.red,
  90.             child: Row(
  91.               children: <Widget>[
  92.                 Container(
  93.                   width:  MediaQuery.of(context).size.width - 60,
  94.                   height: 34,
  95.                   margin: EdgeInsets.only(left: 5),
  96.                   padding: EdgeInsets.only(left: 5, right: 5),
  97.                   decoration: BoxDecoration(
  98.                       color: Colors.white,
  99.                       borderRadius: BorderRadius.circular(6.0)),
  100.                   child: Row(
  101.                     children: <Widget>[
  102.                       Image(
  103.                         image: AssetImage('images/放大镜b.png'),
  104.                         width: 20,
  105.                         color: Colors.grey,
  106.                       ), //放大镜
  107.                       Expanded(
  108.                         flex: 1,
  109.                         child: TextField(
  110.                           controller: _controller,
  111.                           onChanged: _onChange,
  112.                           autofocus: true,
  113.                           cursorColor: Colors.green,
  114.                           style: TextStyle(
  115.                             fontSize: 18.0,
  116.                             color: Colors.black,
  117.                           ),
  118.                           decoration: InputDecoration(
  119.                               contentPadding:
  120.                               EdgeInsets.only(left: 5, bottom: 10),
  121.                               border: InputBorder.none,
  122.                               hintText: '搜索'),
  123.                         ),
  124.                       ), //输入框
  125.                       _showClear
  126.                           ? GestureDetector(
  127.                         onTap: () {
  128.                           setState(() {
  129.                             _controller.clear();
  130.                             _onChange(''); //如果不出发onChange,那么外接将无法回去数据!
  131.                           });
  132.                         },
  133.                         child: Icon(
  134.                           Icons.cancel,
  135.                           size: 20,
  136.                           color: Colors.grey,
  137.                         ),
  138.                       )
  139.                           : Container(), //取消按钮
  140.                     ],
  141.                   ),
  142.                 ), //左边的圆角背景
  143.                 GestureDetector(
  144.                   onTap: () {
  145.                     Navigator.pop(context);
  146.                   },
  147.                   child: Text(' 取消'),
  148.                 )
  149.               ],
  150.             ),
  151.           ), //下面的搜索条
  152.         ],
  153.       ),
  154.     );
  155.   }
  156. }

聊天页面chat_page.dart

  1. import 'dart:async';
  2. import 'package:flutter/material.dart';
  3. import 'search_bar.dart';
  4. import '../../tools/http_manager.dart' as http;
  7. class ChatPage extends StatefulWidget {
  8.   @override
  9.   _ChatPageState createState() => _ChatPageState();
  10. }
  12. class _ChatPageState extends State<ChatPage> with AutomaticKeepAliveClientMixin {
  17.   List<Chat> _datas = [];
  20.   @override
  21.   void initState() {
  22.     super.initState();
  24.     print('Chat的init来了!');
  25.     getDatas()
  26.         .then((List<Chat> datas) {
  27.       print('数据来了!');
  28.       print('更新数据');
  29.       setState(() {
  30.         _datas = datas;
  31.       });
  32.     })
  33.         .catchError((e) {
  34.       print('错误$e');
  35.     })
  36.         .whenComplete(() {
  37.       print('完毕!');
  38.     });
  39.   }
  41.   @override
  42.   void dispose(){
  43.     super.dispose();
  45.   }
  47.   Future<List<Chat>> getDatas() async {
  48.     //不再是取消连接了!
  50.     final response = await http
  51.         .get('http://rap2api.taobao.org/app/mock/283772/api/chat/list',timeout: 1000);
  52.     if (response.status == 200) {
  53.       //获取相应数据,并转成Map类型!
  54.       final responseBody = response.body;
  56.       //转模型数组 map中遍历的结果需要返回出去
  57.       List<Chat> chatList = responseBody['chat_lists'].map<Chat>((item) {
  58.         return Chat.fromJson(item);
  59.       }).toList();
  60.       return chatList;
  61.     } else {
  62.       throw Exception('statusCode:${response.status}');
  63.     }
  64.   }
  66.   @override
  67.   Widget build(BuildContext context) {
  68.     super.build(context);
  69.     return Scaffold(
  70.       appBar: AppBar(
  71.         elevation: 0.0,
  72.         title: Text('微信'),
  73.         backgroundColor: Color.fromRGBO(220, 220, 220, 1),
  75.       ),
  76.       body: Container(
  77.         child: _datas.length == 0
  78.             ? Center(
  79.           child: Text("Loading..."),
  80.         )
  81.             : ListView.builder(
  82.           itemCount: _datas.length+1, //search栏+ 聊天列表
  83.           itemBuilder: _buildCellForRow,
  84.         ),
  85.       ),
  86.     );
  87.   }
  89.   Widget _buildCellForRow(BuildContext context, int index) {
  90.     if(index == 0){ //search栏在列表的顶部
  91.       return SearchCell(
  92.         datas: _datas,
  93.       );
  94.     }
  95.     //保证从模型数组中取出正确的数据（从0开始），search栏在列表的顶部
  96.     index--;
  97.           return ListTile(
  98.               title: Text(_datas[index].name),
  99.               subtitle: Container(
  100.                 alignment: Alignment.bottomCenter,
  101.                 padding: EdgeInsets.only(right: 10),
  102.                 height: 25,
  103.                 child: Text(
  104.                   _datas[index].message,
  105.                   overflow: TextOverflow.ellipsis,
  106.                 ),
  107.               ),
  108.               leading: Container(
  109.                 width: 44,
  110.                 height: 44,
  111.                 decoration: BoxDecoration(
  112.                     borderRadius: BorderRadius.circular(6.0),
  113.                     image: DecorationImage(
  114.                         image: NetworkImage(_datas[index].imageUrl))),
  115.               ));
  116.         }
  118.   @override
  119.   bool get wantKeepAlive => true;
  120. }

2 定义搜索页面 SearchPage

显示一个ListView，ListView的顶部cell是SearchBar,其他cell为统一的聊天搜索后显示部分文字高亮的cell

  1. import 'package:flutter/material.dart';
  2. import 'search_bar.dart';
  3. import 'chat_page.dart';
  5. class SearchPage extends StatefulWidget {
  6.   final List<Chat> datas;
  7.   const SearchPage({this.datas});
  8.   @override
  9.   _SearchPageState createState() => _SearchPageState();
  10. }
  12. class _SearchPageState extends State<SearchPage> {
  13.   List<Chat> _models = [];
  14.   String _searchStr = '';
  15.   TextStyle _normalStyle = TextStyle(
  16.     fontSize: 16,
  17.     color: Colors.black,
  18.   );
  19.   TextStyle _highlightStyle = TextStyle(
  20.     fontSize: 16,
  21.     color: Colors.green,
  22.   );
  25.   //搜索后的部分高亮富文本显示
  26.   Widget _title(String name) {
  27.     List<TextSpan> spans = [];
  28.     List<String> strs = name.split(_searchStr);
  29.     for (int i = 0; i < strs.length; i++) {
  30.       String str = strs[i]; //拿出字符串
  31.       if (str == '' && i < strs.length - 1) {
  32.         //空字符字符串：1.以这个字符开头，2 以这个字符结束，3.连续出现这个字符
  33.         spans.add(TextSpan(text: _searchStr, style: _highlightStyle));
  34.       } else {
  35.         spans.add(TextSpan(text: str, style: _normalStyle));
  36.         if (i < strs.length - 1) {
  37.           spans.add(TextSpan(text: _searchStr, style: _highlightStyle));
  38.         }
  39.       }
  40.     }
  41.     return RichText(
  42.       text: TextSpan(children: spans),
  43.     );
  44.   }
  46. //搜索算法
  47.   void _searchData(String text) {
  48.     //每次进来都是重新搜索!
  49.     _models.clear();
  50.     _searchStr = text;
  51.     if (text.length > 0) {
  52.       //你有内容我就搜索!
  53.       for (int i = 0; i < widget.datas.length; i++) {
  54.         String name = widget.datas[i].name;
  55.         if (name.contains(text)) {
  56.           _models.add(widget.datas[i]);
  57.         }
  58.       }
  59.     }
  60.     setState(() {});
  61.   }
  63.   @override
  64.   Widget build(BuildContext context) {
  65.     return Scaffold(
  66.       body: Column(
  67.         children: <Widget>[
  68.           SearchBar(
  69.             onChanged: (text) {
  70.               _searchData(text);
  71.             },
  72.           ),
  73.           Expanded(
  74.               flex: 1,
  75.               child: MediaQuery.removePadding(
  76.                 context: context,
  77.                 removeTop: true,
  78.                 removeBottom: true,
  79.                 child: ListView.builder(
  80.                     itemCount: _models.length, itemBuilder: _buildCellForRow),
  81.               ))
  82.         ],
  83.       ),
  84.     );
  85.   }
  87.   Widget _buildCellForRow(BuildContext context, int index) {
  88.     return ListTile(
  89.         title: _title(_models[index].name),
  90.         subtitle: Container(
  91.           alignment: Alignment.bottomCenter,
  92.           padding: EdgeInsets.only(right: 10),
  93.           height: 25,
  94.           child: Text(
  95.             _models[index].message,
  96.             overflow: TextOverflow.ellipsis,
  97.           ),
  98.         ),
  99.         leading: Container(
  100.           width: 44,
  101.           height: 44,
  102.           decoration: BoxDecoration(
  103.               borderRadius: BorderRadius.circular(6.0),
  104.               image: DecorationImage(
  105.                   image: NetworkImage(_models[index].imageUrl))),
  106.         )); //聊天Cell
  107.   }
  108. }

搜索算法

image.png

搜索后的部分高亮富文本显示

image.png