R Shiny分文件加载Tab面板UI出现布局异常的解决咨询

你当前的布局冲突是因为每个Tab的UI文件里用了grid_page——这是完整的页面级容器，会生成<html>、<body>这类顶级HTML标签。当多个grid_page嵌套在tabsetPanel的tabPanel中时，这些顶级标签会互相冲突，导致布局混乱、覆盖。

把每个页面文件里的grid_page替换成grid_layout（局部布局组件，适合嵌套在容器内部），同时移除原grid_page中与Tab头部重复的布局行，调整参数适配局部容器。

修正后的代码 #

主文件（无需大幅修改） #

library(shiny)
library(gridlayout)
library(bslib)
library(dplyr)

ui <- tabsetPanel(
  id = "tabset",
  tabPanel(title = "PAGE 1", source(file = "~/page_1.R", local = TRUE)$value),
  tabPanel(title = "PAGE 2", source(file = "~/page_2.R", local = TRUE)$value),
)

server <- function(input, output) {
  # DATA:
  x1 <- reactive({runif(input$obs1)})
  y1 <- reactive({runif(input$obs1)})
  
  x2 <- reactive({runif(input$obs2)})
  y2 <- reactive({runif(input$obs2)})
  
  # PAGE 1
  output$test <- renderPlot({
    plot(x1(), y1())
  })
  
  # PAGE 2
  output$test2 <- renderPlot({
    plot(x2(), y2())
  })
  
  output$tbl1 <- renderTable({
    tibble(x = x2(), y = y2())
  })
}

shinyApp(ui, server)

page_1.R（修改为局部布局） #

grid_layout(
  layout = c(
    "sidebar  plot1"  # 移除原tabpanel行
  ),
  row_sizes = c(
    "1fr"  # 移除原10px的Tab头部占位行
  ),
  col_sizes = c(
    "150px",
    "1fr"
  ),
  gap_size = "1rem",
  grid_card(
    area = "sidebar",
    card_header("Settings"),
    card_body(
      sliderInput("obs1", "First Page OBS:", min = 0, max = 1000, value = 500)
    )
  ),
  grid_card(
    area = "plot1",
    card_body(plotOutput(outputId = "test"))
  )
)

page_2.R（修改为局部布局） #

grid_layout(
  layout = c(
    "sidebar  tbl1  plot2"  # 移除原tabpanel行
  ),
  row_sizes = c(
    "1fr"  # 移除原10px的Tab头部占位行
  ),
  col_sizes = c(
    "150px",
    "1fr",
    "1fr"
  ),
  gap_size = "1rem",
  grid_card(
    area = "sidebar",
    card_header("Settings"),
    card_body(
      sliderInput("obs2", "Second Page OBS:", min = 0, max = 1000, value = 500)
    )
  ),
  grid_card(
    area = "plot2",
    card_body(plotOutput(outputId = "test2"))
  ),
  grid_card(
    area = "tbl1",
    card_body(tableOutput(outputId = "tbl1"))
  )
)

grid_page是用于作为Shiny App的根UI容器，而grid_layout是用于局部区域（如Tab、卡片、模态框内部）的网格布局组件，两者的使用场景要区分开。修改后每个Tab的布局都是独立的局部结构，不会和tabsetPanel的整体结构冲突。

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