如何在Flutter游戏中实现字母Tiles的自动缩放？

我在开发类似“看图猜词（4 pics one word）”的游戏时，遇到了字母tiles的缩放问题：

• 当待猜单词为5个字母时，tiles可以正常铺满容器显示（图1：5个字母tile正常排列效果）
• 当字母数超过5时，需要实现tiles自动缩小，同时保持在容器内整齐排列（图2：7个字母tile缩小适配效果）

实现思路与解决方案 #

核心逻辑 #

先固定tiles容器的宽度（比如取屏幕宽度的80%），以5个tile刚好填满容器为基准，计算单个tile的基准尺寸。当字母数n>5时，通过比例计算缩放系数，同时限制最小缩放比例避免tile过小：

1. 基准宽度 = 容器宽度 / 5
2. 所需总宽度 = n × 基准宽度
3. 缩放系数 = 容器宽度 / 所需总宽度
4. 缩放系数取计算值与最小缩放比例（如0.6）的较大值

Unity 代码示例 #

public Transform tileContainer;
public float minScale = 0.6f;
private float baseTileWidth;

void Start()
{
    // 初始化5个tile填满容器时的单块宽度
    baseTileWidth = tileContainer.GetComponent<RectTransform>().rect.width / 5;
}

public void UpdateTilesScale(int wordLength)
{
    if (wordLength <= 5)
    {
        // 恢复原尺寸并重置位置
        foreach (Transform tile in tileContainer)
        {
            tile.localScale = Vector3.one;
        }
        ResetTilePositions(wordLength);
        return;
    }

    // 计算缩放比例
    float requiredTotalWidth = wordLength * baseTileWidth;
    float scaleFactor = tileContainer.GetComponent<RectTransform>().rect.width / requiredTotalWidth;
    scaleFactor = Mathf.Max(scaleFactor, minScale);

    // 应用缩放
    foreach (Transform tile in tileContainer)
    {
        tile.localScale = new Vector3(scaleFactor, scaleFactor, 1);
    }

    // 调整间距并重新排列位置
    ResetTilePositions(wordLength, scaleFactor);
}

private void ResetTilePositions(int count, float scale = 1f)
{
    RectTransform containerRect = tileContainer.GetComponent<RectTransform>();
    float tileWidth = baseTileWidth * scale;
    float spacing = (containerRect.rect.width - count * tileWidth) / (count + 1);

    for (int i = 0; i < count; i++)
    {
        Transform tile = tileContainer.GetChild(i);
        tile.localPosition = new Vector3(spacing + i * (tileWidth + spacing), 0, 0);
    }
}

Cocos Creator 代码示例 #

cc.Class({
    extends: cc.Component,

    properties: {
        tileContainer: cc.Node,
        minScale: 0.6,
        baseTileWidth: 0
    },

    onLoad () {
        // 初始化基准宽度
        this.baseTileWidth = this.tileContainer.width / 5;
    },

    updateTilesScale(wordLength) {
        if (wordLength <= 5) {
            this.tileContainer.children.forEach(tile => {
                tile.scale = 1;
            });
            this.resetTilePositions(wordLength);
            return;
        }

        const requiredTotalWidth = wordLength * this.baseTileWidth;
        let scaleFactor = this.tileContainer.width / requiredTotalWidth;
        scaleFactor = Math.max(scaleFactor, this.minScale);

        // 应用缩放
        this.tileContainer.children.forEach(tile => {
            tile.scale = scaleFactor;
        });

        // 调整位置
        this.resetTilePositions(wordLength, scaleFactor);
    },

    resetTilePositions(count, scale = 1) {
        const tileWidth = this.baseTileWidth * scale;
        const spacing = (this.tileContainer.width - count * tileWidth) / (count + 1);
        
        this.tileContainer.children.forEach((tile, index) => {
            tile.x = spacing + index * (tileWidth + spacing);
        });
    }
});

内容的提问来源于stack exchange，提问作者Mosh Mobile Software Engineer