Flutter中如何调整TextField文本大小以适配flex:10的Expanded父组件宽度

问题根源 #

你直接在Expanded中用FittedBox嵌套TextField触发报错的核心原因是：TextField默认会主动填充父级的最大可用宽度，而FittedBox本身无固定宽高约束，需要子组件提供自身尺寸，两者布局逻辑冲突，导致布局阶段无法计算大小触发RenderBox报错。

可行解决方案 #

方案1：正确使用AutoSizeTextField第三方包

你之前调用第三方包没有成功大概率是没有给对约束，直接替换你报错的Expanded区块代码即可：

Expanded(
  flex: 10,
  child: AutoSizeTextField(
    controller: _titoloController,
    maxLines: 1,
    minFontSize: 8, // 可自定义最小显示字号
    maxFontSize: 20, // 对应你原本设置的最大字号
    textAlign: TextAlign.center,
    decoration: const InputDecoration(
      border: InputBorder.none,
      isDense: true, // 减少TextField默认内边距
      contentPadding: EdgeInsets.zero,
    ),
    style: const TextStyle(
      fontWeight: FontWeight.bold,
    ),
    onSubmitted: (_) => salvaModifica(),
  ),
)

方案2：自定义实现动态字号调整（无需第三方包）

如果不想依赖第三方包，可以自己监听文本变化，动态计算适配宽度的字号：

1. 首先在State类中添加变量和监听逻辑

class _ModificaTransazioneState extends State<ModificaTransazione> {
  var _notaController = TextEditingController();
  var _importoController = TextEditingController();
  var _titoloController = TextEditingController();
  // 新增动态字号变量
  double _titoloFontSize = 20;

  @override
  void initState() {
    super.initState();
    // 原有初始化逻辑不变
    if (widget.notatransazione != "") {
      _notaController = TextEditingController(text: widget.notatransazione);
    } else {
      _notaController = TextEditingController(text: "Aggiungi");
    }
    _importoController = TextEditingController(
        text: "${ciframostrata(widget.importotransazione)}");
    _titoloController = TextEditingController(text: widget.titolotransazione);

    // 新增文本变化监听
    _titoloController.addListener(_adjustTitoloFontSize);
    // 页面加载完成后先计算一次初始文本的适配字号
    WidgetsBinding.instance.addPostFrameCallback((_) => _adjustTitoloFontSize());
  }

  @override
  void dispose() {
    // 移除监听避免内存泄漏
    _titoloController.removeListener(_adjustTitoloFontSize);
    _titoloController.dispose();
    _importoController.dispose();
    _notaController.dispose();
    super.dispose();
  }

  // 动态计算适配宽度的字号
  void _adjustTitoloFontSize() {
    const maxFontSize = 20.0;
    const minFontSize = 8.0;
    // 通过LayoutBuilder获取Expanded的实际可用宽度，无需手动计算
  }

2. 替换对应TextField的代码

Expanded(
  flex: 10,
  child: LayoutBuilder(
    builder: (context, constraints) {
      // 拿到当前父容器的最大可用宽度
      final maxWidth = constraints.maxWidth;
      double currentFontSize = maxFontSize;
      // 循环测试适配的最大字号
      while (currentFontSize > minFontSize) {
        final textPainter = TextPainter(
          text: TextSpan(
            text: _titoloController.text,
            style: TextStyle(fontSize: currentFontSize, fontWeight: FontWeight.bold),
          ),
          maxLines: 1,
          textDirection: TextDirection.ltr,
        )..layout(maxWidth: double.infinity);
        if (textPainter.width <= maxWidth) break;
        currentFontSize -= 1;
      }
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (_titoloFontSize != currentFontSize) {
          setState(() => _titoloFontSize = currentFontSize);
        }
      });
      return TextField(
        maxLines: 1,
        decoration: const InputDecoration(
          border: InputBorder.none,
          isDense: true,
          contentPadding: EdgeInsets.zero,
        ),
        controller: _titoloController,
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: _titoloFontSize,
          fontWeight: FontWeight.bold,
        ),
        onSubmitted: (_) => salvaModifica(),
      );
    },
  ),
)

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