Shiny应用中每行放置3个fileInput的代码修改咨询

以下是修改后的完整代码，可实现每行显示3个文件输入框的效果：

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

ui <- fluidPage(
  theme = shinytheme("lumen"),
  shinyWidgets::useShinydashboard(),
  navbarPage("test theme",
             tabPanel("tab1",
                      mainPanel(width = 12,
                                fluidRow(
                                  box(width = 12, 
                                      title = "title", status = "primary", solidHeader = TRUE,
                                      numericInput("num","Number of file input",value = 2),
                                      # 移除限制宽度的外层column，让动态内容充分利用行宽
                                      uiOutput("fIn")
                                  )
                                )
                      )
             )
  )
)


server <- function(input, output, session) {
  output$fIn <- renderUI({
    ind <- as.numeric(input$num)
    # 将输入框索引按每3个一组拆分
    input_groups <- split(1:ind, ceiling(seq_along(1:ind)/3))
    
    lapply(input_groups, function(group) {
      fluidRow(
        lapply(group, function(k) {
          # 每个输入框占4列宽度（12/3=4），实现每行3个
          column(width = 4,
                 fileInput(paste0("fIn", k), paste('File:', k), accept=c("xlsx","text"))
          )
        })
      )
    })
  })
}

shinyApp(ui, server)

关键修改说明 #

1. UI层调整：
   移除了uiOutput("fIn")外层的column(width = 3)，原代码的这个设置会把所有动态生成的输入框限制在3列宽度内，导致无法横向排列多个组件。

2. Server层逻辑优化：

   • 用split()和ceiling()将文件输入框的索引按每3个一组拆分，自动处理输入数量不足3的情况（比如输入5个时，会分成两组：1-3、4-5）。
   • 每个分组对应一个fluidRow，每行内的每个fileInput用column(width = 4)包裹——Bootstrap网格系统总宽度为12，12除以3刚好得到每个输入框的宽度，确保每行能放下3个。

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