如何为RexUI滚动面板调整文本大小并添加图标？

1. 为面板项添加图标 #

rexUI的Label组件原生支持图标配置，直接在label的初始化参数里添加icon属性即可，注意要先在场景的preload阶段预加载图标资源：

// 先在场景preload方法中预加载图标
// scene.load.image('your-icon-key', 'path/to/your-icon.png');

var label = scene.rexUI.add.label({
    height: 350,
    width: 1500,
    background: scene.rexUI.add.roundRectangle({
        color: COLOR_PRIMARY
    }),
    // 添加图标配置
    icon: scene.rexUI.add.image({
        key: 'your-icon-key' // 替换为你预加载的图标资源键名
    }),
    iconSpace: 10, // 图标与文本的间距
    text: scene.add.text(
        0, 
        0, 
        'Lorem Ipsum is simply dummy text of the printing'
    ),
    name: name,
})

2. 调整文本大小 #

创建Text组件时直接通过样式参数设置字号，也可以后续通过setTextStyle修改：

text: scene.add.text(
    0, 
    0, 
    'Lorem Ipsum is simply dummy text of the printing',
    {
        fontSize: '24px', // 自定义字号
        fill: '#ffffff' // 可选：设置文本颜色，避免和深色背景冲突
    }
)

// 后续修改字号的方式
// label.text.setTextStyle({ fontSize: '20px' });

3. 解决长单词换行问题 #

Phaser的Text组件默认不会拆分超长单词，需要开启高级换行逻辑，同时要确保wordWrapWidth是文本的实际可用宽度（需减去图标、间距等占用的空间）：

text: scene.add.text(
    0, 
    0, 
    'Lorem Ipsum is simply dummy text of the printing and a verylongwordthatneedstobreak',
    {
        fontSize: '24px',
        fill: '#ffffff',
        wordWrap: {
            width: 1380, // 示例：label宽度1500 - 图标宽度100 - 间距10 - 内边距10 = 1380，根据实际情况调整
            useAdvanced: true // 开启高级换行，支持拆分长单词
        }
    }
)

如果useAdvanced不生效，可以自定义拆分逻辑：

text: scene.add.text(
    0, 
    0, 
    'Lorem Ipsum is simply dummy text of the printing and a verylongwordthatneedstobreak',
    {
        fontSize: '24px',
        fill: '#ffffff',
        wordWrap: {
            width: 1380,
            callback: function (text, width, context) {
                const words = text.split(' ');
                const result = [];
                let currentLine = '';
                for (let word of words) {
                    while (word.length > 0) {
                        // 每20个字符拆分一次长单词
                        const chunk = word.slice(0, 20);
                        if (context.measureText(currentLine + ' ' + chunk).width > width && currentLine) {
                            result.push(currentLine);
                            currentLine = chunk;
                        } else {
                            currentLine = currentLine ? `${currentLine} ${chunk}` : chunk;
                        }
                        word = word.slice(20);
                    }
                }
                if (currentLine) result.push(currentLine);
                return result;
            }
        }
    }
)

4. 实现滚动面板功能 #

原代码创建的是普通Sizer，要实现滚动需要改用scrollPanel组件，把内容Sizer嵌套进去：

const COLOR_PRIMARY = 0x4e342e;

var CreatePanel = function (scene) {
    // 创建滚动面板
    const scrollPanel = scene.rexUI.add.scrollPanel({
        x: scene.cameras.main.centerX,
        y: scene.cameras.main.centerY,
        width: 1500, // 滚动面板可视宽度
        height: 800, // 滚动面板可视高度
        scrollMode: 'y', // 垂直滚动
        background: scene.rexUI.add.roundRectangle({ color: 0x2d2d2d }),
        // 内容容器Sizer
        sizer: scene.rexUI.add.sizer({
            orientation: 'y',
            space: { item: 4 }
        }),
        // 可选：配置滚动条
        slider: {
            track: scene.rexUI.add.roundRectangle({ width: 20, color: 0x444444 }),
            thumb: scene.rexUI.add.roundRectangle({ width: 20, color: 0x888888 })
        },
        space: {
            left: 10, right: 10, top: 10, bottom: 10,
            sizer: 10,
            slider: 5
        }
    });

    const contentSizer = scrollPanel.sizer;
    for (var i = 0; i < 50; i++) {
        var name = `item-${i}`;
        var label = scene.rexUI.add.label({
            height: 350,
            width: 1480, // 减去滚动面板内边距
            background: scene.rexUI.add.roundRectangle({ color: COLOR_PRIMARY }),
            icon: scene.rexUI.add.image({ key: 'your-icon-key' }),
            iconSpace: 10,
            text: scene.add.text(
                0, 0, 
                'Lorem Ipsum is simply dummy text of the printing and a verylongwordthatneedstobreak',
                {
                    fontSize: '24px',
                    fill: '#ffffff',
                    wordWrap: {
                        width: 1350,
                        useAdvanced: true
                    }
                }
            ),
            name: name,
            align: 'center' // 图标和文本垂直居中
        });
        contentSizer.add(label, { expand: true });
    }

    scrollPanel.layout();
    return scrollPanel;
}

内容的提问来源于stack exchange，提问作者Nguyễn Hải Long