下拉按钮在 Flutter 中不显示所选值

Question

我是 Flutter 开发的新手，我试图显示下拉列表的选定值，但无法让它工作。

下拉列表不会将其显示为已选择的选项，它只是继续下去，就好像没有选择任何内容一样。请帮我解决问题。

这是我的代码

    import 'dart:convert';
    import 'package:sqlliteapp/db_helper.dart';
    import 'package:sqlliteapp/user_model.dart';
    import 'package:http/http.dart' as http;

    import 'package:flutter/material.dart';

    class SqliteDropdown extends StatefulWidget {
      @override
      SqliteDropdownState createState() {
        return new SqliteDropdownState();
      }
    }

    class SqliteDropdownState extends State<SqliteDropdown> {
      DatabaseHelper db = DatabaseHelper();

      //Add data to db
      _saveData() async {
        UserModel user1 = UserModel(
          "test",
          "test",
          "test@gmail.com",
          "test",
        );

        UserModel user2 = UserModel(
          "test1",
          "test1",
          "test1@gmail.com",
          "test",
        );
        await db.saveData(user1);
        await db.saveData(user2);
      }

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

      UserModel _currentUser;

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Fetching data from Sqlite DB - DropdownButton'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                FutureBuilder<List<UserModel>>(
                    future: db.getUserModelData(),
                    builder: (BuildContext context,
                        AsyncSnapshot<List<UserModel>> snapshot) {
                      if (!snapshot.hasData) return CircularProgressIndicator();
                      return DropdownButton<UserModel>(
                        items: snapshot.data
                            .map((user) => DropdownMenuItem<UserModel>(
                                  child: Text(user.name),
                                  value: user,
                                ))
                            .toList(),
                        onChanged: (UserModel value) {
                          setState(() {
                            _currentUser = value;
                          });
                        },
                        isExpanded: true,
                        //value: _currentUser,
                        hint: Text('Select User'),
                      );
                    }),
                SizedBox(height: 20.0),
                _currentUser != null
                    ? Text(
                        "Name: " +
                            _currentUser.name +
                            "\n Email: " +
                            _currentUser.email +
                            "\n Username: " +
                            _currentUser.username +
                            "\n Password: " +
                            _currentUser.password,
                      )
                    : Text("No User selected"),
              ],
            ),
          ),
        );
      }
    }

下拉列表没有将其显示为所选的，它只是保持好像没有选择任何内容。请支持我解决问题

Answer 1

问题

1. 下拉菜单需要选择可用选项

我们可以看到atitems参数，DropdownButton会得到它的选项定义

DropdownButton<UserModel>(
  items: snapshot.data // <-- this define options
      .map((user) => DropdownMenuItem<UserModel>(
            child: Text(user.name),
            value: user,
          ))
      .toList(),
  onChanged: (UserModel value) {
    setState(() {
      _currentUser = value;
    });
  },
  value: _currentUser,
);

2.如果用FutureBuilder包装，Dropdown将重新初始化多次

当我们选择一个选项后，问题就出现了。Dropdown会修改StatefulWidget中的_currentUser并执行setState。

通过触发setState，默认情况下，Flutter widget 会build再次触发方法。

FutureBuilder<List<UserModel>>(
  future: db.getUserModelData(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) return CircularProgressIndicator();
    return DropdownButton<UserModel>(
      items: snapshot.data
          .map((user) => DropdownMenuItem<UserModel>(
                child: Text(user.name),
                value: user,
              ))
          .toList(),
      onChanged: (UserModel value) {
        setState(() {
          _currentUser = value; // <-- Will trigger re-build on StatefulWidget
        });
      },
      value: _currentUser,
    );
}),

解决方案

1.解决方案：在initState中初始化选项一次

这对我们来说是强制性的，不要在 build 方法中进行初始化。由于我们需要删除FutureBuilder，我们还需要初始化screenStage

@override
void initState() {
  _screenStage = "loading"; // <-- set "loading" to display CircularProgress
  onceSetupDropdown();
  super.initState();
}

void onceSetupDropdown() async {
  _userSelection = await db.getUserModelData();
  _screenStage = "loaded"; // <-- set "loaded" to display DropdownButton
  setState(() {}); // <-- trigger flutter to re-execute "build" method
}

2.然后我们就可以根据screenStage值正确渲染了

这对我们来说是强制性的，不要在 build 方法中进行初始化。因此，我们可以删除FutureBuilder

_screenStage == "loaded"
  ? DropdownButton<UserModel>(  // <-- rendered at second "build"
      items: _userSelection
          .map((user) => DropdownMenuItem<UserModel>(
                child: Text(user.name),
                value: user,
              ))
          .toList(),
      onChanged: onChange,
      isExpanded: true,
      value: _currentUser,
      hint: Text('Select User'),
    )
  : CircularProgressIndicator(), // <-- rendered at first "build"

结果

完全工作的代码

你可以在这个Github Repo中查看它