mirror of
https://github.com/flame-engine/flame.git
synced 2025-11-01 01:18:38 +08:00
4f5e56f05f
This PR adds first layout component: AlignComponent, an equivalent of Align widget in Flutter. AlignComponent sizes itself to its parent, and then keeps its child aligned to the specified anchor within its own bounding box. Also adding onParentResize() lifecycle method, which is similar to onGameResize, but fires whenever the parent of the current component changes its size for any reason. (FlameGame is assumed to have the size canvasSize, and will invoke onParentResize whenever the canvas size changes). Additional layout components are planned to be added in future PRs.
101 lines
2.8 KiB
Dart
101 lines
2.8 KiB
Dart
import 'package:flame/components.dart';
|
|
import 'package:flame/effects.dart';
|
|
import 'package:flame/game.dart';
|
|
import 'package:flame/layout.dart';
|
|
|
|
class AlignComponentExample extends FlameGame {
|
|
static const String description = '''
|
|
In this example the AlignComponent is used to arrange the circles
|
|
so that there is one in the middle and 8 more surrounding it in
|
|
the shape of a diamond.
|
|
|
|
The arrangement will remain intact if you change the window size.
|
|
''';
|
|
|
|
@override
|
|
void onLoad() {
|
|
addAll([
|
|
AlignComponent(
|
|
child: CircleComponent(
|
|
radius: 40,
|
|
children: [
|
|
SizeEffect.by(
|
|
Vector2.all(25),
|
|
EffectController(
|
|
infinite: true,
|
|
duration: 0.75,
|
|
reverseDuration: 0.5,
|
|
),
|
|
),
|
|
AlignComponent(
|
|
alignment: Anchor.topCenter,
|
|
child: CircleComponent(
|
|
radius: 10,
|
|
anchor: Anchor.bottomCenter,
|
|
),
|
|
keepChildAnchor: true,
|
|
),
|
|
AlignComponent(
|
|
alignment: Anchor.bottomCenter,
|
|
child: CircleComponent(
|
|
radius: 10,
|
|
anchor: Anchor.topCenter,
|
|
),
|
|
keepChildAnchor: true,
|
|
),
|
|
AlignComponent(
|
|
alignment: Anchor.centerLeft,
|
|
child: CircleComponent(
|
|
radius: 10,
|
|
anchor: Anchor.centerRight,
|
|
),
|
|
keepChildAnchor: true,
|
|
),
|
|
AlignComponent(
|
|
alignment: Anchor.centerRight,
|
|
child: CircleComponent(
|
|
radius: 10,
|
|
anchor: Anchor.centerLeft,
|
|
),
|
|
keepChildAnchor: true,
|
|
),
|
|
],
|
|
),
|
|
alignment: Anchor.center,
|
|
),
|
|
AlignComponent(
|
|
child: CircleComponent(radius: 30),
|
|
alignment: Anchor.topCenter,
|
|
),
|
|
AlignComponent(
|
|
child: CircleComponent(radius: 30),
|
|
alignment: Anchor.bottomCenter,
|
|
),
|
|
AlignComponent(
|
|
child: CircleComponent(radius: 30),
|
|
alignment: Anchor.centerLeft,
|
|
),
|
|
AlignComponent(
|
|
child: CircleComponent(radius: 30),
|
|
alignment: Anchor.centerRight,
|
|
),
|
|
AlignComponent(
|
|
child: CircleComponent(radius: 10),
|
|
alignment: const Anchor(0.25, 0.25),
|
|
),
|
|
AlignComponent(
|
|
child: CircleComponent(radius: 10),
|
|
alignment: const Anchor(0.25, 0.75),
|
|
),
|
|
AlignComponent(
|
|
child: CircleComponent(radius: 10),
|
|
alignment: const Anchor(0.75, 0.25),
|
|
),
|
|
AlignComponent(
|
|
child: CircleComponent(radius: 10),
|
|
alignment: const Anchor(0.75, 0.75),
|
|
),
|
|
]);
|
|
}
|
|
}
|