如何让Flutter的EditableText宽度适配文本长度而非占满水平空间

嘿，这个问题我之前也踩过坑！默认情况下EditableText会自动撑满所有可用的水平空间，要让它跟着文本长度自适应宽度，有两个实用的解决办法：

方法1：用IntrinsicWidth包裹（基础自适应） #

IntrinsicWidth是Flutter自带的组件，它会根据子组件的固有宽度来调整自身尺寸，刚好匹配文本内容的宽度。直接把你的EditableText套进去就行：

IntrinsicWidth(
  child: EditableText(
    controller: TextEditingController(),
    cursorColor: MyColors.black,
    textDirection: TextDirection.ltr,
    focusNode: FocusNode(),
    style: TextStyle(),
  ),
)

这样一来，输入框会随着你输入的文本变长自动扩展宽度，文本缩短时也会跟着收缩，完全贴合内容长度。

方法2：结合ConstrainedBox限制最大宽度（避免过宽） #

如果担心文本太长导致输入框超出屏幕，可以再加一层ConstrainedBox设置最大宽度，超过这个宽度后文本会自动换行：

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 300), // 根据需求调整最大宽度
  child: IntrinsicWidth(
    child: EditableText(
      controller: TextEditingController(),
      cursorColor: MyColors.black,
      textDirection: TextDirection.ltr,
      focusNode: FocusNode(),
      style: TextStyle(),
    ),
  ),
)

额外注意点 #

如果你的EditableText父组件里有Expanded、Flexible这类会强制占满空间的组件，记得把它们去掉，不然上面的方法可能不生效哦！

内容的提问来源于stack exchange，提问作者malte-v