如何在JUCE C++的TableListBox播放列表中添加可播放音频文件

• 首先给你的PlaylistComponent类增加TableListBox成员，同时实现TableListBoxModel接口，用来渲染表格每一行的内容
• 修改加载按钮的点击逻辑，新增音频文件后主动触发表格刷新
• 可选扩展：给表格增加点击事件，点击对应行就播放选中的音频文件

1. 头文件修改 #

// PlaylistComponent.h 新增内容
#include <JuceHeader.h>

class PlaylistComponent  : public Component,
                           public Button::Listener,
                           public TableListBoxModel // 新增继承表格模型接口
{
public:
    // 保留你原有其他声明
    int getNumRows() override;
    void paintRowBackground (Graphics& g, int rowNumber, int width, int height, bool rowIsSelected) override;
    void paintCell (Graphics& g, int rowNumber, int columnId, int width, int height, bool rowIsSelected) override;
    // 可选：点击表格行播放的方法
    void cellClicked(int rowNumber, int columnId, const MouseEvent&) override;

private:
    TableListBox playlistTable { "播放列表", this }; // 新增表格成员
    Array<File> trackTitles;
    // 保留你原有其他成员
};

2. 表格接口实现 #

// PlaylistComponent.cpp 实现表格核心接口
// 返回表格行数，和音频文件数组长度绑定
int PlaylistComponent::getNumRows()
{
    return trackTitles.size();
}

// 绘制行背景，选中行高亮样式可自行修改
void PlaylistComponent::paintRowBackground(Graphics& g, int rowNumber, int width, int height, bool rowIsSelected)
{
    g.fillAll(rowIsSelected ? Colour(0xff4488ff) : Colour(0xff222222));
}

// 绘制单元格内容，第一列显示文件名，可自行扩展时长、艺术家等列
void PlaylistComponent::paintCell(Graphics& g, int rowNumber, int columnId, int width, int height, bool rowIsSelected)
{
    g.setColour(Colours::white);
    g.setFont(14.0f);
    if (columnId == 1)
        g.drawText(trackTitles[rowNumber].getFileNameWithoutExtension(), 
                   2, 0, width - 4, height, Justification::centredLeft, true);
}

3. 构造函数初始化表格 #

PlaylistComponent::PlaylistComponent()
{
    // 保留你原有初始化逻辑
    // 新增表格初始化代码
    playlistTable.getHeader().addColumn("曲目名称", 1, 400);
    addAndMakeVisible(playlistTable);
    // 后续可在resized方法中调整表格的布局位置和尺寸
}

4. 按钮点击逻辑修改 #

void PlaylistComponent::buttonClicked(Button* button)
{
    if (button == &loadButton)
    {
        DBG(" MainComponent::buttonClicked: loadButton");
        FileChooser chooser{ "选择音频文件" };
        // 新增格式过滤，仅显示mp3文件
        if (chooser.browseForFileToOpen(FileBrowserComponent::openMode, nullptr,
            File("*.mp3"), "*.mp3"))
        {
            auto selectedFile = chooser.getResult();
            trackTitles.add(selectedFile);
            player->loadURL(selectedFile);
            playlistTable.updateContent(); // 新增：添加文件后刷新表格
        }
    }
}

可选扩展：点击表格行直接播放对应曲目

void PlaylistComponent::cellClicked(int rowNumber, int columnId, const MouseEvent&)
{
    if (rowNumber < trackTitles.size())
    {
        player->loadURL(trackTitles[rowNumber]);
        player->start();
    }
}

内容的提问来源于stack exchange，提问作者Emilia Hardej