121、Flutter 实现类似网页新闻的客户端APP （视频列表页面）

继上一章讲到如何构建首页多顶部tab页，加底部导航栏的多层级页面切换的模式

今天来继续讲一下底部导航栏切换到视频模块的时候，视频模块内部的构建形式

如下图所示，视频模块首页是VideoTabPage2是视频模块的主页面，

通过顶部的tabStrData中的标签和tabWidgets中的widget，将顶部的tab标签映射到具体的页面

TabCommon是具体的负责映射，的页面，

appBar包含顶部导航栏+导航栏中的搜索按钮

body是一个TabBarView,默认页面是视频列表页面。

详细结构如下图所示。

 

接下来将一下视频模块的默认页面视频列表页面中的逻辑结构

 

SmallVideoPage是视频的列表页面

body中主要是FutureBuilder 组件，负责加载json文件和根据文件内容buildGridView，GridView中的每一个item 是 VideoItem 组件

VideoItem  中包含GridTile ， GridTitle中包含底部的文字模块 GridTileBar 和详细的视频播放界面 VideoPlayerThumbPage

 

 

https://github.com/weizhenzhao/flutter_news_netbase

Thanks

weizhen