Flutter实现下拉选框联动：基于嵌套Map同步表单字段

步骤1：添加状态变量与控制器 #

在你的State类中，需要维护选中的服务器名称状态，以及用于控制输入框内容的文本控制器：

class _LoginScreenState extends State<LoginScreen> {
  String? _selectedServer;
  final serverIPController = TextEditingController();
  final dbController = TextEditingController();
  final portController = TextEditingController();

  @override
  void dispose() {
    // 释放控制器资源
    serverIPController.dispose();
    dbController.dispose();
    portController.dispose();
    super.dispose();
  }

  // ... 其余代码
}

步骤2：完善下拉选框实现 #

在build方法的Consumer内部，提取服务器数据并构建下拉选框，同时实现选择后的自动填充逻辑：

@override
Widget build(BuildContext context) {
  return Consumer<GlobalsProvider>(
    builder: (context, value, child) {
      // 从provider中提取服务器映射（因为getServers返回的是包含单个map的列表）
      final serverMap = value.getServers().first;

      return Scaffold(
        appBar: AppBar(
          title: const Text('Login'),
          centerTitle: true,
          actions: [
            IconButton(
                onPressed: () {},
                icon: const Icon(Icons.add)
            ),
          ],
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                flex: 2,
                child: Visibility(
                  visible: true, 
                  child: Row(
                    children: [
                      const Expanded(child: Text('Server Name:')),
                      DropdownButton<String>(
                        value: _selectedServer,
                        hint: const Text('选择服务器'),
                        // 生成下拉选项
                        items: serverMap.keys.map((serverName) {
                          return DropdownMenuItem<String>(
                            value: serverName,
                            child: Text(serverName),
                          );
                        }).toList(),
                        // 选择后的回调逻辑
                        onChanged: (newValue) {
                          setState(() {
                            _selectedServer = newValue;
                            if (newValue != null) {
                              final serverDetails = serverMap[newValue];
                              // 自动填充对应字段
                              serverIPController.text = serverDetails?['Server IP'] ?? '';
                              dbController.text = serverDetails?['Database'] ?? '';
                              portController.text = serverDetails?['Port'] ?? '';
                            }
                          });
                        },
                      )
                    ],
                  ),
                ),
              ),
              // 其余输入框部分，建议设置为只读防止手动修改
              Expanded(
                flex: 2,
                child: Visibility(
                  visible: true, 
                  child: Row(
                    children: [
                      const Expanded(child: Text('Server IP:')),
                      Expanded(
                        child: TextField(
                          controller: serverIPController,
                          readOnly: true, // 设置为只读
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: Visibility(
                  visible: true, 
                  child: Row(
                    children: [
                      const Expanded(child: Text('Database:')),
                      Expanded(
                        child: TextField(
                          controller: dbController,
                          readOnly: true,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: Visibility(
                  visible: true, 
                  child: Row(
                    children: [
                      const Expanded(child: Text('Port:')),
                      Expanded(
                        child: TextField(
                          controller: portController,
                          readOnly: true,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              // ... 其余代码
            ],
          ),
        ),
      );
    },
  );
}

说明 #

• 下拉选框的选项直接从serverMap的键（即serverName1、serverName2）生成
• 选择服务器后，通过setState更新状态，并从serverMap中取出对应服务器的详细信息，填充到各个输入框控制器中
• 将输入框设置为readOnly: true可以避免用户手动修改自动填充的内容，若需要允许修改可移除该属性

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