如何在下拉按钮中绑定 API 数据并获取选定的值？

Question

如何在下拉按钮中绑定 API 数据并获取选定的值？

我有如下的 json 响应。

{
  "success": 1,
  "standard": [
    {
      "standard_id": "5d170c1e3ba1c",
      "standard_name": "Std 10",
      "active": "1"
    },
    {
      "standard_id": "5da9f8652dfd3",
      "standard_name": "Std 10 Easy Maths Course",
      "active": "1"
    },
    {
      "standard_id": "5d170c5a5609a",
      "standard_name": "Std 12 Science - A ( PCM Full Course )",
      "active": "1"
    },
    {
      "standard_id": "5da9fa1fd7e60",
      "standard_name": "Std 12 Science - B ( PCB Full Course ) ",
      "active": "1"
    },
    {
      "standard_id": "5ea96da290df1",
      "standard_name": "Std 12 Science Chemistry Course",
      "active": "1"
    },
    {
      "standard_id": "5ea96d89c8978",
      "standard_name": "Std 12 Science Maths Course",
      "active": "1"
    },
    {
      "standard_id": "5ea96db6adbc0",
      "standard_name": "Std 12 Science Physics Course",
      "active": "1"
    },
    {
      "standard_id": "5d1594e283e1a",
      "standard_name": "Std 2",
      "active": "1"
    }
  ]
}

如上所述，我在 standard_model.dart 文件中创建了一个模型类，如下所示。

// To parse this JSON data, do
//
//     final standardModel = standardModelFromJson(jsonString);

import 'dart:convert';

StandardModel standardModelFromJson(String str) => StandardModel.fromJson(json.decode(str));

String standardModelToJson(StandardModel data) => json.encode(data.toJson());

class StandardModel {
    StandardModel({
        this.success,
        this.standard,
    });

    int success;
    List<Standard> standard;

    factory StandardModel.fromJson(Map<String, dynamic> json) => StandardModel(
        success: json["success"],
        standard: List<Standard>.from(json["standard"].map((x) => Standard.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "success": success,
        "standard": List<dynamic>.from(standard.map((x) => x.toJson())),
    };
}

class Standard {
    Standard({
        this.standardId,
        this.standardName,
        this.active,
    });

    String standardId;
    String standardName;
    String active;

    factory Standard.fromJson(Map<String, dynamic> json) => Standard(
        standardId: json["standard_id"],
        standardName: json["standard_name"],
        active: json["active"],
    );

    Map<String, dynamic> toJson() => {
        "standard_id": standardId,
        "standard_name": standardName,
        "active": active,
    };
}

我在 api_manager.dart 文件中创建了如下函数

class ApiManager {
  Future<List<Standard>> getStandards() async {
    final standardUrl = "$baseUrl/standard/get";
    final response = await http.get(Uri.parse(standardUrl));
    if (response.statusCode == 200) {
      final standardData = standardModelFromJson(response.body);
      final List<Standard> standards = standardData.standard;
      return standards;
    } else {
      return <Standard>[];
    }
  }
}

我有 view.dart 文件来显示下拉菜单，所以我如何在下拉按钮中设置数据并获取所选值。

view.dart 文件如下。

class View extends StatefulWidget {
  const View({Key? key}) : super(key: key);

  @override
  _ViewState createState() => _ViewState();
}

class _ViewState extends State<View> {
  var _standards = <Standard>[];

  @override
  void initState() {
    super.initState();

    ApiManager().getStandards().then((standards) {
      _standards = standards;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Column(
        children: [
          DropdownButton(
              isExpanded: true,
              hint: Text('Select Standard'),
              value: ,
              items: ,
              onChanged: , //onStandardChange,
              ),
        ],
      ),
    );
  }
}

我想在下拉列表中获取标准名称。

Answer 1

没有必要使用Column。您应该遵循以下代码：

DropdownButton<String>(
      value: dropdownValue, // create a variable named dropdownValue and set in onChange function
      icon: const Icon(Icons.arrow_downward),
      iconSize: 24,
      elevation: 16,
      style: const TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String? newValue) {
        setState(() {
          dropdownValue = newValue!;
        });
      },
      items: _standards
          .map<DropdownMenuItem<String>>((Standard standard) {
        return DropdownMenuItem<String>(
          value: standard.standardId,
          child: Text(standard.standardName),
        );
      }).toList(),
    );

还请记住，您可以使用DropdownButton<Standard>，而不是使用DropdownButton<String>。有关详细信息，请参阅this。 检查一下，让我知道结果。