我如何在下面显示评论'What’s post in flutter

Question

我想在flutter中的帖子下显示评论吗？所有帖子都加载在上一页的列表视图中。一旦点击列表，用户就可以在下一页看到完整的帖子。但我想在帖子下方加载它的评论。我的数据库是MongoDB。我使用了两个独立的表posts和comments表来存储数据。我当前的代码是

`class MyPostsFull extends StatefulWidget {
List list;
int index;
MyPostsFull({this.index, this.list});
@override
_MyPostsFullState createState() => _MyPostsFullState();
}
class _MyPostsFullState extends State<MyPostsFull> {
SharedPreferences sharedPreferences;
var _email;
void initState() {
super.initState();
checkLoginStatus();
super.initState();
this.getData();
}
checkLoginStatus() async {
sharedPreferences = await SharedPreferences.getInstance();
if(sharedPreferences.getString("token") == null) {
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (BuildContext context) => Login()), (Route<dynamic> route) => false);
}
var token = sharedPreferences.getString("token");
var payload = Jwt.parseJwt(token);
print(payload);
print(payload["email"]);
_email = payload["email"].toString();
print(_email);
setState(() {});
}
List data;
var ip = Configuration.yourIp;
var apiPort = Configuration.yourApiPort;
Future<List> getData() async {
final response = await http.get("http://$ip:$apiPort/comments/$_email");
return json.decode(response.body);
}

Future<List> deleteData(String id) async {
var _id = id;
var ip = Configuration.yourIp;
var apiPort = Configuration.yourApiPort;
final response = await http.delete("http://$ip:$apiPort/posts/$_pid");
return json.decode(response.body);
}



@override
Widget build(BuildContext context) {
var pid = "${widget.list[widget.index]['_id']}";
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: new AppBar(
iconTheme: IconThemeData(
color: Colors.black, // back button color
),
elevation: 0,
backgroundColor: Colors.white,
title: new Center(child:  new Text("${widget.list[widget.index]['title']}", style: TextStyle(color: Colors.black,fontFamily: 'Montserrat', fontWeight: FontWeight.bold ),)),
),
body: new Container(
height: MediaQuery.of(context).size.height * 0.8,
child: new SingleChildScrollView(
padding: const EdgeInsets.all(20.0),
child: new Card(
child: new Center(
child: new Column(
children: <Widget>[
new Padding(padding: const EdgeInsets.only(top: 30.0, left: 2),),
new Image.asset('assets/images/ex.jpg',height: 210,),
Container(
margin: new EdgeInsetsDirectional.only(start: 1.0, end: 210.0, top: 10),
child: new Text(" Post By: ${widget.list[widget.index]['authortype']}", style: new TextStyle(fontFamily: 'Montserrat',fontSize: 11.0, color: Colors.redAccent[200]),),
),
new Text(" nn ${widget.list[widget.index]['subject']}", style: new TextStyle(fontFamily: 'Montserrat',fontWeight: FontWeight.bold, fontSize: 18.0),),
new Padding(padding: const EdgeInsets.only(top: 13.0),),
Container(
margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0, top: 10),
child: new Text(" ${widget.list[widget.index]['discription']}", style: new TextStyle(fontFamily: 'Montserrat',fontSize: 13.0, color: Colors.brown),),
),
Container(
margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0, top: 10),
child: new  IconButton(
icon: new Icon(Icons.delete),
highlightColor: Colors.pink,
onPressed: () {
var _id =  widget.list[widget.index]['_id'];
deleteData(_id);
},
),
),
Container(
margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0, top: 10),
child: new Text(" ${widget.list[widget.index]['_id']}", style: new TextStyle(fontFamily: 'Montserrat',fontSize: 13.0, color: Colors.brown),),
),
SizedBox(
height:10,
),
Container( child:    new FutureBuilder<List>(
future: getData(),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? new ItemList(
list: snapshot.data,
)
: new Center(
child: new CircularProgressIndicator(),
);
},
),
)
],
),
),
),
),
),
);
}
}
class ItemList extends StatelessWidget {

final List list;
ItemList({this.list});

@override
Widget build(BuildContext context) {
return new ListView.builder(
itemCount: list == null ? 0 : list.length,
itemBuilder: (context, i) {
return new Container(
padding: const EdgeInsets.all(20.0),
child: new GestureDetector(
onTap: () => Navigator.of(context).push(
new MaterialPageRoute(
builder: (BuildContext context) => new MyPostsFull (
list: list,
index: i,
)),
),
child: new Card(
child: new ListTile(
leading: Image.asset('assets/images/signup.png',height: 110,),
title: new  RichText(
textAlign: TextAlign.left,
text: TextSpan(
text:  list[i]['title'].toString(),
style: TextStyle(color: Colors.grey[850], fontSize: 17, fontWeight: FontWeight.bold,),
children: [
TextSpan(
text: "n n" + list[i]['subject'].toString(),
style: TextStyle(
color: Colors.red[600],fontFamily: 'Montserrat',
fontSize: 13)),
TextSpan(
text: "n Posted On:" + list[i]['date'].toString(),
style: TextStyle(
color: Colors.red[600],fontFamily: 'Montserrat',
fontSize: 13)),
TextSpan(
text: "n nby:t" + list[i]['authortype'].toString(),
style: TextStyle(
color: Colors.blueAccent[100],fontFamily: 'Montserrat',
fontSize: 13)),
]),
),
),
),
),
);
},
);
}
}
`

在这个代码显示中，只有帖子没有加载评论列表。

并且我还需要将postId值分配给$pid变量的http://$ip:$apiPort/posts/$_pid");

Answer 1

如果您想显示列表中帖子的评论，您可能需要考虑在ListView项或ExpansionPanelList上使用ExpansionTile。然后假设您已经获取了显示所需的数据，就可以很容易地通过Object将其传递给必要的小部件。