Flutter开发：如何将API数据绑定到DropdownButton并获取选中值

核心修改步骤 #

• 第一步：在_ViewState类中新增选中项存储变量，用于绑定Dropdown的当前选中值
• 第二步：修改initState中的接口回调逻辑，增加setState触发界面重绘，否则数据加载完成后界面不会更新
• 第三步：配置DropdownButton的三个核心参数value、items、onChanged

修改完成的完整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>[];
  // 新增：存储当前选中的标准对象
  Standard? _selectedStandard;

  @override
  void initState() {
    super.initState();
    ApiManager().getStandards().then((standards) {
      setState(() {
        _standards = standards;
        // 可选配置：默认选中第一条数据
        // if(_standards.isNotEmpty) {
        //   _selectedStandard = _standards.first;
        // }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Column(
        children: [
          DropdownButton<Standard>(
              isExpanded: true,
              hint: const Text('Select Standard'),
              // 绑定当前选中值
              value: _selectedStandard,
              // 生成下拉选项列表
              items: _standards.map((Standard standard) {
                return DropdownMenuItem<Standard>(
                  value: standard,
                  child: Text(standard.standardName),
                );
              }).toList(),
              // 选中项变化回调
              onChanged: (Standard? newValue) {
                setState(() {
                  _selectedStandard = newValue;
                });
                // 此处可直接获取选中项的所有关联值
                // 例如获取选中的standard_id：print(newValue?.standardId);
              },
          ),
        ],
      ),
    );
  }
}

选中值获取说明 #

选中后通过_selectedStandard对象可以获取该条数据的所有字段：

• 获取课程名称：_selectedStandard?.standardName
• 获取课程ID：_selectedStandard?.standardId
• 获取激活状态：_selectedStandard?.active

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