Flutter中DropdownButton无法显示选中值问题求助

嘿，我明白你现在遇到的困扰了——选中Dropdown的选项后，控件完全没反应，仿佛没选过一样。咱们来一步步排查解决：

核心问题1：缺失value属性绑定 #

你代码里把DropdownButton的value: _currentUser给注释掉了！这可是DropdownButton显示选中状态的关键属性，它用来告诉控件当前选中的是哪一项，所以必须把这行注释去掉，让控件能关联上你的_currentUser状态变量。

核心问题2：FutureBuilder重复执行导致状态丢失 #

每次页面重建（比如调用setState时），你的FutureBuilder都会重新执行db.getUserModelData()，这会重新构建所有Dropdown选项，进而导致选中状态被重置。咱们可以把Future提前初始化，避免重复调用：

额外优化：避免重复插入测试数据 #

现在你的_saveData()在页面每次初始化时都会插入相同的用户，时间长了数据库里会有一大堆重复数据，建议加个判断逻辑，只在数据库为空时插入测试数据。

修改后的完整代码 #

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();
  UserModel _currentUser;
  // 提前声明Future变量，避免重复执行数据库查询
  Future<List<UserModel>> _usersFuture;

  //Add data to db - 优化：先检查数据库是否有数据，再插入测试数据
  _saveData() async {
    // 查询现有数据数量（需要你的DatabaseHelper实现getCount方法，或者用其他方式判断是否为空）
    var userCount = await db.getCount();
    if (userCount == 0) {
      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();
    // 初始化Future，只执行一次
    _usersFuture = db.getUserModelData();
  }

  @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
              future: _usersFuture,
              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属性绑定，这是显示选中状态的核心
                  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"),
          ],
        ),
      ),
    );
  }
}

效果说明 #

修改后，当你选中某个用户时：

• DropdownButton会立即显示选中的用户名作为当前选项
• 下方的文本区域也会同步更新选中用户的详细信息
• 数据库不会再重复插入测试数据，避免冗余

内容的提问来源于stack exchange，提问作者Amit Namdeo