Flutter 实战：撸半个知乎日报~ThemeListPage

fir_release_Android包下载地址

GIF

themelist.gif

UI如图

themelisgpage.png

需求分析：

• 整体滑动

• 背景，标题，顶部导航栏联动，渐隐渐出动画

• 装载数据

UI拆解并实现：

• CustomScrollView：  负责整体滑动

var content = new CustomScrollView(      //没有铺满也可以滑动
      physics: AlwaysScrollableScrollPhysics(),
      ........
      ........  
    )

• SliverAppBar：背景，标题，顶部导航栏联动，渐隐渐出动画

new SliverAppBar(
          expandedHeight: _appBarHeight,
          pinned: _appBarBehavior == AppBarBehavior.pinned,
          floating: _appBarBehavior == AppBarBehavior.floating ||
              _appBarBehavior == AppBarBehavior.snapping,
          snap: _appBarBehavior == AppBarBehavior.snapping,
          flexibleSpace: new FlexibleSpaceBar(            //标题
            title: Text('$_title'),            //背景图
            background: new FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: _barBg,
                fit: BoxFit.fitHeight), 
          ),
        )

• SliverList：

拆解1：主编一栏

Widget _buildEditor() {   
   //横向控件的集合
   List<Widget> editors = [];   
   //主编
   Widget lableWidget = new Padding(
     padding: const EdgeInsets.only(right: 12.0),
     child: new Text(       '主编',
       style: new TextStyle(fontSize: 14.0),
     ),
   );

   editors.add(lableWidget);   
   //循环加入主编的头像
   for (ThemeListEditorsModel model in _editorDatas) {
     Widget headView = new InkWell(
       onTap: () {
         RouteUtil.route2Web(context, model.name, model.url);
       },
       child: new Padding(
           padding: const EdgeInsets.only(
               left: 6.0, right: 6.0, top: 12.0, bottom: 12.0),
           child: new CircleAvatar(
             radius: 12.0,
             backgroundImage: new NetworkImage(model.avatar),
           )),
     );
     editors.add(headView);
   }   //组装
   return new Column(
     children: <Widget>[       new Padding(
         padding: const EdgeInsets.only(left: 12.0, right: 12.0),
         child: new Row(
           children: editors,
         ),
       ),
       CommonDivider.buildDivider(),
     ],
   );
 }

拆解2：基础item

Widget _buildNormalItem(ThemeListStoriesModel item) {   final List images = item.images;   final String title = item.title;   final int id = item.id;
   bool hasImage = (null != images && images.isNotEmpty);   if (hasImage) {     return new InkWell(
         onTap: () {
           RouteUtil.route2Detail(context, '$id');
         },
         child: new Padding(
             padding: const EdgeInsets.only(left: 12.0, right: 12.0),
             child: new SizedBox(
               height: Constant.normalItemHeight,
               child: new Column(
                 children: <Widget>[                   new Row(
                     children: <Widget>[                       new Expanded(
                         child: new Text(
                           title,
                           style: new TextStyle(
                               fontSize: 16.0, fontWeight: FontWeight.w300),
                         ),
                       ),                       new Padding(
                         padding: const EdgeInsets.all(8.0),
                         child: new SizedBox(
                           height: 80.0,
                           width: 80.0,
                           child: new Image.network(images[0]),
                         ),
                       )
                     ],
                   ),                   new Expanded(
                     child: new Align(
                       alignment: Alignment.bottomCenter,
                       child: CommonDivider.buildDivider(),
                     ),
                   ),
                 ],
               ),
             )));
   } else {     return new InkWell(
         onTap: () {
           RouteUtil.route2Detail(context, '$id');
         },
         child: new Padding(
             padding: const EdgeInsets.only(left: 12.0, right: 12.0),
             child: new SizedBox(
               height: Constant.normalItemHeight,
               child: new Column(
                 children: <Widget>[                   new Row(
                     children: <Widget>[                       new Expanded(
                         child: new SizedBox(
                           height: Constant.normalItemHeight,
                           child: new Align(
                             alignment: Alignment.centerLeft,
                             child: new Text(
                               title,
                               style: new TextStyle(
                                   fontSize: 16.0,
                                   fontWeight: FontWeight.w300),
                             ),
                           ),
                         ),
                       ),
                     ],
                   ),                   new Expanded(
                     child: new Align(
                       alignment: Alignment.bottomCenter,
                       child: CommonDivider.buildDivider(),
                     ),
                   ),
                 ],
               ),
             )));
   }
 }

拆解3：根据类型显示item

 Widget _buildNewItem(ThemeListStoriesModel item) {
   Widget widget;   switch (item.itemType) {     case ThemeListStoriesModel.itemTypeEditor:
       widget = _buildEditor();       break;     case ThemeListStoriesModel.itemTypeNormal:
       widget = _buildNormalItem(item);       break;
   }   return widget;
 }

拆解4：组装

new SliverList(
         delegate: new SliverChildListDelegate(             new List<Widget>.generate(_normalDatas.length, (int i) {           return _buildNewItem(_normalDatas[i]);
         })),
       ),

拆解5：刷新

 var _refreshIndicator = new NotificationListener(
      onNotification: _onNotification,      child: new RefreshIndicator(
        key: _refreshIndicatorKey,        onRefresh: _refreshData,        child: content,
      ),
    );

拆解6：加载更多

  void _scrollListener() {    //滑到最底部刷新
    if (_scrollController.position.pixels ==
        _scrollController.position.maxScrollExtent) {
      _loadData();
    }
  }

作者：老实巴交的读书人
链接：https://www.jianshu.com/p/265fd0fa6762