如何实现输入字符后在另一TextField中显示对应关联内容？

解决方案 #

你需要先建立输入字符与对应内容的映射关系，监听第一个输入框的输入变化，匹配对应内容后展示在第二个输入框中。以下是修改后的完整实现代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('关联内容展示')),
        body: const _ContentPage(),
      ),
    );
  }
}

class _ContentPage extends StatefulWidget {
  const _ContentPage();

  @override
  State<_ContentPage> createState() => _ContentPageState();
}

class _ContentPageState extends State<_ContentPage> {
  // 定义输入字符与对应内容的映射表，可按需扩展
  final Map<String, String> _contentMap = {
    'i': 'india',
    'a': 'apple',
    'b': 'banana',
    'o': 'orange'
  };

  String _inputText = '';
  String _displayText = '';

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        children: [
          TextField(
            decoration: const InputDecoration(
              labelText: '输入字符',
            ),
            onChanged: (value) {
              setState(() {
                _inputText = value;
                // 匹配映射内容，无匹配则显示空文本
                _displayText = _contentMap[value] ?? '';
              });
            },
          ),
          const SizedBox(height: 20),
          Expanded(
            flex: 2,
            child: TextField(
              decoration: const InputDecoration(
                labelText: '关联内容',
              ),
              // 设置为只读，禁止用户编辑
              readOnly: true,
              // 绑定展示内容，支持自动换行
              controller: TextEditingController(text: _displayText),
              maxLines: null,
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

• 新增_contentMap映射表：存储输入字符与对应展示内容的关联关系，可根据需求随时添加新的键值对。
• 状态变量管理：用_inputText记录第一个输入框的输入内容，_displayText存储待展示的关联内容。
• 输入监听逻辑：第一个输入框的onChanged回调中，根据输入值匹配映射表内容，更新状态触发UI刷新。
• 展示框配置：第二个输入框设置为只读模式，通过TextEditingController绑定展示内容，同时开启自动换行适配多内容场景。

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