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

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

上文 我們分析了搜索功能，主要分析了 歷史搜索，聯想搜索，搜索列表的實現

這篇文章主要拆解 第二個Tab頁面（WIDGET）。對應的widget_page.dart文件的路徑如下：'package:flutter_go/views /widget_page/widget_page.dart';

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

數據獲取

在cat.dart中雖然有mainList方法，但是沒看到有引用的地方，而且getList方法的描述也說明了是獲取 Cat不同深度與parent的列表

  // 獲取Cat不同深度與parent的列表
  Future<List<Cat>> getList([Cat cat]) async{
    if (cat == null) {
      cat = new Cat(depth: 1, parentId: 0);
    }
    // print("cat in getList ${cat.toMap()}");
// 構建搜索條件，並搜索，獲取搜素集合
    List listJson =  await sql.getByCondition(conditions: cat.toSqlCondition());
    List<Cat> cats = listJson.map((json) {
      return new Cat.fromJSON(json);
    }).toList();
    return cats;
  }

cat.toSqlCondition()構建搜索條件

  Map toMap() {
    return {
      'id': id,
      'name': name,
      'desc': desc,
      'depth': depth,
      'parentId': parentId
    };
  }
  Map toSqlCondition() {
    Map _map = this.toMap();
    Map condition = {};
    _map.forEach((k, value) {

      if (value != null) {

        condition[k] = value;
      }
    });

    if (condition.isEmpty) {
      return {};
    }

    return condition;
  }
}

UI 渲染

小貓頭UI 實現

這裏用到了Stack組件，也就是先繪製 一級標題和對應的網格列表，然後在上方再繪製一個圓形，圖案是一個標題對應的圖標 Icon

Positioned(
left: 0.0,
top: 0.0,
child: Container(
  height: 60.0,
  width: 60.0,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(30.0),
  ),
  child: Center(
    child: Container(
      decoration: BoxDecoration(
        color: Theme.of(context).primaryColor,
        borderRadius: BorderRadius.circular(23.0),
      ),
      height: 46.0,
      width: 46.0,
      child: Icon(
        WidgetName2Icon.icons[widget.category.name],
        color: Colors.white,
        size: 30.0,
      ),
    ),
  ),
),
)

三列網格實現

網格佈局：三列顯示，每一個 Item 對應的 UI 是 Icon + name

  Widget _buildWidgetContainer() {
    if (this._firstChildList.length == 0) {
      return Container();
    }
    return Container(
      padding: const EdgeInsets.only(bottom: 10.0, top: 5.0),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/paimaiLogo.png'),
          alignment: Alignment.bottomRight
        ),
      ),
      child: WidgetItemContainer(
        categories: this._firstChildList,
        columnCount: 3,
        isWidgetPoint:false
      ),
    );
  }

WidgetItemContainer是網格中每一個 塊對應的佈局，比如 第一個塊：Element 以及 下方的具體控件列表

在WidgetItemContainer中WidgetItem組件，就是對應網格的Item了，包含有 Icon + Name + 右側邊框

在點擊Item的時候有個判斷，判斷是否是父節點，是的話則跳轉具體的網格列表頁面，不是的話則進入詳情頁面。

這裏涉及到了 Route 路由的使用，需要對路由有詳細瞭解，不然會有點不好理解。

onTap: () {
  if (isWidgetPoint) {
    String targetName = item.name;
    String targetRouter = '/category/error/404';
    widgetDemosList.forEach((item) {
      if (item.name == targetName) {
        targetRouter = item.routerName;
      }
    });
    Application.router.navigateTo(context, "$targetRouter", transition: TransitionType.inFromRight);
  } else {
    Application.router
        .navigateTo(context, "/category/${item.name}", transition: TransitionType.inFromRight);
  }
},

本篇完~