如何在 DropdownButton 中使用 API 显示数据并获取所选项目的数据？

Question

我有一个带有下拉列表的页面，其中元素应显示几个字段：图像、名称和地址。 我通过 model 获取数据，model 被保存到一个名为List<MyModel> mainList的列表中。 我将此列表传递给下拉小部件，但遇到了无法显示此数据的问题。 您能告诉我如何正确地从 mainList 获取这些数据并将其显示在下拉列表中吗？ 以及如何获得选定的元素？

class UsersDropDownWidget extends StatefulWidget {
  final List<MyModel> mainList;
  const PoyntsDropDownWidget({Key? key, required this.mainList})
      : super(key: key);

  @override
  State<UsersDropDownWidget> createState() => _UsersDropDownWidgetState();
}

class _UsersDropDownWidgetState extends State<UsersDropDownWidget> {
  int? _value = 0;

  void _setValue(int? value) {
    setState(() {
      _value = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 300,
      padding: const EdgeInsets.only(left: 20, right: 13),
      decoration: BoxDecoration(
        color: constants.Colors.greyXDark,
        borderRadius: BorderRadius.circular(20),
        boxShadow: const [
          BoxShadow(
            color: Colors.black26,
            spreadRadius: 5,
            blurRadius: 12,
            offset: Offset(0, 0),
          )
        ],
      ),
      child: DropdownButton(
        isExpanded: true,
        itemHeight: 100,
        icon: const SizedBox.shrink(),
        value: _value,
        onChanged: _setValue,
        underline: const SizedBox(),
        dropdownColor: constants.Colors.greyXDark,
        menuMaxHeight: MediaQuery.of(context).size.height * .52,
        items: [
            DropdownMenuItem(
              value: i,
              child: SizedBox(
                child: Row(
                  children: [
                    SizedBox(
                      height: 70,
                      width: 70,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: Image.asset('assets/images/user.jpg'),
                      ),
                    ),
                    const SizedBox(width: 15),
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: const [
                          Text(
                            'Name',
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            style: constants.Styles.normalHeavyTextStyleWhite,
                          ),
                          SizedBox(height: 6),
                          FittedBox(
                            fit: BoxFit.scaleDown,
                            child: Text(
                              'Evan Gbirol St, 26',
                              style: constants.Styles.smallBookTextStyleWhite,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            )
        ],
      ),
    );
  }
}

model

class MyModel {
  MyModel ({
    required this.id,
    required this.startedAt,
    required this.name,
  }); 
  late final int id;
  late final String startedAt;
  late final String name;

  MyModel.fromJson(Map<String, dynamic> json){
    id = json['id'];
    startedAt = json['started_at'];
    name= json['name'];
  }

  Map<String, dynamic> toJson() {
    final _data = <String, dynamic>{};
    _data['id'] = id;
    _data['started_at'] = startedAt;
    _data['name'] = name;
    return _data;
  }
}

Answer 1

首先，您是否从这个 model 获得任何数据？ 如果您要获取数据，则必须像这样使用：

mainList.id, 
mainList.startedAt, 
mainList.name,

但请确保您正确地从 API 获取数据。