Flutter实现可滚动Text组件挤压其他元素及溢出问题如何解决

问题现象 #

现有实现的可滚动Text组件会向下挤压页面其他元素，触发布局溢出报错，效果如下：

预期实现横向滚动的长文本效果如下：

问题原因 #

当前代码缺少两个核心配置：

• 没有给SingleChildScrollView添加明确的尺寸约束，滚动组件默认会尽可能撑开以容纳全部子内容，在无边界的布局约束下就会挤压其他元素、触发溢出
• 没有指定滚动方向为横向，SingleChildScrollView默认是纵向滚动，和预期的横向滚动效果不符

修复后的代码示例 #

场景1：固定滚动区域高度 #

Container(
  alignment: Alignment.centerRight,
  padding: EdgeInsets.fromLTRB(10, 20, 10, 0),
  // 新增固定高度约束，根据需求调整数值
  height: 80,
  child: SingleChildScrollView(
    // 新增横向滚动配置
    scrollDirection: Axis.horizontal,
    child: Text(
      "123 123 123 123 123 12 3123 123 123 123 123 1233123 123 123 123 123 123 ",
      style: TextStyle(fontSize: 38.0),
    ),
  )
)

场景2：滚动区域占父布局剩余空间（如放在Column中） #

如果该组件放在Column等弹性布局内，需要用Expanded包裹外层容器，自动适配剩余可用高度：

Column(
  children: [
    // 其他页面固定组件
    Container(
      height: 120,
      color: Colors.blue[100],
      child: const Center(child: Text("页面其他区域")),
    ),
    // 用Expanded包裹滚动组件，仅占用Column剩余高度
    Expanded(
      child: Container(
        alignment: Alignment.centerRight,
        padding: const EdgeInsets.fromLTRB(10, 20, 10, 0),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Text(
            "123 123 123 123 123 12 3123 123 123 123 123 1233123 123 123 123 123 123 ",
            style: const TextStyle(fontSize: 38.0),
          ),
        ),
      )
    )
  ]
)

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