控制R中fluidRow中的高度闪亮答案

【问题标题】：Control the height in fluidRow in R shiny控制R中fluidRow中的高度闪亮
【发布时间】：2014-08-16 13:57:19
【问题描述】：

我正在尝试为 shiny 应用程序构建布局。我一直在查看应用程序layout guide 并进行了一些谷歌搜索，但似乎闪亮的布局系统有其局限性。

你可以创建这样的东西：

fluidPage(
 fluidRow(
  column(6,"Topleft"),
  column(6,"Topright")),
 fluidRow(
  column(6,"Bottomleft"),
  column(6,"Bottomright"))
)

这为您提供了 4 个相同大小的对象。

现在是否可以为 2 Top-Objects 赋予与 Bottom-Objects 不同的高度？

是否可以合并Topright-Object 和Bottomright-Object？

【问题讨论】：

标签： r layout shiny

【解决方案1】：

行的高度是响应式的，由列元素的高度决定。例如，我们在第一行使用两个元素，高度分别为 200 和 100 像素。该行采用其元素的最大高度。第二行包含高度分别为 100 和 150 像素的元素，并再次采用最大元素的高度。

library(shiny)
runApp(list(
  ui = fluidPage(
    fluidRow(
      column(6,div(style = "height:200px;background-color: yellow;", "Topleft")),
      column(6,div(style = "height:100px;background-color: blue;", "Topright"))),
    fluidRow(
      column(6,div(style = "height:100px;background-color: green;", "Bottomleft")),
      column(6,div(style = "height:150px;background-color: red;", "Bottomright")))
  ),
  server = function(input, output) {
  }
))

为了更好地控制诸如 bootstrap 之类的库，您可以使用 CSS 设置元素的样式，例如，我们可以为每一行添加一个类并根据需要设置其高度和其他属性：

library(shiny)
runApp(list(
  ui = fluidPage(
    fluidRow(class = "myRow1", 
      column(6,div(style = "height:200px;background-color: yellow;", "Topleft")),
      column(6,div(style = "height:100px;background-color: blue;", "Topright"))),
    fluidRow(class = "myRow2",
      column(6,div(style = "height:100px;background-color: green;", "Bottomleft")),
      column(6,div(style = "height:150px;background-color: red;", "Bottomright")))
    , tags$head(tags$style("
      .myRow1{height:250px;}
      .myRow2{height:350px;background-color: pink;}"
      )
    )
  ),
  server = function(input, output) {
  }
))

我们在这里向 head 元素传递了一个样式标签来规定我们的样式。有多种方式可以实现样式，请参阅http://shiny.rstudio.com/articles/css.html

【讨论】：

在我认为我必须仅在我的 ui 文件中确定我的应用程序的布局之前。感谢您的回答，我意识到我也必须使用显示的对象。所以在我的例子中，我可以通过在 plotOutput(...,width, height) 中操作高度来改变行的高度。
看起来“bottomleft”和“bottomright”仍在顶部，这也是我遇到的问题。想法？
你还能去掉topleft和ropright之间的空白吗？

【解决方案2】：

要合并右上和右下，关键是要以正确的方式组合fluidRows和columns。有官方教程here（只需将boxes替换为columns即可）。例子还有here

如果您希望合并右上角和右下角，您可以使用包含两列的单行。第一（左）列再次包含两行，右列是组合的一大行：

ui <- shinyUI(fluidPage(
  fluidRow(
    column(width=6,
           fluidRow("Topleft", style = "height:200px; background-color: yellow;"),
           fluidRow("Bottomleft", style = "height:200px; background-color: green;")),
    column(width = 6,
           fluidRow("Topright and Bottomright", style = "height:400px; background-color: grey;")))
))
server <- function(input, output) {}
shinyApp(ui, server)

【讨论】：