Flutter：如何让TextField仅占用最小必要空间？

针对你的DurationPicker组件需求，推荐用IntrinsicWidth widget实现TextField仅占用所需宽度的效果，无需设置固定宽度：

• IntrinsicWidth会根据子组件的内在内容宽度确定自身宽度，刚好适配最多2个字符的TextField需求，且能完美配合InputDecorator使用。

示例代码：

Row(
  children: [
    IntrinsicWidth(
      child: TextField(
        maxLength: 2,
        decoration: InputDecoration(
          labelText: '小时',
          border: OutlineInputBorder(),
        ),
        keyboardType: TextInputType.number,
      ),
    ),
    const SizedBox(width: 8), // 小时和分钟输入框之间的间距
    IntrinsicWidth(
      child: TextField(
        maxLength: 2,
        decoration: InputDecoration(
          labelText: '分钟',
          border: OutlineInputBorder(),
        ),
        keyboardType: TextInputType.number,
      ),
    ),
  ],
)

问题根源说明 #

问题主要出在父组件的布局约束：TextField默认会继承父组件的宽度填充约束（比如Row默认会让子组件尽可能占满可用空间），而InputDecorator会跟随TextField的宽度，导致输入框被拉伸。IntrinsicWidth的作用就是打破这种填充约束，让子组件根据自身内容宽度布局。

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