Shinymobile与shinyWidgets的knobInput兼容性问题及解决咨询

问题描述 #

在基于shinymobile开发的移动端Shiny应用中使用shinyWidgets包的knobInput圆形输入控件时，控件中间的数值无法正常显示。可复现代码如下：

if (interactive()) {
  
  library("shiny")
  library("shinyWidgets")
  library(shinyMobile)
  
  ui = f7Page(
    
  f7Tabs(
    animated = TRUE,
    id = "Tabs",
    f7Tab(
      tabName = "test_knobInput",
      title = "knobInput",
      icon = icon("home"),
      knobInput(
        inputId = "myKnob",
        label = "Display previous:",
        value = 50,
        min = -100,
        displayPrevious = TRUE,
        fgColor = "#428BCA",
        inputColor = "#428BCA"
        )
    )
  )
  )
  
  server <- function(input, output, session) {
  }
  
  shinyApp(ui = ui, server = server)
  
}

问题根源 #

这是因为shinymobile的默认CSS样式会覆盖knobInput控件内部的文字样式，导致数值文字的颜色与控件背景色一致，或者被canvas图层遮挡，从而无法正常显示。具体来说，shinymobile的主题样式对.jqknob类的文字颜色和层级设置，与knobInput的默认渲染逻辑产生了冲突。

解决办法 #

通过自定义CSS强制调整knobInput控件的文字样式，确保数值可见。具体步骤是在UI中添加自定义样式，修改文字颜色并提升层级：

修改后的完整代码 #

if (interactive()) {
  
  library("shiny")
  library("shinyWidgets")
  library(shinyMobile)
  
  ui = f7Page(
    # 添加自定义CSS解决数值显示问题
    tags$style(HTML("
      .jqknob {
        color: #000 !important; /* 设置文字为黑色，与控件背景区分开 */
        z-index: 10 !important; /* 确保文字在canvas图层上方 */
        font-size: 1.2em; /* 可选：调整文字大小提升移动端可读性 */
      }
    ")),
    
    f7Tabs(
      animated = TRUE,
      id = "Tabs",
      f7Tab(
        tabName = "test_knobInput",
        title = "knobInput",
        icon = icon("home"),
        knobInput(
          inputId = "myKnob",
          label = "Display previous:",
          value = 50,
          min = -100,
          displayPrevious = TRUE,
          fgColor = "#428BCA",
          inputColor = "#428BCA"
        )
      )
    )
  )
  
  server <- function(input, output, session) {
  }
  
  shinyApp(ui = ui, server = server)
  
}

说明 #

• color: #000 !important：强制设置文字颜色为黑色，确保和控件的蓝色背景形成对比，你也可以根据自己的主题调整为其他合适的颜色。
• z-index: 10 !important：确保数值文字显示在knobInput的canvas绘图图层上方，避免被遮挡。
• 可选的font-size：如果觉得文字太小，可以调整字号提升移动端的可读性。

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