阿里 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文件主要的内容:
Widget 页面.PNG

数据获取

在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);
  }
},

本篇完~

阿里 Flutter-go 项目拆解笔记（五）

数据获取

UI 渲染

小猫头UI 实现

三列网格实现

猜你喜欢