NOW直播Flutter动态搜索列表页实现

作者：腾讯NOW直播 - narutosun (孙帅)

前言

Flutter是Google使用Dart语言开发的移动应用开发框架，使用一套Dart代码就能构建高性能、高保真的iOS和Android应用程序，并且在排版、图标、滚动、点击等方面实现零差异。腾讯Now直播App中使用Flutter实现了动态搜索列表页。本文主要介绍动态搜索列表页实现相关步骤，总体来看主要分为UI，数据解析和数据通信三个部分。

1. 动态搜索列表页UI

Now直播动态搜索列表页在Native代码实现的UI如下图所示。

从iOS开发的角度看，可以将这个页面元素进行拆解。页面的父视图就是普通的一个UITableview。每一行的元素就是一个cell，cell内部头像是一个UIImageview，昵称是UILabel，时间也是UILabel，动态的内容通过UILabel展示，动态图片通过UIImageview显示，右上角更多的按钮是一个UIButton。

从Flutter开发的角度看，我们可以将界面元素拆解成Row,Column,ListView,itemWidget这些UI元素。下面看下具体这些元素如何定义及使用。

Row (行布局)
行布局，顾名思义，布局就是以行为基准，将子视图，以行的形式去排列，它可以拥有多个子widget，在这里也说一下，Flutter秉承的原则就是“一切皆为控件”，每个元素都是一个widget。那这里的子widget可以理解为子视图，也就是说Row可以包含多个子视图。由于Row的属性网上有好多介绍的，这里就不一一去介绍了，主要介绍下在Now动态搜索列表页里用到Row几个属性：

mainAxisAlignment: 在水平方向上，子widget的对齐方式（有这几种方式spaceEvenly，center，left，right）。
verticalDirection: 表示垂直方向上，从哪个方向为起始位置（比如从上向下布局还是从下向上布局）
textDirector：表示在横轴上，布局从哪个方向开始（比如从左右向还是从右向左布局）

Column (列布局)
和行布局不一样的，列布局就是在纵轴上对子widget进行排列。同样也是可以包含多个子视图。同样介绍下Now动态搜索列表页里涉及到的简单的属性：

mainAxisAlignment：和Row不一样的是，这里指的变成了在垂直方向上，子widget的对齐方式（有这几种方式spaceEvenly，center，left，right）。
verticalDirection: 同样和Row有相同的效果

Container (容器)
Container在Flutter中太常见了。官方给出的简介，是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。可以得出几个信息，它是一个组合的widget，内部有绘制widget、定位widget、尺寸widget。后续看到的不少widget，都是通过一些更基础的widget组合而成的。只包含一个子widget，container的组成可以由下面这张官方的图体现出来。

由于Container属性有很多，下面同样只展示下Now动态搜索列表页用到的属性。

padding： decoration内部的空白区域，如果有child的话，child位于padding内部。可以通过设置padding，来改变content在container的位置，同样也能改变container的大小。
alignment：设置child在Container的对齐方式（有topLeft，topCenter，topRight，centerLeft，center，centerRight，bottomLeft，bottomCenter，bottomRight这几种系统提供的类型）。可以通过Alignment的方法来自定义child的位置
margin：从上图能够看出，margin其实表示的是decoration外面的区域，不是Container的内容区域。可以设置与父widget的间隔

ListView
ListView控件是APP开发中最为常见的控件之一，类似iOS中的UITableView，可以用来展示列表式的信息。它的内容对于其渲染框太长时会自动提供滚动。可以拥有多个child，可以水平或者垂直放置。在APP中扮演着重要的角色，listview属性详细介绍可以看下listView文档，Now这里用的是Flutter第三库的组件。Now动态搜索列表页用到的基本属性简单介绍一下：

scrollDirection：默认child是垂直方向上进行布局（Axis.vertical），可滑动方向对应的也是垂直方向上，horizontal表示的是水平方向。
reverse：是个bool类型，默认是false，在水平方向则child是从左向右排列，垂直方向上child是从上向下排列。反之ture的话，水平方向的child是从右向左排列，垂直方向是从下向上排列。

从上面来看，我们能分析出，通过Flutter实现这个UI，用的无非就是Row，Column，Container，listView这些基础widget。动态搜索页基础UI我们就已经搭建出来了。

2. 数据格式及解析

Now App在请求数据与解析数据，都是通过谷歌的protobuf来实现的，所以Flutter页面的数据依旧通过protobuf来实现。Flutter怎么集成进来protobuf的插件呢，这里我使用的是AndroidStudio的IDE，安装了Dart环境后，打开Flutter工程，会有一个pubspec.yaml的配置文件，在这里可以像Xcode的cocopods一样，将protobuf的版本号输入这里，然后update一下Dart，就会自动将protobuf集成进来。具体的protobuf是什么以及如何使用，可以参考这篇文章

在上面我们也看到了搜索页有很多的视图元素，还有一些点击跳转的事件也需要传参，所以这里设计数据格式的话，给当前类创建了这些属性。

class AnchorInfo {
  String anchorHeadUrl;        //头像
  String anchorName;           //昵称
  String uin;                  //uin
  String content;              //内容
  FEED_TYPE feedType;          //Feed类型
  String feedsId;              //FeedID
  String coverImageUrl;        //封面url
  double imgWidth = 200.0;     //图片宽度
  double imgHeight = 200.0;    //图片高度
  String jumpUrl;              //跳转url
}
复制代码

从这个数据格式上来看，已经包含了动态搜索列表页面Cell的基本数据。下面就是如何给这些数据初始化，以及怎么拿到这些数据。

3. 数据通信

数据通信主要有两种情况，一种是有Flutter页面主动触发的，另一种是由Native主动触发调用到Flutter的。我们分别来看这两种情况在动态搜索页中的应用。

3.1 Flutter调用Native

这种情况应用于动态搜索列表页feeds拉取的场景。由于Now工程项目的特殊性，客户端在发包的时候使用的是WNS平台，所以这块发包不能通过Flutter页面来实现，只能通过客户端来发包，客户端回包会取到一个二进制流的数据，会将这个二进制流的数据塞给Flutter，因为发包同样是遵照protobuf的格式。所以这里Flutter拿到二进制流的数据后，就可以通过protobuf来解包，实现了客户端发包，Flutter解包的一个过程。具体流程如下图所示。

针对这个场景，Flutter提供了MethodChannel来实现。具体步骤如下：

1）Flutter内部注册MethodChannel

class DynamicListViewState extends State<DynamicState> {
  ...
  static platform = const MethodChannel('now.qq.com/flutter');
  ...
}
复制代码

在类初始化的时候，就将platform赋值给了一个MethodChannel，我们看到传了一个字符串的参数进去。那这个参数其实就是一个调用iOS的标识。

2）Native代码注册相同名称的MethodChannel iOS客户端同样会注册一个带有相同标识的channel。

self.methodChannel = [FlutterMethodChannel methodChannelWithName:
                        @"now.qq.com/flutter" binaryMessenger:self];
复制代码

3）Flutter调用MethodChannel 上面完成的步骤，可以理解为在iOS上已经注入了一个插件，那接下来就需要通过插件来调用iOS的相关的API，如何来调用具体的iOS的API呢。看下我们这边加载动态数据的代码块。

void moreAnchorInfoDataRequest() async {
    ...
    List<int> data = await platform.invokeMethod("anchorInfoDataRequest", pageIndex);
    ...
}
复制代码

主要看platform.invokeMethod的方法，发现又传入了一个字符串，不同的是还传入了一个int型的pageIndex。字符串同样是一个标识，是Flutter调用客户端的一个约定。客户端在取到这个标识后，会去调用相应的API。至于pageIndex，是客户端在需要调用这个方法时，所需的参数。来看下客户端的代码是如何响应并执行这个操作的。

4）Native接收到调用处理完成后回包

[self.methodChannel setMethodCallHandler:^(FlutterMethodCall* call,
                                               FlutterResult result) {
        ...
         if([call.method isEqualToString:@"anchorInfoDataRequest"]){
            wself.result = result;
            [wself anchorInfoRequest:((NSNumber*)call.arguments).unsignedIntegerValue];
        }
        ...
    }];
复制代码

从代码块中可以看出，客户端在闭包里，可以取到call的实例，通过method的属性来判断出需要调用哪种API。这样就已经完成了Flutter调用客户端的步骤。那现在还有一步是怎么通过客户端调用到Flutter呢。

3.2 Native调用Flutter

这种情况应用于Native动态详情页进行删除的场景。在Flutter页面点击头像->进入主人态个人中心->删除了动态->告知Flutter动态页数据更新。Native主动触发事件去告诉Flutter，Flutter需要去响应Native触发的动作。具体流程如下图所示：

针对这个场景，Flutter提供了EventChannel来实现。具体步骤如下：

1）Flutter注册EventChannel

 static const EventChannel eventChannel = const EventChannel("now.qq.com/event");
复制代码

重写当前类的initState方法，在这个方法里，注册一个监听。用来监听从客户端调用来的事件，在_onEvent方法里执行监听到之后所需要做的操作。

void initState() {
    super.initState();
    ...
    eventChannel.receiveBroadcastStream().listen(_onEvent,onError: _onEventError);
    ...
  }
复制代码

在Now里这个事件是个删除动态的操作，所以调用了删除的操作后，告知Flutter页面的数据改变，UI需要刷新。

void _onEvent(Object event) {
    ...
    if(deleteData != null){
      setState(() {
        dynamicDataList.remove(deleteData);
        if(dynamicDataList.length > 0) {
          showType = show_normalView;
        }else{
          showType = show_notingView;
        }
      });
    }
    ...
  }
复制代码

2）Native代码注册相同名称的EventChannel

看下在Now工程中，这个方法是在什么时机调用的。代码块如下：

self.eventChannel = [FlutterEventChannel eventChannelWithName:@"now.qq.com/event" binaryMessenger:self];
[self.eventChannel setStreamHandler:self];
复制代码

同样客户端也创建了一个FlutterEventChannel的实例，通过类方法来创建的。setStreamHandler的方法就是注入一个工具类，作用将需要调用的事件流通知给Flutter。设置了这个方法后，我们需要实现它提供的代理方法，在实现代理方法前，我们还需要一个FlutterEventSink的闭包函数。我们把这个闭包函数声明成了一个属性。

@property (nonatomic, strong) FlutterEventSink eventSink;
复制代码

3）Native调用到Flutter

下面看怎么使用这个属性以及怎么回调到Flutter页面上。首先需要实现FlutterStreamHandler的代理方法，在onListenWithArguments代理方法里，我们保存了FlutterEventSink类型的闭包函数。方便后续在调用的地方去使用。

- (FlutterError* _Nullable)onListenWithArguments:(id _Nullable)arguments
                                       eventSink:(FlutterEventSink)events {
    self.eventSink = events;
    return nil;
}
复制代码

调用的时机如下，在我们删除动态成功后，我们会回调给Flutter。传入一个feedsId的参数

- (void)onDeleteFeedsRequestSucceed:(NSArray *)feedsArray {
    ...
    if(self.eventSink){
        self.eventSink(model.feedsId);
    }
    ...
}
复制代码

总结

以上就是Now直播使用Flutter实现动态搜索列表页的一些步骤细节，欢迎大家探讨。Now直播终端团队致力于为Flutter生态作出一点自己的贡献，期待Flutter越来越好！