如何将Shiny的radioGroupButtons设置为2-1-2的多行多列布局？

问题 #

我有一个包含5个选项的radioGroupButtons，希望将其修改为3行自定义布局：第一行2个选项，第二行1个居中选项，第三行2个选项。当前代码如下，期望效果如图所示：

library(shiny)
library(shinyWidgets)

ui <- 
  fluidPage(
    column(
      7,offset = 1,
          radioGroupButtons(
            "sel_inputdata_type", "Choose one :",
            
            choiceValues = list("lipidsearch", "liquid", "excel", "sumexp", "mw"),
            
            choiceNames = list(
              paste(tags$img(src = "www/lipidsearch_icon.png", height = "27px", width = "27px"), HTML("<b style=font-size:25px>&nbsp;Lipid Search</b>")),
              paste(tags$img(src = "www/liquid_icon.png", height = "29px", width = "29px"), HTML("<b style=font-size:25px>&nbsp;LIQUID</b>")),
              paste(tags$img(src = "www/excel_icon.png", height = "23px", width = "23px"), HTML("<b style=font-size:25px>&nbsp;Excel files</b>")),
              paste(icon("database",  style='font-size:16px;'), HTML("<b style=font-size:25px>&nbsp;Summarized Experiment</b>")),
              paste(tags$img(src = "www/mw_icon.png", height = "27px", width = "27px"), HTML("<b style=font-size:25px>&nbsp;Metabolomics Workbench</b>"))
            ),
            direction = "horizontal",individual=T, status = "primary",size = "lg"
          ))
  )


server <- function(input, output) {}

shinyApp(ui, server)

期望效果：

解决方案 #

由于radioGroupButtons默认布局参数无法直接实现这种自定义行分布，可通过手动拆分每个选项，结合fluidRow和column控制布局，同时保留单选互斥功能。修改后的代码如下：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  column(7, offset = 1,
         tags$h4("Choose one :"),
         # 第一行：2个选项
         fluidRow(
           column(6,
                  radioGroupButtons(
                    inputId = "sel_inputdata_type",
                    choices = list("lipidsearch" = paste(tags$img(src = "www/lipidsearch_icon.png", height = "27px", width = "27px"), HTML("<b style=font-size:25px>&nbsp;Lipid Search</b>"))),
                    individual = TRUE,
                    status = "primary",
                    size = "lg"
                  )
           ),
           column(6,
                  radioGroupButtons(
                    inputId = "sel_inputdata_type",
                    choices = list("liquid" = paste(tags$img(src = "www/liquid_icon.png", height = "29px", width = "29px"), HTML("<b style=font-size:25px>&nbsp;LIQUID</b>"))),
                    individual = TRUE,
                    status = "primary",
                    size = "lg"
                  )
           )
         ),
         # 第二行：居中的1个选项
         fluidRow(
           column(4, offset = 4,
                  radioGroupButtons(
                    inputId = "sel_inputdata_type",
                    choices = list("excel" = paste(tags$img(src = "www/excel_icon.png", height = "23px", width = "23px"), HTML("<b style=font-size:25px>&nbsp;Excel files</b>"))),
                    individual = TRUE,
                    status = "primary",
                    size = "lg"
                  )
           )
         ),
         # 第三行：2个选项
         fluidRow(
           column(6,
                  radioGroupButtons(
                    inputId = "sel_inputdata_type",
                    choices = list("sumexp" = paste(icon("database", style='font-size:16px;'), HTML("<b style=font-size:25px>&nbsp;Summarized Experiment</b>"))),
                    individual = TRUE,
                    status = "primary",
                    size = "lg"
                  )
           ),
           column(6,
                  radioGroupButtons(
                    inputId = "sel_inputdata_type",
                    choices = list("mw" = paste(tags$img(src = "www/mw_icon.png", height = "27px", width = "27px"), HTML("<b style=font-size:25px>&nbsp;Metabolomics Workbench</b>"))),
                    individual = TRUE,
                    status = "primary",
                    size = "lg"
                  )
           )
         )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

关键说明 #

• 所有按钮共用同一个inputId，确保单选互斥的核心功能正常；
• 用fluidRow拆分三行，通过column的宽度参数（如6）和offset偏移参数（如4）精准控制按钮位置，实现目标布局；
• 完整保留原代码中的图标、文本样式、按钮状态等参数，视觉效果与需求一致。

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