Flutter自定义标签输入框布局问题：Expanded换行异常求助

问题分析 #

问题1：添加标签后内容挤到一行 #

初始状态下TextField通过Expanded和maxLines实现换行，但添加标签后，Wrap组件内的Expanded会强制占用剩余水平空间，导致所有子元素被挤压到同一行，无法正确触发换行逻辑。

问题2：最后一个TextField自动跳新行 #

Expanded仅适配Row/Column这类Flex布局，在Wrap中使用会导致TextField强制占满整行宽度，直接跳转到新行，无法填充当前行剩余空间。

修复方案 #

核心修改逻辑 #

1. 移除所有Expanded包裹：Wrap不支持Expanded布局，让TextField自适应宽度，由Wrap自然管理换行。
2. 统一垂直对齐：调整TextField的垂直对齐参数，确保文本与标签的基线对齐一致。
3. 优化换行行为：保留maxLines: null让文本自动换行，去掉不必要的宽度限制。

关键代码修改 #

1. 重写_createTextField方法

void _createTextField({String? text, bool showHint = false, bool isLast = false}) {
  _textControllers.add(TextEditingController(text: text));

  _textControllers.last!.addListener(() {
    setState(() => getText());
  });

  _focusNodes.add(FocusNode()..addListener(() => _onFocusChange(_focusNodes.last!)));

  _focusNodes.last!.addListener(() {
    if (_focusNodes.last!.hasFocus) {
      HardwareKeyboard.instance.addHandler((event) => _onKeyEvent(event, _focusNodes.last!));
    } else {
      HardwareKeyboard.instance.removeHandler((event) => _onKeyEvent(event, _focusNodes.last!));
    }
  });

  _tagKeys.add(null);

  Widget textField = TextField(
    focusNode: _focusNodes.last,
    controller: _textControllers.last,
    textAlignVertical: TextAlignVertical.center, // 匹配标签垂直居中
    minLines: 1,
    maxLines: null,
    decoration: InputDecoration(
      hintText: showHint ? widget.hint : null,
      border: InputBorder.none,
      contentPadding: const EdgeInsets.symmetric(vertical: 10), // 匹配标签高度
    ),
  );

  _children.add(
    Baseline(
      baseline: 24.0, // 统一基线值
      baselineType: TextBaseline.alphabetic,
      child: textField,
    ),
  );
}

2. 优化Wrap组件排版

在TagTextField的build方法中，给Wrap添加间距，提升排版美观度：

@override
Widget build(BuildContext context) {
  return KeyboardListener(
    focusNode: _mainFocusNode,
    child: Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
      child: Wrap(
        spacing: 4.0, // 元素水平间距
        runSpacing: 4.0, // 行垂直间距
        children: _children,
      ),
    ),
    onKeyEvent: (event) => _onKeyEvent(event, _mainFocusNode),
  );
}

3. 调整Tag组件内边距（可选）

让标签高度与TextField更匹配：

class _TagState extends State<Tag> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFF2A2C42),
        borderRadius: BorderRadius.circular(90),
      ),
      margin: const EdgeInsets.symmetric(horizontal: 2),
      padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 10), // 调整垂直内边距
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            widget.label.toUpperCase(),
            style: const TextStyle(
              fontSize: 12,
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(width: 5),
          SizedBox(
            width: 20,
            height: 20,
            child: FloatingActionButton(
              onPressed: widget.onDelete,
              backgroundColor: const Color(0xFF2A2C42),
              mini: true,
              child: const Icon(Icons.close),
            ),
          )
        ],
      ),
    );
  }
}

修复效果 #

• 添加标签后，文本与标签会根据容器宽度自动换行，标签跟随文本显示在对应行
• 最后一个TextField填充当前行剩余宽度，内容超出容器宽度时自动换行，不会直接跳转到新行

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