解决ShinyDashboard中renderUI+htmlOutput包裹时valueBox宽度参数失效问题

使用renderUI+htmlOutput+tagList动态生成shinydashboard的valueBox时，设置的width参数被忽略，盒子会占满剩余宽度并垂直堆叠；但手动在UI中渲染时，宽度符合设置且能横向排列。

问题根源是每个htmlOutput会给valueBox额外包裹一层容器，打乱了shinydashboard的栅格布局逻辑。无需通过htmlOutput间接渲染，直接在renderUI中生成所有valueBox即可，这样width参数就能正常生效，盒子会自动按栅格规则横向排列。

library(shiny)
library(shinyWidgets)
library(shinydashboard)

ui <- fluidPage(
  useShinydashboard(),
  titlePanel('Title'),
  
  sidebarLayout(
    sidebarPanel(width = 3,
                 selectInput(inputId = 'pick', 'Pick a letter', 
                             choices = c('A','B','C'))
    ),
    
    mainPanel(
      uiOutput("stats")
    )
  )
)

server <- function(input, output, session) {
  # 动态数据示例，实际可根据输入变化
  nstats <- 3
  stats <- c(-10,0,10)  
  
  output$stats <- renderUI({
    # 直接生成所有valueBox，无需嵌套htmlOutput
    vboxes <- lapply(1:nstats, function(i) {
      valueBox(
        subtitle = 'Change measure',
        width = 2,
        value = paste0(stats[i],"%"),
        icon = icon('chart-line')
      )
    })
    # 用fluidRow包裹确保在栅格中正确排列，也可直接用tagList
    fluidRow(vboxes)
  })
}

shinyApp(ui = ui, server = server)

如果需要根据用户选择的input$pick调整valueBox数量，只需将数据改成响应式对象即可：

server <- function(input, output, session) {
  # 根据用户选择动态生成数据
  dynamic_stats <- reactive({
    switch(input$pick,
           "A" = c(-10, 0, 10),
           "B" = c(5, 15),
           "C" = c(-5, 0, 5, 10)
    )
  })
  
  output$stats <- renderUI({
    stats <- dynamic_stats()
    vboxes <- lapply(seq_along(stats), function(i) {
      valueBox(
        subtitle = 'Change measure',
        width = 2,
        value = paste0(stats[i],"%"),
        icon = icon('chart-line')
      )
    })
    fluidRow(vboxes)
  })
}

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