作者:腾讯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触发的动作。具体流程如下图所示:
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越来越好!