将Widget改为Stateful时触发hasSize异常的问题与需求实现

问题原因 #

Stateful Widget在状态初始化/更新阶段，Flex这类父布局的尺寸尚未完全确定，FittedBox无法获取有效约束计算文本缩放比例，触发hasSize断言错误；Stateless Widget渲染流程更直接，不会出现这个时机问题。

解决方案代码 #

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  final String targetText = "最长30字符的目标文本内容示例";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Expanded(flex: 1, child: Container(color: Colors.grey[100])),
          Expanded(
            flex: 2,
            child: LayoutBuilder(
              builder: (context, constraints) {
                return FittedBox(
                  fit: BoxFit.scaleDown,
                  alignment: Alignment.centerLeft,
                  child: SizedBox(
                    width: constraints.maxWidth,
                    child: Text(
                      targetText,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

关键要点 #

• 用LayoutBuilder获取父级实时约束，确保FittedBox有明确尺寸参考
• FittedBox设fit: BoxFit.scaleDown，保证文本只缩小不超出容器
• 嵌套SizedBox绑定父级宽度，配合Text的maxLines:1强制单行
• 通过Expanded的flex属性控制文本区域在布局中的占比

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