使用 Flutter 中的 "setByPostion" 组件居中递增数字

Question

我正在开发一款新游戏，运行遇到一个问题，当我的分数增加到 10 或另一个小数点时，它不会正确居中，因为数字中只有第一个小数点在屏幕中央。

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

class Test extends BaseGame{

  TextComponent _scoreText;
  int score;
  TextComponent _text;

  Test() {
    // SCORE TEXT
    score = 0;
    _scoreText = TextComponent(score.toString(),
        config: TextConfig(
            color: Colors.white, fontFamily: 'Audiowide', fontSize: 70));
    add(_scoreText);
  }


  void resize(Size size) {
    super.resize(size);
    _scoreText.setByPosition(Position(
        (size.width / 2) - (_scoreText.width / 2), (size.height / 10)));
  }
  
}

Answer 1

我通过使用锚点小部件解决了这个问题，使其原点位于文本框的中心而不是左上角。

  void resize(Size size) {
    super.resize(size);
    _scoreText.setByPosition(Position(
    _scoreText.anchor = Anchor.center;
        (size.width / 2), (size.height / 10)));
  }

使用 Flutter 中的 "setByPostion" 组件居中递增数字

Center an incrementing number using the "setByPostion" component in Flutter

centering

dart

flutter

flame