阿里 Flutter-go 項目拆解筆記（四）

Flutter-go 項目地址是：https://github.com/alibaba/flutter-go

上文 我們分析了first_page.dart文件，分析了首頁的實現效果主要有 免責彈窗、Banner（小圓點，無限循環），信息流（上拉加載，下拉刷新）。

這篇文章主要拆解 搜索功能，也就是拆解項目到目前爲止比較難的一個功能。搜索功能對應的search_input.dart文件的路徑如下：'package:flutter_go/components/search_input.dart';

下圖是整理後的search_input.dart文件主要的內容:

老實說，搜索功能我研究的還不是很透，可能也是沒達到研究透的能力，目前先分析到這，待分析完整個項目後着手開發 玩Android項目 應該會有更深刻的理解吧~

從圖中我們可以知道 搜索功能 包含了哪些操作：

• 首頁的搜索框
• 搜索結果展示
• 聯想搜索
• 歷史搜索

首頁的搜索框

UI 展示和頁面跳轉

UI展示代碼：

 @override
  Widget build(BuildContext context) {
    return new Container(
      height: 40.0,
      decoration: BoxDecoration(
          color: Theme.of(context).backgroundColor,
          borderRadius: BorderRadius.circular(4.0)),
      child: new Row(
        children: <Widget>[
          /// 搜索圖標
          new Padding(
            padding: new EdgeInsets.only(right: 10.0, top: 3.0, left: 10.0),
            child: new Icon(Icons.search,
                size: 24.0, color: Theme.of(context).accentColor),
          ),
          new Expanded(
            // 首頁的搜索佈局
            child: new MaterialSearchInput(
              placeholder: '搜索 flutter 組件',
              getResults: getResults,
            ),
          ),
        ],
      ),
    );
  }

點擊首頁搜索跳轉到搜索頁面

  _showMaterialSearch(BuildContext context) {
      /// 點擊首頁搜索後，跳轉搜索頁面
      Navigator.of(context)
        .push(_buildMaterialSearchPage(context))
        .then((dynamic value) {
      if (value != null) {
        _formFieldKey.currentState.didChange(value);
        widget.onSelect(value);
      }
    });
  }

歷史搜索

在跳轉搜索頁面的時候，先判斷是否有 歷史搜索 記錄，有則顯示，沒有則提示 當前歷史面板爲空

  /// 搜索結果顯示
  Widget buildBody(List results) {
    if (_criteria.isEmpty) {
      return History();
    } else if (_loading) {
      return new Center(
          child: new Padding(
              padding: const EdgeInsets.only(top: 50.0),
              child: new CircularProgressIndicator()
          )
      );
    }
    if (results.isNotEmpty) {
      var content = new SingleChildScrollView(
          child: new Column(
            children: results
          )
      );
      return content;
    }
    return Center(child: Text("暫無數據"));
  }

在 History 組件中，先從SP獲取搜索的歷史記錄，然後將結果展示在 Chip 組件上，點擊每一個歷史記錄都跳轉到對應Widget的詳情頁面：

onTap: () {
  Application.router.navigateTo(context, "${value.targetRouter}", transition: TransitionType.inFromRight);
},

搜索結果展示

在文章頂部的圖中，我們可以找到顯示搜索結果的方法是_buildMaterialSearchPage，在_buildMaterialSearchPage中使用了MaterialPageRoute，並且返回了MaterialSearch組件

MaterialPageRoute是一種模態路由，可以通過平臺自適應過渡來切換屏幕。對於Android，頁面推送過渡時向上滑動頁面，並將其淡入淡出。

所以在點擊搜索的搜索框之後進入搜索頁面會有一個向上滑動的切換動畫。

在MaterialSearch構造方法中對 返回結果 進行了排序、過濾、限制數量。

  /// 搜索結果頁面
  _buildMaterialSearchPage(BuildContext context) {
    return new _MaterialSearchPageRoute<T>(
        settings: new RouteSettings(
          name: 'material_search',
          isInitialRoute: false,
        ),
        builder: (BuildContext context) {
          return new Material(
            child: new MaterialSearch<T>(
              placeholder: widget.placeholder,
              results: widget.results,
              getResults: widget.getResults,
              filter: widget.filter,
              sort: widget.sort,
              onSelect: (dynamic value) => Navigator.of(context).pop(value),
            ),
          );
        });
  }

聯想搜索

可以看到源碼中new SearchInput((value)中的value表示的是輸入的數據，當數據不爲''的時候就會去數據庫中查找 widget

  /// 聯想搜索，顯示搜索結果列表
  Widget buildSearchInput(BuildContext context) {
    return new SearchInput((value) async {
      if (value != '') {
        // 去數據庫中查找 widget 
        List<WidgetPoint> list = await widgetControl.search(value);

        return list
            .map((item) => new MaterialSearchResult<String>(
                  value: item.name,
                  icon: WidgetName2Icon.icons[item.name] ?? null,
                  text: 'widget',
                  onTap: () {
                    // item 點擊
                    onWidgetTap(item, context);
                  },
                ))
            .toList();
      } else {
        return null;
      }
    }, (value) {}, () {});
  }

本篇完~