r - 在 Shiny 的 R 中对齐 fluidPage 上的控件小部件

Question

我正在开发一款 Shiny 的应用程序，但在根据浏览器窗口的大小放置小部件时遇到了问题。我正在使用嵌套列和 fluidRow 来放置我的小部件(请参见下面的代码)。我希望小部件 B 和 D 的左侧对齐，B 和 E 的右侧对齐(见图 1)，但是当我增加窗口的大小时，在某些时候右侧的对齐方式不再适用(图2)。

图 1:正确的布局

图 2:不正确的布局

这是一个可重现的例子:
用户界面:

library(shiny)

shinyUI(fluidPage(column(
6,fluidRow(column(6, numericInput("a", label = "A", 0)),
           column(6, numericInput("b", label = "B", 0))),
fluidRow(
    column(6, numericInput("c", label = "C", 0)),
    column(3, numericInput("d", label = "D", 0)),
    column(3, numericInput("e", label = "E", 0))
)
 ),
 column(5, offset=1,h1("other stuff"))
))

服务器.R:

library(shiny)

shinyServer(function(input, output) {})

Answer 1

好的，这里有一些建议:

1) 将您的 numericInputs 固定为 100% 宽度。 Alle Inputs 看起来会很长，但至少您可以完全控制输入大小与列大小。

要复制的代码:

    shinyUI(fluidPage(column(
        6,fluidRow(column(6, numericInput("a", label = "A", 0, width = '100%')),
                   column(6, numericInput("b", label = "B", 0, width = '100%'))),
        fluidRow(
            column(6, numericInput("c", label = "C", 0, width = '100%')),
            column(3, numericInput("d", label = "D", 0, width = '100%')),
            column(3, numericInput("e", label = "E", 0, width = '100%'))
        )),
        column(5, offset=1,h1("other stuff"))
    ))

2) 使用fixedPage 布局。这使得拉伸(stretch)不太“好”，但如果您不怀疑您的用户一直在更改页面大小，这可能是一个有效的选择。

要复制的代码:

    shinyUI(fixedPage(column(
        6,fixedRow(column(6, numericInput("a", label = "A", 0)),
                   column(6, numericInput("b", label = "B", 0))),
        fixedRow(
            column(6, numericInput("c", label = "C", 0)),
            column(3, numericInput("d", label = "D", 0)),
            column(3, numericInput("e", label = "E", 0))
        )),
        column(5, offset=1,h1("other stuff"))
    ))

3) 这可能最接近您要查找的内容。碰巧的是，column(...) 接受了额外的参数，这些参数可用于影响具有类似 html 属性的样式。所以 column(3, ..., align = 'right') 将您的列与右边框(其父列的!)对齐。但是，由于您的输入“B”最终会变得比实际列宽更小，所以这并没有太大帮助，除非您再次将“B”的宽度固定为 100% = 全列宽。

要复制的代码:

    shinyUI(fluidPage(column(
        6, fluidRow(column(6, numericInput("a", label = "A", 0)),
                    column(6, numericInput("b", label = "B", 0, width = '100%'))),
        fluidRow(
          column(6, numericInput("c", label = "C", 0)),
          column(3, numericInput("d", label = "D", 0)),
          column(3, numericInput("e", label = "E", 0), align = 'right')
        )),
        column(5, offset=1,h1("other stuff"))
    ))

我希望这能以某种方式回答您的问题。