时间戳

首页 > 解决方案 > 使用 Flutter 中的“setByPostion”组件将递增的数字居中

flutter - 使用 Flutter 中的“setByPostion”组件将递增的数字居中

问题描述

我正在开发一个新游戏，遇到了一个问题，当我的分数增加到超过 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)));
  }
  
}

标签： flutterdartcenteringflame

解决方案

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

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

推荐阅读