Flutter：IntrinsicHeight/IntrinsicWidth不兼容Transform.rotate的尺寸适配问题

我需要实现一个包含子组件的Container，让它能自动匹配子组件旋转后的实际边界。现有代码尝试使用IntrinsicHeight和RotationTransition都没达到预期效果。

现有代码 #

Container(
  margin: EdgeInsets.all(200),
  child: Stack(
    children: [
      IntrinsicHeight(
        child: Container(
          color: Colors.green,
          child: Transform.rotate(
            angle: 45 * 3.14 / 180,
            child: Container(
              color: Colors.amber,
              child: Text("Whatever"),
            )
          ),
        ),
      ),
    ],
  ),
),

效果对比 #

当前效果：

期望效果：

问题原因 #

Transform.rotate是在绘制阶段对组件进行旋转，不会影响布局计算逻辑，所以父容器（包括IntrinsicHeight）只会根据子组件旋转前的尺寸来布局，导致绿色容器无法适配旋转后的黄色组件边界。

解决方案 #

方法一：使用CustomSingleChildLayout自定义布局（推荐） #

通过自定义布局代理，在布局阶段直接计算子组件旋转后的外接矩形尺寸，让父容器自动适配这个尺寸：

// 自定义布局代理，负责计算旋转后的布局尺寸和子组件位置
class RotatedLayoutDelegate extends SingleChildLayoutDelegate {
  final double angle;

  RotatedLayoutDelegate({required this.angle});

  @override
  Size getSize(BoxConstraints constraints) {
    final Size childSize = constraints.biggest;
    final double cosAngle = cos(angle).abs();
    final double sinAngle = sin(angle).abs();
    // 计算旋转后的外接矩形宽高
    return Size(
      childSize.width * cosAngle + childSize.height * sinAngle,
      childSize.width * sinAngle + childSize.height * cosAngle,
    );
  }

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    return constraints;
  }

  @override
  Offset getPositionForChild(Size size, Size childSize) {
    final double cosAngle = cos(angle);
    final double sinAngle = sin(angle);
    // 让旋转后的子组件在父容器中居中
    final double dx = (size.width - childSize.width * cosAngle + childSize.height * sinAngle) / 2;
    final double dy = (size.height - childSize.width * sinAngle - childSize.height * cosAngle) / 2;
    return Offset(dx, dy);
  }

  @override
  bool shouldRelayout(RotatedLayoutDelegate oldDelegate) {
    return angle != oldDelegate.angle;
  }
}

// 使用示例
Container(
  margin: EdgeInsets.all(200),
  color: Colors.green,
  child: CustomSingleChildLayout(
    delegate: RotatedLayoutDelegate(angle: 45 * pi / 180),
    child: Transform.rotate(
      angle: 45 * pi / 180,
      child: Container(
        color: Colors.amber,
        child: Text("Whatever"),
      ),
    ),
  ),
),

方法二：手动计算尺寸并更新状态 #

通过GlobalKey获取子组件原始尺寸，计算旋转后的外接矩形尺寸，再手动设置父容器的宽高：

class _MyWidgetState extends State<MyWidget> {
  final GlobalKey _childKey = GlobalKey();
  Size? _rotatedSize;

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_rotatedSize != null) return;
      // 获取子组件原始尺寸
      final RenderBox renderBox = _childKey.currentContext!.findRenderObject() as RenderBox;
      final Size childSize = renderBox.size;
      final double angle = 45 * pi / 180;
      final double cosAngle = cos(angle).abs();
      final double sinAngle = sin(angle).abs();
      // 计算旋转后的尺寸并更新状态
      setState(() {
        _rotatedSize = Size(
          childSize.width * cosAngle + childSize.height * sinAngle,
          childSize.width * sinAngle + childSize.height * cosAngle,
        );
      });
    });

    return Container(
      margin: EdgeInsets.all(200),
      color: Colors.green,
      width: _rotatedSize?.width,
      height: _rotatedSize?.height,
      child: Transform.rotate(
        angle: 45 * pi / 180,
        child: Container(
          key: _childKey,
          color: Colors.amber,
          child: Text("Whatever"),
        ),
      ),
    );
  }
}

说明 #

• 方法一属于布局阶段的解决方案，无需状态更新，逻辑更优雅，推荐使用。
• 方法二适合简单场景，但需要处理初始布局时尺寸为空的问题，依赖状态更新。

内容的提问来源于stack exchange，提问作者Avarage cat enjoyer