Flutter开发学习课程携程app开发(三)

1.效果展示

需要实现的功能：

1. 自定义一个 SearchBar， 它在主页和搜索页会呈现不同的状态显示。
2. 在搜索框中无输入的时候显示一个语音小图标，有输入的时候显示一个清除图标。
3. 在 HomePage 首页中，用一个 Stack 将 appBar 叠加在内容区的上方，通过监听 NotificationListener 的滚动来改变 appBar的背景色。
4. 在搜索界面中 SearchPage 中，实现了一个快搜的功能，并且高亮搜索的关键字，通过 ListView 来展示搜索的结果。

学习到的知识点：

• 自定义搜索框 Widget，在不同的界面展示不同的效果。
• 实现快搜功能，根据输入的 keyword 及时查询接口展示。
• 关键字高亮处理 TextSpan的使用。
• 常用输入控件 TextField 的使用，监听输入结果进行快搜过滤。

2.关键代码说明

1.搜索接口数据请求：

import 'dart:async';

import 'package:dio/dio.dart';
import 'package:flutter_trip2/model/search_model.dart';

const SEARCH_URL =
    'https://m.ctrip.com/restapi/h5api/searchapp/search?source=mobileweb&action=autocomplete&contentType=json&keyword=';

/// 搜索接口
class SearchDao {
  static Future<SearchModel> fetch(String keyword) async {
    Response response = await Dio().get(SEARCH_URL + keyword);
    if (response.statusCode == 200) {
      // 只有当输入的内容与服务端返回的内容一致时才渲染
      SearchModel model = SearchModel.fromJson(response.data);
      model.keyword = keyword;
      return model;
    } else {
      throw Exception('Failed to load search');
    }
  }
}

2.自定义 SearchBar:

在 HomePage中，通过滑动页面改变 appBar 的背景透明度：

1.关键代码如下：

2.searchBar 的实现：

3.完整代码

SearchBar完整代码GitHub地址

3.searchPage 页面实现:

1.根据输入的内容进行快搜

将搜索的关键字保存，当请求成功后做一个比对，相同才进行渲染。

2.搜索的内容展示

内容展示区由一个 ListView 来承载。每个 Item 布局 左边是一个分类的图标展示。右侧是一个 Title 的标题 和一个 SubTitle 的分类。并对关键搜索的关键词进行高亮展示。

1.高亮展示，首先将关键词在搜索结果中切出来，然后对结果进行拼接。

2.定义 Title 样式

3.定义副标题样式

4.根据每个 Item 的类型匹配对应的图标

在 assets 目录下存有对应的类型图标文件，我们通过 AssetImage 去加载对应的图片，记得在 pubspec.yaml 中导入它

3.完整代码地址

SearchPage 完整代码

3.搜索框的实现涉及到的代码

通过Git提交记录可以看到每次的修改点。