如何在不使用IntrinsicWidth的情况下让TextField自适应内容宽度？

这是我的代码：

Row(
  children: [
    Text("title"),
    Spacer(),
    ConstrainedBox(
      constraints: BoxConstraints(
          maxHeight: 28,
          minWidth: 45
      ),
      child: Container(
        decoration: BoxDecoration(
            color: Color(0x0A000000),
            borderRadius: BorderRadius.all(Radius.circular(4))
        ),
        child: TextField(
        ),
      ),
    ),
    SizedBox(width: 4,),
    Text("unit")
  ],
)

当前TextField会尽可能扩展宽度，我想要实现类似IntrinsicWidth的自适应内容宽度效果，但不想使用IntrinsicWidth，该怎么处理？

补充说明：

• 使用Expanded或Flexible时，TextField会占据剩余空间，宽度过大
• 使用IntrinsicWidth时，TextField能自适应内容宽度，这是我需要的效果

推荐三种可行的实现方式：

1. 用UnconstrainedBox+Align解除宽度约束 #

给TextField所在的Container套上UnconstrainedBox解除Row的强制宽度约束，再用Align保证在ConstrainedBox范围内的对齐：

Row(
  children: [
    Text("title"),
    Spacer(),
    ConstrainedBox(
      constraints: BoxConstraints(
          maxHeight: 28,
          minWidth: 45
      ),
      child: Align(
        alignment: Alignment.centerLeft,
        child: UnconstrainedBox(
          child: Container(
            decoration: BoxDecoration(
                color: Color(0x0A000000),
                borderRadius: BorderRadius.all(Radius.circular(4))
            ),
            child: TextField(
              decoration: InputDecoration(
                isDense: true,
                contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 6),
                border: InputBorder.none,
              ),
            ),
          ),
        ),
      ),
    ),
    SizedBox(width: 4,),
    Text("unit")
  ],
)

这种方式简单直接，不需要额外状态管理，适合大多数场景。

2. 动态计算文本宽度（精准控制） #

通过TextPainter实时计算输入文本的宽度，动态设置Container的宽度，还能限制最大宽度：

class AdaptiveTextField extends StatefulWidget {
  @override
  _AdaptiveTextFieldState createState() => _AdaptiveTextFieldState();
}

class _AdaptiveTextFieldState extends State<AdaptiveTextField> {
  final TextEditingController _controller = TextEditingController();
  double _textWidth = 45; // 初始宽度匹配minWidth

  @override
  void initState() {
    super.initState();
    _controller.addListener(_updateTextWidth);
    _updateTextWidth();
  }

  void _updateTextWidth() {
    final text = _controller.text.isEmpty ? " " : _controller.text;
    final textPainter = TextPainter(
      text: TextSpan(text: text, style: DefaultTextStyle.of(context).style),
      textDirection: TextDirection.ltr,
    )..layout(minWidth: 45);
    
    setState(() {
      _textWidth = textPainter.width;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text("title"),
        Spacer(),
        ConstrainedBox(
          constraints: BoxConstraints(
              maxHeight: 28,
              minWidth: 45,
              maxWidth: 200 // 限制最大宽度，避免文本过长撑满屏幕
          ),
          child: Container(
            width: _textWidth,
            decoration: BoxDecoration(
                color: Color(0x0A000000),
                borderRadius: BorderRadius.all(Radius.circular(4))
            ),
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                isDense: true,
                contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 6),
                border: InputBorder.none,
              ),
            ),
          ),
        ),
        SizedBox(width: 4,),
        Text("unit")
      ],
    );
  }
}

这种方式适合需要精准控制宽度变化的场景，比如限制输入文本的最大显示宽度。

3. 用Wrap替代Row的局部结构 #

把TextField和"unit"文本放在Wrap组件中，让它们根据自身宽度自动排列：

Row(
  children: [
    Text("title"),
    Spacer(),
    Wrap(
      crossAxisAlignment: WrapCrossAlignment.center,
      spacing: 4,
      children: [
        ConstrainedBox(
          constraints: BoxConstraints(
              maxHeight: 28,
              minWidth: 45
          ),
          child: Container(
            decoration: BoxDecoration(
                color: Color(0x0A000000),
                borderRadius: BorderRadius.all(Radius.circular(4))
            ),
            child: TextField(
              decoration: InputDecoration(
                isDense: true,
                contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 6),
                border: InputBorder.none,
              ),
            ),
          ),
        ),
        Text("unit"),
      ],
    ),
  ],
)

Wrap会让子组件摆脱Row的强制拉伸约束，自然根据内容宽度排列，适合布局结构简单的场景。

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