如何在Flame（Flutter）中创建带圆角的Rectangle组件？

不用非得依赖SVG，Flame本身就支持几种直接实现圆角矩形的方式，下面是具体方法：

1. 直接通过Canvas绘制RRect #

在自定义Component的render方法里，利用Flutter的RRect（圆角矩形）配合Flame的Canvas来绘制，这是最基础高效的方式：

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

class RoundedRectComponent extends PositionComponent {
  final double radius;
  final Color color;

  RoundedRectComponent({
    required this.radius,
    required this.color,
    required Vector2 size,
    Vector2? position,
  }) : super(size: size, position: position);

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    final paint = Paint()..color = color;
    // 构造圆角矩形
    final rRect = RRect.fromRectAndRadius(
      Rect.fromLTWH(0, 0, size.x, size.y),
      Radius.circular(radius),
    );
    canvas.drawRRect(rRect, paint);
  }
}

// 使用示例
class MyGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    add(
      RoundedRectComponent(
        radius: 16,
        color: Colors.blue,
        size: Vector2(200, 100),
        position: Vector2(50, 50),
      ),
    );
  }
}

2. 使用Flame的ShapeComponent（Flame 1.0+） #

如果用的是较新版本的Flame，ShapeComponent提供了更简洁的API来创建基础图形，包括圆角矩形：

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

class MyGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    add(
      ShapeComponent.rectangle(
        size: Vector2(200, 100),
        position: Vector2(50, 50),
        paint: Paint()..color = Colors.red,
        borderRadius: BorderRadius.circular(16),
      ),
    );
  }
}

3. SVG方案（适合复杂场景） #

如果你的圆角矩形附带其他复杂路径，才考虑用SVG。可以借助flame_svg包实现：

1. 先在pubspec.yaml添加依赖：

dependencies:
  flame_svg: ^1.8.0 # 请使用对应Flame版本的兼容版本

2. 加载SVG文件并添加到游戏：

import 'package:flame_svg/flame_svg.dart';
import 'package:flame/game.dart';

class MyGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    final svg = await Svg.load('assets/rounded_rect.svg');
    add(
      SvgComponent(
        svg: svg,
        size: Vector2(200, 100),
        position: Vector2(50, 50),
      ),
    );
  }
}

不过对于单纯的圆角矩形，前面两种原生方法性能更好，代码也更简洁。

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