如何在VSCode扩展中创建上下堆叠的Webview面板

当然可以实现这种布局，核心是在同一ViewColumn中创建两个不同viewType的Webview面板，VSCode会自动将它们纵向堆叠在指定列中。

具体实现步骤： #

1. 为两个面板设置唯一的viewType：每个Webview面板的viewType必须唯一，否则新创建的面板会直接替换同类型的已有面板。
2. 在同一ViewColumn中创建两个面板：两次调用createWebviewPanel时，都指定vscode.ViewColumn.Two作为目标列，VSCode会自动将第二个面板堆叠在第一个面板的下方。

示例代码： #

// 创建第一个绘图面板
const panel1 = vscode.window.createWebviewPanel(
    'drawingPanelTop', // 唯一的viewType
    '顶部绘图面板',
    vscode.ViewColumn.Two,
    getWebviewOptions(extensionUri),
);

// 创建第二个绘图面板（自动堆叠在第一个下方）
const panel2 = vscode.window.createWebviewPanel(
    'drawingPanelBottom', // 不同的viewType
    '底部绘图面板',
    vscode.ViewColumn.Two,
    getWebviewOptions(extensionUri),
);

关键注意事项： #

• 如果需要确保面板始终保持堆叠状态，可以在面板被隐藏后调用panel.reveal(vscode.ViewColumn.Two)重新显示，它会回到原来的堆叠位置。
• 无需额外配置布局参数，VSCode的默认行为就是在同一列中纵向堆叠多个Webview面板。
• 若你的DrawingPanel是封装类，需要修改类的逻辑，允许传入不同的viewType和面板标题，避免重复使用同一类型标识。

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