flutter - 颤振DropdownButton2在磁带上加载远程数据并在完成时显示下拉

Question

你好，我需要使用flutter DropdownButton2在点击时在下拉按钮中显示一个小加载器，并且一旦加载应该出现在下拉按钮中的数据的异步操作，然后显示下拉列表。

Answer 1

先做第一个api调用

widget.bloc.getFirstDropdownData();

例如，通过 Streambuilde 或通过其他方式获取第一个下拉 api 数据并在下拉列表中设置数据

                         StreamBuilder<Resource<IssueTypeModelList>>(
                            stream: widget.bloc.issuelogTypeStream,
                            builder: (BuildContext context, snapshot) {
                              if (snapshot.data == null ||
                                  snapshot.data?.status ==
                                      ResourceStatus.LOADING) {
                                return Center(
                                  child: CircularProgressIndicator(),
                                );
                              } else if (snapshot.data?.status ==
                                  ResourceStatus.SUCCESS) {
                                if (snapshot.data!.model!.issueTypeList.length >
                                    0) {
                                  showLoading.sink.add(false);

                                  issueLogTypeList = [
                                    IssueTypeModel(
                                        0,
                                        localizedData.getLocalizedText(
                                            "addissuelog.chooseissuetype"),
                                        "",
                                        0,
                                        false,
                                        "",
                                        "")
                                  ];
                                  issueLogTypeList.addAll(List.from(
                                      snapshot.data?.model?.issueTypeList ??
                                          [
                                            IssueTypeModel(
                                                0,
                                                localizedData.getLocalizedText(
                                                    "addissuelog.chooseissuetype"),
                                                "",
                                                0,
                                                false,
                                                "",
                                                "")
                                          ]));

                                  return Stack(
                                    children: <Widget>[
                                      Container(
                                        margin: EdgeInsets.only(top: 20),
                                        // padding: EdgeInsets.only(bottom: 10),
                                        decoration: BoxDecoration(
                                          border: Border.all(
                                              color: AppColors.greyText,
                                              width: 1),
                                          borderRadius:
                                              BorderRadius.circular(5),
                                          shape: BoxShape.rectangle,
                                        ),
                                        child: Padding(
                                          padding: const EdgeInsets.only(
                                              left: 10.0, right: 5),
                                          child: DropdownButtonFormField<
                                              IssueTypeModel>(
                                            validator: (value) {
                                              if (value == null ||
                                                  value.name.endsWith(
                                                    localizedData.getLocalizedText(
                                                        "addissuelog.chooseissuetype"),
                                                  )) {
                                                return localizedData
                                                    .getLocalizedText(
                                                        "addissuelog.chooseissuetype");
                                              }
                                            },
                                            style: TextStyle(
                                                color: AppColors.black,
                                                fontSize:
                                                    AppFontSize.largeTextSize),
                                            decoration: InputDecoration(
                                                enabledBorder:
                                                    InputBorder.none),
                                            icon: Icon(Icons
                                                .keyboard_arrow_down_sharp),
                                            items: issueLogTypeList
                                                .map(
                                                    (value) => DropdownMenuItem(
                                                          child: new SizedBox(
                                                              width: 200.0,
                                                              child: new Text(
                                                                value.name
                                                                    .toString(),
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                              )),
                                                          value: value,
                                                        ))
                                                .toList(),
                                            onChanged: (val) {
                                              print('value name == ' +
                                                  val!.name.toString());
                                              print('value id == ' +
                                                  val.id.toString());
                                              issuelogtype = val.id;

                                              if (!val.name.toString().contains(
                                                  localizedData.getLocalizedText(
                                                      "addissuelog.chooseissuetype"))) {
/*
                                                showAnimatedNavigation(context,
                                                    AppProgressDialog());
*/

                                                widget.bloc.fetchIssueList(
                                                    val.id.toString());
                                              }
                                            },
                                            isExpanded: true,
                                            value: getTypeModel(issuelogtype),
                                            key: GlobalKey(),
                                          ),
                                        ),
                                      ),
                                      Positioned(
                                          left: 10,
                                          top: 12,
                                          child: Container(
                                            padding: EdgeInsets.only(
                                                bottom: 10,
                                                left: 10,
                                                right: 10),
                                            color: Colors.white,
                                            child: Text(
                                              localizedData.getLocalizedText(
                                                  "addissuelog.chooseissuetype"),
                                              style: TextStyle(
                                                  color: AppColors.textColor,
                                                  fontSize: 12),
                                            ),
                                          )),
                                    ],
                                  );
                                } else {
                                  showLoading.sink.add(false);
                                  return Center(
                                    child: Text("No issue Log data found"),
                                  );
                                }
                              }
                              return Text('');
                            },
                         
                          );

为每个值更改对 Onchange() 方法进行第二次 api 调用。像第一次 api 调用一样进行 api 调用

 onChanged: (val) {
                                          
                                         issuelogtype = val.id;

                                          if (!val.name.toString().contains(
                                              localizedData.getLocalizedText(
                                                  "addissuelog.chooseissuetype"))) {

//show loader in here
                                            widget.bloc.fetchSecondDropdownData(val.id.toString());
                                          }
                                        },

获取数据并在下拉列表中设置数据，就像第一个下拉列表一样使用另一个 StreamBuilder、Dropdownwidget 和相同的过程。