fir_release_Android包下载地址

GIF

UI如图

需求分析：

• 写点评（API限制只有ui）
• 整体滑动
• 长评论如果没有需要占位提示
• 进入列表需要默认收起短评论,点击展开
• 显示回复
• 点击评论弹窗选择（回复，赞，举报，复制，API限制只有ui）

UI拆解并实现：

• ListView： 全局滚动，刷新

 Widget _buildList(BuildContext context) {
    var content;

    if (null == _datas || _datas.isEmpty) {
      if (_isShowRetry) {
        _isShowRetry = false;
        content = CommonRetry.buildRetry(_refreshData);
      } else {
        content = ProgressDialog.buildProgressDialog();
      }
    } else {
      content = new ListView.builder(
        //设置physics属性总是可滚动
        physics: AlwaysScrollableScrollPhysics(),
        itemCount: _datas.length,
        itemBuilder: _buildItem,
      );
    }

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

    return _refreshIndicator;
  }

• BottomAppBar： 写点评

Widget _buildBottomBar() {
    return new BottomAppBar(
      child: new InkWell(
        onTap: () {
          CommonSnakeBar.buildSnakeBarByKey(
              _scaffoldStateKey, context, '该功能暂时无法完成');
        },
        child: new Container(
          height: 40.0,
          child: new Center(
            child: new Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Icon(
                  Icons.edit,
                  color: Colors.blue,
                  size: 20.0,
                ),
                new Text(
                  '写点评',
                  style: new TextStyle(fontSize: 16.0, color: Colors.blue),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

• Container： 长评论占位

Widget _buildNull() {
    return new Container(
      color: Colors.grey[100],
      height: 300.0,
      child: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Icon(
              Icons.desktop_mac,
              color: Colors.blue[200],
              size: 100.0,
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 12.0),
              child: new Text(
                '深度长评虚位以待',
                style: new TextStyle(
                  color: Colors.blue[400],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

• PopupMenuButton： 功能弹窗

 Widget _buildPopItem(CommentModel item) {
    return new PopupMenuButton<Choice>(
        padding: EdgeInsets.zero,
        onSelected: (choice) {
          print(choice.choiceName);
        },
        child: _buildContentItem(item),
        itemBuilder: (BuildContext context) {
          return choices.map((Choice choice) {
            return new PopupMenuItem<Choice>(
              value: choice,
              child: new Text(choice.choiceName),
            );
          }).toList();
        });
  }

• 通用Item： 评论，回复评论，收缩评论

  拆解1:回复评论

Widget _buildReply(CommentModel item) {
    ReplyToModel replyToModel = item.replyTo;

    if (null != replyToModel) {
      return new Padding(
        padding: const EdgeInsets.only(left: 35.0, bottom: 12.0),
        child: new Container(
          alignment: Alignment.topLeft,
          child: new Text.rich(
            new TextSpan(
                text: '//${replyToModel.author}：',
                style: new TextStyle(
                    fontSize: 16.0,
                    color: Colors.black,
                    fontWeight: FontWeight.w400),
                children: [
                  new TextSpan(
                      text: '${replyToModel.content}',
                      style: new TextStyle(
                        fontSize: 14.0,
                        color: Colors.grey[600],
                        fontWeight: FontWeight.w400,
                      ))
                ]),
          ),
        ),
      );
    } else {
      //不需要显示怎么办？
      return new Container(
        height: 0.0,
      );
    }
  }

#####拆解2:评论组合

Widget _buildContentItem(CommentModel item) {
    String time = DateUtil.formatDate(item.time * 1000);
    return new InkWell(
      child: new Padding(
        padding: const EdgeInsets.only(left: 12.0, top: 12.0, right: 12.0),
        child: new Column(
          children: <Widget>[
            new Row(
              children: <Widget>[
                new CircleAvatar(
                  radius: 12.0,
                  backgroundImage: new NetworkImage(
                      item.avatar.isEmpty ? Constant.defHeadimg : item.avatar),
                ),
                new Padding(
                  padding: const EdgeInsets.only(left: 12.0, right: 12.0),
                  child: new Text('${item.author}',
                      style: new TextStyle(
                        fontSize: 16.0,
                        color: Colors.black,
                        fontWeight: FontWeight.w400,
                      )),
                ),
                new Expanded(
                    child: new Container(
                  child: new Align(
                    alignment: Alignment.topRight,
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        new Icon(
                          Icons.thumb_up,
                          color: Colors.grey,
                          size: 18.0,
                        ),
                        new Text(
                          '(${item.likes})',
                          style: new TextStyle(color: Colors.grey),
                        )
                      ],
                    ),
                  ),
                )),
              ],
            ),
            new Padding(
              padding:
                  const EdgeInsets.only(left: 35.0, top: 4.0, bottom: 10.0),
              child: new Container(
                alignment: Alignment.topLeft,
                child: new Text('${item.content}',
                    style: new TextStyle(fontSize: 14.0, color: Colors.black)),
              ),
            ),
            _buildReply(item),
            new Padding(
              padding: const EdgeInsets.only(top: 12.0, bottom: 8.0),
              child: new Container(
                alignment: Alignment.topRight,
                child: new Text('$time'),
              ),
            ),
            new Divider(height: 1.0),
          ],
        ),
      ),
    );
  }

#####拆解3:收缩短评论

  Widget _buildExpansionTileForShort() {
    return new ExpansionTile(
      title: new Text('$_shortCommentsLength 条短评论', style: new TextStyle(
          fontSize: 16.0,
          fontWeight: FontWeight.w500,
          color: Colors.black)),
      children: _shortComments.map((CommentModel model) {
        return _buildPopItem(model);
      }).toList(),
    );
  }

• Column： 评论总数

  Widget _buildTotal(String content) {
    return new Column(
      children: <Widget>[
        new Padding(
          padding: const EdgeInsets.only(
              left: 8.0, top: 12.0, bottom: 12.0, right: 12.0),
          child: new Align(
            alignment: Alignment.centerLeft,
            child: new Text(
              content,
              style: new TextStyle(
                  fontSize: 16.0,
                  fontWeight: FontWeight.w500,
                  color: Colors.black),
            ),
          ),
        ),
        new Divider(height: 1.0),
      ],
    );
  }

• 整体组合

已有项目集成到Flutter代码已经上传到我的GITHUB

知乎日报Flutter版代码已经上传到我的GITHUB

基础学习过程中的代码都放在GITHUB

每天学一点，学到Flutter发布正式版！