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

雨点打透心脏的1/2处 2022-03-08 00:54 153阅读 0赞

**Flutter-go 项目地址是：[https://github.com/alibaba/flutter-go][https_github.com_alibaba_flutter-go]**

**[上文][Link 1]** 我们分析了搜索功能，主要分析了 **历史搜索，联想搜索，搜索列表**的实现

这篇文章主要拆解 **第二个Tab页面（WIDGET）**。对应的`widget_page.dart`文件的路径如下：`'package:flutter_go/views /widget_page/widget_page.dart';`

下图是整理后的`widget_page.dart`文件主要的内容:  
![Widget 页面.PNG][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);
      }
    },

本篇完~

[https_github.com_alibaba_flutter-go]: https://github.com/alibaba/flutter-go
[Link 1]: https://blog.csdn.net/ITxiaodong/article/details/88411582
[Widget _.PNG]: /images/20220308/66ab0aa166294b2ea1923656e4ae1843.png