Flutter：点击列表项跳转页面并传递城市数据给FinalData类

1. 配置依赖 #

先在pubspec.yaml中添加所需依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5
  http: ^1.1.0

执行flutter pub get完成依赖安装。

2. main.dart 实现城市列表与跳转传参 #

基于你的entries城市列表，用ListView.builder构建可点击列表，点击时传递城市参数跳转到目标页面：

import 'package:flutter/material.dart';
import 'show_met.dart';
import 'final_data.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 全局配置Provider，让子页面可访问FinalData实例
    return ChangeNotifierProvider(
      create: (context) => FinalData(),
      child: MaterialApp(
        title: '城市天气',
        home: const CityListPage(),
      ),
    );
  }
}

class CityListPage extends StatelessWidget {
  const CityListPage({super.key});
  
  // 示例城市列表，可替换为你的数据源
  final List<String> entries = ['北京', '上海', '广州', '深圳'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('选择城市')),
      body: ListView.builder(
        itemCount: entries.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(entries[index]),
            onTap: () {
              // 完成跳转+传递城市参数两个操作
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ShowMetPage(city: entries[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

3. 实现FinalData类（Provider数据模型） #

创建final_data.dart，封装OpenWeatherMap API请求逻辑，通过Provider管理状态：

import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class FinalData extends ChangeNotifier {
  dynamic _weatherData;
  bool _isLoading = false;
  String? _errorMessage;

  // 对外暴露状态数据
  dynamic get weatherData => _weatherData;
  bool get isLoading => _isLoading;
  String? get errorMessage => _errorMessage;

  // 替换为你自己的OpenWeatherMap API Key
  final String apiKey = 'YOUR_API_KEY';

  Future<void> fetchWeather(String city) async {
    _isLoading = true;
    _errorMessage = null;
    notifyListeners();

    try {
      final response = await http.get(
        Uri.parse(
            'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey&units=metric&lang=zh_cn'),
      );

      if (response.statusCode == 200) {
        _weatherData = json.decode(response.body);
      } else {
        _errorMessage = '获取天气数据失败';
      }
    } catch (e) {
      _errorMessage = '网络请求错误';
      if (kDebugMode) {
        print(e);
      }
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }
}

4. show_met.dart 用FutureBuilder+Provider展示天气 #

在目标页面中，通过Provider获取FinalData实例，结合FutureBuilder处理异步请求并展示数据：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'final_data.dart';

class ShowMetPage extends StatelessWidget {
  final String city;
  const ShowMetPage({super.key, required this.city});

  @override
  Widget build(BuildContext context) {
    final finalData = Provider.of<FinalData>(context, listen: false);
    
    return Scaffold(
      appBar: AppBar(title: Text('$city 天气')),
      body: FutureBuilder(
        future: finalData.fetchWeather(city),
        builder: (context, snapshot) {
          // 加载中状态
          if (finalData.isLoading) {
            return const Center(child: CircularProgressIndicator());
          }
          // 错误状态
          if (finalData.errorMessage != null) {
            return Center(child: Text(finalData.errorMessage!));
          }
          // 数据加载成功状态
          if (finalData.weatherData != null) {
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '城市: ${finalData.weatherData['name']}',
                    style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 16),
                  Text('温度: ${finalData.weatherData['main']['temp']}°C'),
                  Text('体感温度: ${finalData.weatherData['main']['feels_like']}°C'),
                  Text('天气状况: ${finalData.weatherData['weather'][0]['description']}'),
                  Text('湿度: ${finalData.weatherData['main']['humidity']}%'),
                ],
              ),
            );
          }
          // 默认空状态
          return const Center(child: Text('暂无数据'));
        },
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者GEEK MEHDI SA