flutter - 我如何获得下面给出的代码的点赞数?
问题描述
这是构成 Brew 并进入 BrewList 的 BrewTile。列表中的每个 brew 都有一个类似的图标按钮。我怎样才能让任何用户喜欢 brew 或不喜欢 brew..它不必显示喜欢 Brew 的用户的名称..它只需要显示喜欢的总数。如果第二次被点击,用户也必须能够改变。
class Brew {
final String id;
final String name;
final String sugars;
final int strength;
final int likeCount;
Brew({this.id, this.name, this.sugars, this.strength,
this.likeCount});
}
class BrewData {
final String id;
final String name;
final String sugars;
final int strength;
final int likeCount;
BrewData({this.id, this.name, this.sugars, this.strength,
this.likeCount});
factory BrewData.fromDoc(DocumentSnapshot doc) {
return BrewData(
id: doc.documentID,
name: doc['name'],
sugars: doc['sugars'],
strength: doc['strength'],
likeCount: doc['likeCount'],
);
}
}
class BrewTile extends StatefulWidget {
final Brew brew;
BrewTile({ this.brew});
@override
_BrewTileState createState() => _BrewTileState();
}
class _BrewTileState extends State<BrewTile> {
int _likeCount = 0;
bool _isLiked = false;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Card(
margin: EdgeInsets.fromLTRB(20.0, 6.0, 20.0, 0.0),
child: ListTile(
leading: CircleAvatar(
radius: 25.0,
backgroundColor: Colors.brown[brew.strength],
backgroundImage:
AssetImage('assets/coffee_icon.png'),
),
title: Text(brew.name),
subtitle: Text('Takes ${brew.sugars} sugar(s)'),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: _isLiked
? Icon(
Icons.favorite,
color: Colors.blue,
)
: Icon(Icons.favorite_border),
iconSize: 30.0,
onPressed: () {
if (_isLiked) {
_likeCount++;
_isLiked = false;
print(_likeCount);
DatabaseService()
.updateLikes(id: widget.brew.id, value:
1);
} else {
print(true);
_likeCount--;
_isLiked = true;
DatabaseService()
.updateLikes(id: widget.brew.id, value:
-1);
print(_likeCount);
}
});
},
),
Padding(
padding: EdgeInsets.symmetric(horizontal:
12.0),
child: Text(
'${_likeCount.toString()} likes',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
),
],
)
],
),
)
],
);
}
}
List<Brew> _brewListFromSnapshot(QuerySnapshot snapshot) {
return snapshot.documents.map((doc) {
//print(doc.data);
return Brew(
id: doc.documentID ?? '',
name: doc.data['name'] ?? '',
strength: doc.data['strength'] ?? 0,
sugars: doc.data['sugars'] ?? '0',
likeCount: doc.data['likeCount'] ?? 0,);
}).toList();
}
Future<void> updateLikesCount({String id int value}) async {
return await brewCollection
.document(id)
.updateData({'likeCount': FieldValue.increment(value)});
}
Future<void> updateBrewData(String sugars, String name, int strength, int likeCount) async {
return await brewCollection.document(uid).setData({
'sugars': sugars,
'name': name,
'strength': strength,
'likeCount': likeCount,
});
}
Stream<BrewData> get brewData {
return brewCollection.document(uid).snapshots().map(_brewDataFromSnapshot);
}
它在控制台中给出了这个错误。
flutter: true
flutter: -1
[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: type 'MethodChannelFieldValue' is not a subtype of type 'FieldValuePlatform'
#0 FieldValue.increment
package:cloud_firestore/src/field_value.dart:51
#1 DatabaseService.updateLikesCount
package:myblogprofile/services/database.dart:75
#2 _BrewTileState.build.<anonymous closure>.<anonymous closure>
package:myblogprofile/…/home/brew_tile.dart:77
#3 State.setState
package:flutter/…/widgets/framework.dart:1148
#4 _BrewTileState.build.<anonymous closure>
package:myblogprofile/…/home/brew_tile.dart:65
#5 _InkResponseState._handleTap
package:flutter/…/material/ink_well.dart:706
#6 _InkResponseState.build.<anonymous closure>
package:flutter/…/material/ink_well.dart:789
#7 GestureRecognizer.invokeCallback
package:flutter/…/gestures/recognizer.dart:182
#8 TapGestureRecognizer.handleTapUp
package:flutter/…/gestures/tap.dart:486
#9 BaseTapGestur<…>
解决方案
请在 IconButton 的 onPressed 事件中添加以下代码...
setState(() {
if (_isLiked) {
_likeCount = _likeCount--;
_isLiked = false;
} else {
_likeCount = _likeCount++;
_isLiked = true;
}
});
推荐阅读
- angular - 在 Angular 应用程序的 ngb-datepicker (ng Bootstrap) 中获取选定日期的“日”
- macos - 确定哪个应用程序正在从 Mac OS 过滤器方案驱动程序中读取或写入数据
- node.js - 列出租户中的用户
- javascript - 如何使用 Javascript/JQuery 修复我的 CSS 链接属性 onClick?
- testing - gradle test --test 选项无法生成 xml 报告
- react-native - 如何将像素值添加到 100% 填充值
- javascript - 更改父窗口 iframe 的 src
- java - 无法在目标文件中存储和加载数组列表
- gcc - Gcc优化问题:unsigned mod vs if branch
- c# - Json.NET 中仅一个属性的自定义序列化程序,无需更改模型类