Flutter如何将ListView item的id参数传递到下一页拼接URL拉取JSON数据

你已经完成了跳转时传递Photo对象的步骤，只需要调整ContentPage的代码，拿到传入的Photo的id拼接到请求URL即可，修改步骤如下： #

1. 完善ContentPage类，存储传入的Photo对象 #

给ContentPage添加实例属性存储传入的Photo，方便State类访问：

class ContentPage extends StatefulWidget {
  // 新增此行，存储传入的Photo对象
  final Photo photo;
  // 构造器绑定photo属性
  ContentPage({Key? key, required this.photo}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}

2. 调整fetchAlbum方法，拼接id参数 #

把原来的全局fetchAlbum方法移到State类内部，就能通过widget.photo拿到传入的Photo实例，再把id拼到请求URL中，推荐用Uri自带的参数构造方式，避免特殊字符编码问题：

class _MyAppState extends State<ContentPage> {
  late Future<Album> futureAlbum;

  // fetchAlbum移到State内部
  Future<Album> fetchAlbum() async {
    // 自动拼接GET参数，自动处理编码
    final requestUri = Uri.https(
      'jsonplaceholder.typicode.com',
      '/albums.php',
      // 这里传入你要的id参数
      {'id': widget.photo.id.toString()}
    );
    final response = await http.get(requestUri);

    if (response.statusCode == 200) {
      return Album.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to load album');
    }
  }

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
  }

  // 原有build方法可直接复用，小优化：不需要再套MaterialApp，避免多余导航层级
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fetch Data Example'),
      ),
      body: Center(
        child: FutureBuilder<Album>(
          future: futureAlbum,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text(snapshot.data!.title);
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

补充说明 #

如果你习惯直接用字符串拼接URL，也可以把请求地址替换为：

Uri.parse('https://jsonplaceholder.typicode.com/albums.php?id=${widget.photo.id}')

确保你的Photo类中已经定义了id属性即可正常使用。 #

内容的提问来源于stack exchange，提问作者meet Solo