fir_release_Android包下载地址
GIF
comment_page.gif
UI如图
12.png
13.png
需求分析：
写点评（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),
],
);
}整体组合
image.png
作者：老实巴交的读书人
链接：https://www.jianshu.com/p/34953e28676f