Flutter实现Text Widget跨Container溢出显示的问题

你的问题核心在于两点：一是默认Container会裁剪子组件的溢出内容，二是Row作为线性布局，子组件各自占据独立空间，内容无法默认跨越到相邻组件。下面给你两种可行的解决方案：

方案一：关闭Container裁剪+解除Text宽度约束 #

只需修改绿色Container的裁剪行为，并给Text套一层UnconstrainedBox（解除父容器的宽度限制），就能让文本溢出到白色Container：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      color: Colors.green,
      width: 100.273,
      height: 150,
      clipBehavior: Clip.none, // 关键：关闭Container的裁剪功能
      child: const UnconstrainedBox(
        alignment: Alignment.centerLeft, // 控制文本在绿色Container内的初始位置
        child: Text(
          "Test",
          overflow: TextOverflow.visible,
          style: TextStyle(
            color: Colors.black,
            decoration: TextDecoration.none,
          ),
        ),
      ),
    ),
    Container(
      color: Colors.white,
      width: 100,
      height: 150,
    ),
  ],
)

方案二：使用Stack布局（更灵活的跨组件显示） #

如果需要更自由地控制文本位置，用Stack把两个Container和Text放在同一层级，让文本覆盖在两个容器上方：

Stack(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    // 保留原来的Row布局作为背景
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: Colors.green,
          width: 100.273,
          height: 150,
        ),
        Container(
          color: Colors.white,
          width: 100,
          height: 150,
        ),
      ],
    ),
    // 独立的Text组件，可自由调整位置
    const Align(
      alignment: Alignment(-0.5, 0), // 通过调整x/y值定位文本，负数偏左/上，正数偏右/下
      child: Text(
        "Test",
        overflow: TextOverflow.visible,
        style: TextStyle(
          color: Colors.black,
          decoration: TextDecoration.none,
        ),
      ),
    ),
  ],
)

为什么原来的方法无效？ #

1. 默认Container的clipBehavior是Clip.hardEdge，会自动裁剪超出容器范围的内容，即便Text设置了overflow: visible也没用；
2. Row是线性布局，每个子组件的宽度是固定分配的，子组件内的内容无法默认突破自身空间限制到相邻组件。

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