Flutter如何根据left/top值定位组件并实现指定角度旋转

核心问题原因 #

• 旋转效果不生效：RotationTransition的turns参数单位为旋转圈数（1圈=360度），原代码硬编码传入315等同于旋转315圈，视觉上和0度无差异，且未使用接口返回的rotate字段动态计算角度。
• 坐标排布失效：直接给Container设置margin实现定位的方式，会受父组件布局规则约束，无法在任意位置精确放置组件，不符合绝对坐标排布的实现逻辑。
• 圆形渲染逻辑错误：原代码圆形圆角取屏幕宽度的一半，和组件自身尺寸不绑定，多尺寸场景下渲染异常。

修复实现 #

组件代码修正 #

将定位逻辑内置到组件中，使用Positioned做绝对定位适配，修正角度换算逻辑和圆形圆角计算逻辑：

class LayoutWidget extends StatefulWidget {
  final double width;
  final double height;
  final double left;
  final double top;
  final int type;
  final String name;
  final double rotate;

  LayoutWidget({
    Key? key,
    required this.width,
    required this.height,
    required this.type,
    required this.left,
    required this.top,
    required this.name,
    required this.rotate,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _LayoutWidgetState();
}

class _LayoutWidgetState extends State<LayoutWidget> {
  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: widget.left,
      top: widget.top,
      child: RotationTransition(
        // 接口返回角度转旋转圈数：角度值 / 360
        turns: AlwaysStoppedAnimation(widget.rotate / 360),
        child: Container(
          width: widget.width,
          height: widget.height,
          decoration: BoxDecoration(
              border: Border.all(
                color: Colors.grey,
              ),
              borderRadius: widget.type == 0
                  // 圆形圆角取组件自身宽度的1/2
                  ? BorderRadius.circular(widget.width / 2)
                  : null),
          child: Center(child: Text(widget.name,style: Theme.of(context).textTheme.subtitle1,)),
        ),
      ),
    );
  }
}

页面调用注意事项 #

所有LayoutWidget必须放在Stack组件内部，Stack作为绝对定位的画布容器，才能让Positioned的坐标生效：

// 按业务需要设置画布的实际宽高，和后台配置的区域尺寸匹配即可
SizedBox(
  width: 区域总宽度,
  height: 区域总高度,
  child: Stack(
    children: [
      // 遍历接口返回的tables数组，逐个传入参数生成组件即可
      LayoutWidget(
        width: 108.447479,
        height: 108.447479,
        type: 1,
        left: 469.206177,
        top: 108.030769,
        name: 'Test 1',
        rotate: 315.0,
      ),
      // 其余桌位组件
    ],
  ),
)

效果说明 #

• type=0时自动渲染圆形，type=1渲染正方形，type=2渲染矩形
• 所有组件严格按照接口返回的left/top值在Stack画布上排布
• 旋转角度和接口返回rotate字段完全匹配，315度对应逆时针旋转45度的视觉效果

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