Flutter中如何通过单个建议项自动填充2个以上的TextField？

核心实现逻辑 #

• 提前定义关联数据映射表，存储建议项和所有需要填充的字段值的对应关系
• 给建议选择组件绑定选中事件监听，用户选中单个建议项时触发回调
• 回调中获取选中项的标识，从映射表中查询对应的所有关联字段值
• 将查询到的字段值分别赋值给对应TextField的内容属性即可

代码示例 #

原生JavaScript实现 #

<!-- 州选择下拉组件 -->
<select id="stateSelect">
  <option value="">请选择居住州</option>
  <option value="Washington">Washington</option>
  <option value="California">California</option>
  <option value="Ontario">Ontario</option>
</select>
<!-- 国家输入框 -->
<input type="text" id="countryInput" placeholder="国家">

// 预定义州和国家的映射关系，需要填充多个字段时可将值改为对象存储
const stateRelationMap = {
  'Washington': 'U.S.',
  'California': 'U.S.',
  'Ontario': 'Canada'
}
// 绑定选中事件
document.querySelector('#stateSelect').addEventListener('change', (e) => {
  const selectedState = e.target.value
  // 赋值给对应TextField
  document.querySelector('#countryInput').value = stateRelationMap[selectedState] || ''
})

React实现 #

import { useState } from 'react'

const AutoFillForm = () => {
  const [selectedState, setSelectedState] = useState('')
  const [country, setCountry] = useState('')
  // 映射表
  const stateRelationMap = {
    'Washington': 'U.S.',
    'California': 'U.S.'
  }

  const handleSelectChange = (e) => {
    const currentState = e.target.value
    setSelectedState(currentState)
    // 自动填充国家
    setCountry(stateRelationMap[currentState] || '')
  }

  return (
    <div>
      <select value={selectedState} onChange={handleSelectChange}>
        <option value="">请选择居住州</option>
        <option value="Washington">Washington</option>
        <option value="California">California</option>
      </select>
      <input type="text" value={country} placeholder="国家" />
    </div>
  )
}

Flutter实现 #

import 'package:flutter/material.dart';

class AutoFillForm extends StatefulWidget {
  const AutoFillForm({super.key});

  @override
  State<AutoFillForm> createState() => _AutoFillFormState();
}

class _AutoFillFormState extends State<AutoFillForm> {
  final Map<String, String> stateRelationMap = {
    'Washington': 'U.S.',
    'California': 'U.S.',
  };
  final TextEditingController _countryController = TextEditingController();
  String? selectedState;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        DropdownButtonFormField<String>(
          value: selectedState,
          items: stateRelationMap.keys
              .map((state) => DropdownMenuItem(value: state, child: Text(state)))
              .toList(),
          onChanged: (value) {
            setState(() {
              selectedState = value;
              // 选中后自动填充国家TextField
              _countryController.text = stateRelationMap[value] ?? '';
            });
          },
          decoration: const InputDecoration(label: Text('居住州')),
        ),
        TextField(
          controller: _countryController,
          decoration: const InputDecoration(label: Text('国家')),
        )
      ],
    );
  }
}

注意事项 #

• 如果关联数据量级大、或是会频繁变动，建议将映射表存储在后端，页面初始化时请求拉取即可，无需硬编码在前端代码中
• 如果需要同时填充多个字段，可以把映射表的值改为对象结构，例如'Washington': {'country': 'U.S.', 'areaCode': '206', 'timeZone': 'UTC-8'}，选中后依次给对应TextField赋值即可

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