如何根据下拉框选中的数值从API获取对应数据

1. 基础准备 #

确保项目已添加http包用于网络请求，在pubspec.yaml中配置：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0

2. 完整实现代码 #

用StatefulWidget维护选中值、请求状态与返回数据：

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

class NumberDataDropdown extends StatefulWidget {
  const NumberDataDropdown({super.key});

  @override
  State<NumberDataDropdown> createState() => _NumberDataDropdownState();
}

class _NumberDataDropdownState extends State<NumberDataDropdown> {
  // 下拉框选项列表
  final List<String> list = <String>['1', '3', '5', '7'];
  // 当前选中的值
  String? selectedValue;
  // 存储API返回的目标数据
  Map<String, dynamic>? fetchedData;
  // 请求加载状态
  bool isLoading = false;
  // 请求错误提示
  String? errorMessage;

  // API请求函数
  Future<void> fetchTargetData(String number) async {
    setState(() {
      isLoading = true;
      errorMessage = null;
      fetchedData = null;
    });

    try {
      // 替换为你的后端API地址，这里假设接口通过query参数接收数字
      final response = await http.get(
        Uri.parse('http://你的后端域名/api/data?number=$number'),
      );

      if (response.statusCode == 200) {
        // 解析JSON，提取对应数字键的对象
        final Map<String, dynamic> responseJson = json.decode(response.body);
        setState(() {
          fetchedData = responseJson[number];
        });
      } else {
        throw Exception('请求失败，状态码：${response.statusCode}');
      }
    } catch (e) {
      setState(() {
        errorMessage = '加载失败：${e.toString()}';
      });
    } finally {
      setState(() {
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('数字数据查询')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 下拉选择框
            DropdownButton<String>(
              value: selectedValue,
              hint: const Text('选择数字'),
              items: list.map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (String? newValue) {
                setState(() {
                  selectedValue = newValue;
                });
                // 选中后立即触发API请求
                if (newValue != null) {
                  fetchTargetData(newValue);
                }
              },
            ),
            const SizedBox(height: 20),
            // 加载状态提示
            if (isLoading) const CircularProgressIndicator(),
            // 错误信息展示
            if (errorMessage != null)
              Text(
                errorMessage!,
                style: const TextStyle(color: Colors.red),
              ),
            // 返回数据展示
            if (fetchedData != null && !isLoading)
              Expanded(
                child: SingleChildScrollView(
                  child: Text(
                    json.encode(fetchedData, indent: 2),
                    style: const TextStyle(fontSize: 14),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

3. 关键逻辑说明 #

• 状态管理：用selectedValue记录选中项，isLoading控制加载动画显示，fetchedData存储目标数据，errorMessage捕获请求异常。
• 请求触发：下拉框选中值变更时，调用fetchTargetData发起请求，请求前重置状态，成功后从返回JSON中提取对应数字键的对象。
• UI适配：根据加载、错误、成功三种状态，分别展示对应组件，确保用户能清晰感知当前状态。

4. 后端适配调整 #

如果后端用REST风格路径（如/api/data/{number}），只需修改请求地址：

Uri.parse('http://你的后端域名/api/data/$number'),

确保后端返回的JSON结构包含选中数字对应的键值对，比如选中1时，返回JSON需包含"1": {...}的结构。

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