textfield_tags包：如何将TextField光标移至末尾并实现标签垂直排列？

一、调整标签为垂直堆叠布局 #

textfield_tags默认横向排列标签，要实现垂直堆叠需自定义标签渲染组件：

• 替换默认布局为Wrap组件，设置direction: Axis.vertical实现垂直排列
• 示例代码：

TextFieldTags(
  tagsStyler: TagsStyler(
    // 自定义标签样式（如背景色、圆角等）
  ),
  textFieldStyler: TextFieldStyler(
    // 自定义输入框样式
  ),
  onTag: (tag) {},
  onDelete: (tag) {},
  // 自定义标签布局
  tagBuilder: (context, index, tag, onDelete) {
    return Wrap(
      direction: Axis.vertical,
      spacing: 8,
      children: [
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: Colors.blue[100],
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(tag),
              SizedBox(width: 6),
              InkWell(
                onTap: () => onDelete(tag),
                child: Icon(Icons.close, size: 16),
              ),
            ],
          ),
        ),
      ],
    );
  },
)

二、修复光标位置异常问题 #

直接操作textController.selection无效，是因为包内部会自动重置光标，需在合适时机强制调整：

1. 通过addPostFrameCallback在布局完成后修改光标位置
2. 监听标签的添加/删除事件，同步触发光标调整
3. 示例代码：

late TextFieldTagsController _tagsController;
late TextEditingController _textController;

@override
void initState() {
  super.initState();
  _textController = TextEditingController();
  _tagsController = TextFieldTagsController();
  
  // 监听标签变化，调整光标
  _tagsController.addListener(() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _textController.selection = TextSelection.fromPosition(
        TextPosition(offset: 0),
      );
    });
  });
}

@override
void dispose() {
  _textController.dispose();
  _tagsController.dispose();
  super.dispose();
}

// 关联控制器到TextFieldTags
TextFieldTags(
  controller: _tagsController,
  textEditingController: _textController,
  // 其他配置项
)

三、额外优化建议 #

• 若上述方法无效，可尝试重写包内部的_handleSelection方法，阻止其自动重置光标
• 确保使用该包的最新版本，避免版本bug引发的光标问题

内容的提问来源于stack exchange，提问作者flutter.dev