Flutter:如何使用json和listview导航到新屏幕



我刚刚启动Flutter。我正在学习http,Json的"标题"文本列表显示在我的应用程序上。

我的下一步是导航到显示json"body"文本列表的新屏幕。当我点击json"title"文本列表时

但我找不到任何线索。我不知道该做什么,从哪里开始。。。。。你能帮我吗?有什么建议吗?

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(new MaterialApp(home: new HomePage()));
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
List data;
Future<String> getData() async {
var response = await http.get(
Uri.parse(("https://jsonplaceholder.typicode.com/posts")),
headers: {"Accept": "application/json"});
this.setState(() {
data = jsonDecode(response.body);
});
print(data[1]["title"]);
return "Success!";
}
@override
void initState() {
this.getData();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Listviews"), backgroundColor: Colors.blue),
body: new ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index) {
return new ListTile(title: new Text(data[index]["title"]));
},
),
);
}
}

在此处输入图像描述

您可以在ListTile中使用onTap属性。

return new ListTile(
onTap:(){
// Navigator code
}
title: new Text(data[index]["title"]));

最新更新