GIF
comment_page.gif
UI如图
12.png
13.png
需求分析：
- 写点评（API限制只有ui）
- 整体滑动
- 长评论如果没有需要占位提示
- 进入列表需要默认收起短评论,点击展开
- 显示回复
- 点击评论弹窗选择（回复，赞，举报，复制，API限制只有ui）
UI拆解并实现：
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;
}
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),
),
],
),
),
),
),
);
}
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],
),
),
)
],
),
),
);
}
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(),
);
}
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
每天学一点，学到Flutter发布正式版！
网友评论