Flutter中实现Row组件内Widget超出屏幕边界被裁切的问题

你重写Row的clipBehavior属性没生效，核心原因是Row本身不会约束自身宽度——它会根据子Widget的总宽度延伸，超出屏幕的部分属于Row自身范围外的区域，而Row的clipBehavior只负责裁切自身绘制范围内的内容，所以这个设置起不到裁切屏幕外内容的作用。

给你两个可行的解决方案：

方案1：用Container约束宽度并设置裁切行为 #

把Row放在一个宽度等于屏幕宽度的Container里，通过Container的clipBehavior来裁切超出屏幕的部分：

class CardWidget extends StatelessWidget {
  const CardWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return Container(
      width: screenWidth,
      clipBehavior: Clip.hardEdge,
      child: Row(
        children: [
          Widget1(),
          Widget2(), // 超出屏幕的部分会被裁切
        ],
      ),
    );
  }
}

方案2：用ClipRect包裹Row #

ClipRect组件专门用于裁切超出父容器范围的子Widget，只要Row的父容器是屏幕宽度（比如直接放在Scaffold的body中），就能自动裁切超出部分：

class CardWidget extends StatelessWidget {
  const CardWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: Row(
        children: [
          Widget1(),
          Widget2(),
        ],
      ),
    );
  }
}

另外注意：你原代码中的CardWidget没有继承StatelessWidget/StatefulWidget，且build方法名错误（应该是build而非buildWidget），上面的示例已经修正了这些问题。

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