如何在 R/Shiny 流中像 flowLayout 中的普通输入一样动态创建输入？

Question

我混合了动态创建的输入和通常定义的输入。动态创建的输入就像一个垂直堆叠的大块，其他输入在其周围流动。我如何让它们一起流动？

这重现了问题：

library(shinydashboard)
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      flowLayout(
        uiOutput('input_fields'),
        textInput('fielda','Field A',''),
        textInput('fieldb','Field B',''),
        textInput('fieldc','Field C',''),
        textInput('fieldd','Field D','')
      )
    )
  ),
  server = function(input, output) {
    output$input_fields <- renderUI({
      lapply(1:4, function(i) {
        textInput(paste0('field',i), paste('Field',i),'')
      })
    })
  }
)

当前布局：

想要的布局：

编辑：忽略字段 A、B、C、D 小部件。它们仅用于显示其他项目如何包装，但 uiOutput 项目充当一个块。假设所有输入都是动态的。

我想我应该改用这段代码。它在 lapply 内移动 renderUI 以创建多个通用输出（在运行时变化，最多 10 个），我可以使用同样通用的 uiOutput 语句来引用它们。它甚至不会警告不存在的 5 个输出。不完美，但它会做。可能需要添加一个 observeEvent，因为我认为它本身不会是反应性的。

library(shinydashboard)
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      wellPanel(
        flowLayout(
          uiOutput('field1'),
          uiOutput('field2'),
          uiOutput('field3'),
          uiOutput('field4'),
          uiOutput('field5'),
          uiOutput('field6'),
          uiOutput('field7'),
          uiOutput('field8'),
          uiOutput('field9'),
          uiOutput('field10')
        )
      )
    )
  ),
  server = function(input, output) {
    lapply(1:5, function(i) {
      output[[paste0('field',i)]] <- renderUI({
        textInput(paste0('field',i), paste('Field',i),'')
      })
    })
  }
)

Answer 1

所有四个动态生成的小部件都被视为一个对象，因为它们包含在一个列表中。因此，定位它们非常困难。 我能想到的最简单的解决方案是使用最新闪亮版本中的insertUI 函数，可以使用devtools 包安装：

devtools::install_github("rstudio/shiny")

（Here你可以阅读/了解更多关于insertUI和removeUI）

我们必须告诉insertUI它应该在哪里添加新的小部件到用户界面，我们通过指定参数selector（它必须是一个jQuery选择器接受的字符串）和参数@来做到这一点987654333@（有四个选项指定小部件应如何相对于选择器）

所以如果我们想在Field 1 下添加一个新的小部件，我们必须设置selector = "#fielda"（我们使用# 选择器，因为我们指的是ID）。同样，我们通过设置selector = "#fieldb" 等在Field 2 下添加另一个小部件。按照您的命名约定，我们可以将其概括为：

selector = paste0('#field', letters[i])

在所有情况下，我们还设置了where = "afterEnd。它将新小部件放置在参考小部件下方。 （没有空间将它们放置在参考小部件上方）

现在我们可以将insertUI 包装成for-loop

for (i in 1:4) { 
      insertUI(
        selector = paste0('#field', letters[i]), 
        where = "afterEnd",
        ui = textInput(paste0('field',i), paste('Field',i),'')
      )
    }

请注意，我们不需要在客户端添加任何uiOutput。

另一种解决方案是在服务器端渲染整个dashboardBody，创建动态不同的uiOutputs...这不会令人愉快。

---

当我们看一下图片时，我们可以看到我的做法是相反的——第一行名字中的大写字母和第二行名字中的数字。我希望这没什么大不了的:)

---

完整示例：

library(shiny)
library(shinydashboard)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      flowLayout(
        textInput('fielda','Field A',''),
        textInput('fieldb','Field B',''),
        textInput('fieldc','Field C',''),
        textInput('fieldd','Field D','')
      )
    )
  ),
  server = function(input, output) {

    for (i in 1:4) { 
      insertUI(
        selector = paste0('#field', letters[i]), 
        where = "afterEnd",
        ui = textInput(paste0('field',i), paste('Field',i),'')
      )
    }
  }
)

---

编辑：

如果没有参考小部件，那么您还可以使用非标准评估在服务器端动态定义flowLayout。

说，你想生成三个textInput 小部件。您通常可以通过键入

来执行此操作

flowLayout(
  textInput('fielda', 'Field A'),
  textInput('fieldb', 'Field B'),   
  textInput('fieldc', 'Field C')
)

在客户端。您可以通过在服务器端粘贴带有paste0 函数的字符串来做同样的事情，

        i = 1:3
        UI <- paste0("flowLayout(",
                paste0("textInput(", 
                       "'field", letters[i], "', ",
                       paste0("'Field ", LETTERS[i], "'"), 
                       ")",
                       collapse = ", "),
              ")")

将其保存在变量中，例如UI，然后解析字符串并最终对其进行评估。

eval(parse(text = UI))

---

在下面的示例中，您有 15 个动态生成的小部件

完整示例：

library(shiny)
library(shinydashboard)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      wellPanel(
      uiOutput("ui1")
    )
   )
  ),
  server = function(input, output) {

      output[["ui1"]] <- renderUI({
        i = 1:15
        UI <- paste0("flowLayout(",
                paste0("textInput(", 
                       "'field", letters[i], "', ",
                       paste0("'Field ", LETTERS[i], "'"), 
                       ")",
                       collapse = ", "),
              ")")
        # print(UI)
        eval(parse(text = UI))
      })

  }
)