Flutter TextFormField添加Chip后键盘无法弹出问题咨询

一、修复添加Chip后键盘无法弹出的问题 #

问题根源是你给TextFormField设置了readOnly: chips.isNotEmpty——一旦有Chip生成，输入框就会变成只读状态，自然无法唤起键盘。直接移除这个属性即可恢复输入框的可交互性。

另外，当前onChanged逻辑会在用户输入匹配水果时立即添加Chip，容易在输入过程中误触发。建议改成按回车提交的方式添加Chip，体验更合理：

// 替换原onChanged为onFieldSubmitted
onFieldSubmitted: (String value) {
  String trimmedValue = value.trim();
  if (trimmedValue.isNotEmpty && _isFruitMatched(trimmedValue)) {
    setState(() {
      _fruitList.add(trimmedValue);
      _textEditingController.clear();
    });
  }
},

二、当前实现方案的合理性评估 #

你的方案存在几个可优化的点：

1. 存储Widget而非数据：chips列表直接存储FruitChip Widget，而非水果名称字符串，这种方式不利于后续的修改、排序等状态操作，应该存储数据，在build时动态生成Widget。
2. Chip作为prefixIcon的局限性：prefixIcon的空间有限，当Chip数量增多时会挤压输入框空间，建议将Chip单独放在输入框上方的Wrap中，布局更合理。
3. onChanged触发逻辑不合理：用户输入过程中频繁触发onChanged，容易误添加Chip，改为回车提交或按钮提交更符合用户习惯。

优化后的状态管理建议：用字符串列表存储已添加的水果，而非Widget：

// 替换原List<Widget> chips为字符串列表
final List<String> _fruitList = [];

// build时动态生成Chip
Wrap(
  spacing: 8.0,
  children: _fruitList.map((fruit) => FruitChip(label: fruit)).toList(),
)

三、无第三方包实现Chip拖拽排序 #

利用Flutter自带的Draggable和DragTarget组件即可实现拖拽排序，核心思路是：给每个Chip包裹Draggable传递数据，用DragTarget接收拖拽并交换数据位置，最后更新状态刷新UI。

实现代码示例：

Widget _buildDraggableChip(String fruit, int index) {
  return Draggable<String>(
    data: fruit,
    feedback: FruitChip(label: fruit),
    childWhenDragging: Opacity(
      opacity: 0.5,
      child: FruitChip(label: fruit),
    ),
    child: DragTarget<String>(
      onAccept: (data) {
        setState(() {
          int oldIndex = _fruitList.indexOf(data);
          if (oldIndex != -1 && oldIndex != index) {
            _fruitList.removeAt(oldIndex);
            _fruitList.insert(index, data);
          }
        });
      },
      builder: (context, candidateData, rejectedData) {
        return FruitChip(label: fruit);
      },
    ),
  );
}

// 在build中使用该方法生成可拖拽的Chip
Wrap(
  spacing: 8.0,
  runSpacing: 8.0,
  children: [
    for (int i = 0; i < _fruitList.length; i++)
      _buildDraggableChip(_fruitList[i], i)
  ],
)

完整优化后的代码 #

import 'package:flutter/material.dart';

class FruitChip extends StatelessWidget {
  final String label;
  final bool isMatched;

  const FruitChip({
    super.key,
    required this.label,
    this.isMatched = true,
  });

  @override
  Widget build(BuildContext context) {
    return Chip(
      label: Text(
        label,
        style: const TextStyle(color: Colors.white),
      ),
      backgroundColor: isMatched ? Colors.green : Colors.red,
    );
  }
}

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

  @override
  State<FruitForm> createState() => _FruitFormState();
}

class _FruitFormState extends State<FruitForm> {
  final List<String> _fruits = ['Apple', 'Banana', 'Orange', 'Mango', 'Grapes'];
  final List<String> _fruitList = [];
  final TextEditingController _textEditingController = TextEditingController();

  bool _isFruitMatched(String input) {
    return _fruits.any((fruit) => fruit.toLowerCase() == input.toLowerCase());
  }

  Widget _buildDraggableChip(String fruit, int index) {
    return Draggable<String>(
      data: fruit,
      feedback: FruitChip(label: fruit),
      childWhenDragging: Opacity(
        opacity: 0.5,
        child: FruitChip(label: fruit),
      ),
      child: DragTarget<String>(
        onAccept: (data) {
          setState(() {
            int oldIndex = _fruitList.indexOf(data);
            if (oldIndex != -1 && oldIndex != index) {
              _fruitList.removeAt(oldIndex);
              _fruitList.insert(index, data);
            }
          });
        },
        builder: (context, candidateData, rejectedData) {
          return FruitChip(label: fruit);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fruit Form'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 可拖拽的Chip区域
            Wrap(
              spacing: 8.0,
              runSpacing: 8.0,
              children: [
                for (int i = 0; i < _fruitList.length; i++)
                  _buildDraggableChip(_fruitList[i], i)
              ],
            ),
            const SizedBox(height: 16.0),
            TextFormField(
              controller: _textEditingController,
              onFieldSubmitted: (String value) {
                String trimmedValue = value.trim();
                if (trimmedValue.isNotEmpty && _isFruitMatched(trimmedValue)) {
                  setState(() {
                    _fruitList.add(trimmedValue);
                    _textEditingController.clear();
                  });
                }
              },
              keyboardType: TextInputType.text,
              maxLines: null,
              buildCounter: (BuildContext context,
                      {int? currentLength, int? maxLength, bool? isFocused}) =>
                  null,
              style: const TextStyle(fontSize: 16.0),
              textAlignVertical: TextAlignVertical.top,
              textAlign: TextAlign.left,
              showCursor: true,
              cursorWidth: 2.0,
              cursorColor: Colors.blue,
              cursorRadius: const Radius.circular(4.0),
              decoration: const InputDecoration(
                contentPadding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
                hintText: '输入水果名称，按回车添加',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }
}

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