本教程详细介绍了如何在Shiny应用中使用sortable包创建可滚动的列表（rank_list）。核心解决方案是通过CSS样式属性max-height和overflow-y: auto来控制列表容器的高度和溢出行为，从而在内容超出指定高度时自动显示滚动条。文章提供了完整的Shiny应用示例代码，并解析了关键的CSS和R代码，帮助开发者实现用户友好的可滚动拖拽列表。
理解Shiny Sortable列表的滚动需求
在开发交互式shiny应用时，我们经常需要展示用户可以拖拽排序的列表。sortable包提供了一个强大的解决方案，通过rank_list函数创建这样的拖拽列表。然而，当列表中的项目数量过多时，列表容器可能会变得非常长，超出屏幕范围，导致用户体验下降。为了解决这个问题，我们需要为列表容器设置一个固定的最大高度，并在内容超出该高度时自动显示滚动条，使用户能够方便地浏览和操作所有列表项。
核心解决方案：CSS样式控制
实现rank_list的滚动功能，主要依赖于CSS的两个关键属性：
max-height: 用于限制容器的最大高度。当内容高度小于max-height时，容器将根据内容自动调整高度；当内容高度超过max-height时，容器高度将固定为max-height。overflow-y: auto: 用于控制垂直方向上的内容溢出行为。当内容超出容器的max-height时，auto值将自动显示垂直滚动条。
通过将这两个属性应用于rank_list所生成的HTML元素，即可实现列表的滚动功能。
实现步骤与示例代码
我们将基于一个典型的Shiny sortable应用示例，演示如何为rank_list_1（即“Drag from here”列表）添加滚动功能。
步骤一：定位目标元素
sortable包中的rank_list函数在HTML中会生成一个div元素，其id属性与input_id参数的值一致。例如，对于input_id = “rank_list_1″，生成的div将具有id=”rank_list_1″。因此，我们可以直接通过CSS ID选择器#rank_list_1来定位并样式化这个特定的列表容器。
步骤二：应用CSS样式
在Shiny应用的UI部分，使用tags$head和tags$style来嵌入自定义CSS样式。我们将为#rank_list_1设置max-height和overflow-y: auto。
完整Shiny应用示例
以下是修改后的Shiny应用代码，其中包含了实现rank_list_1可滚动功能的CSS样式。
library(shiny)library(sortable)ui * { align-self: stretch; /* 让子元素拉伸以填充父容器的高度 */ } ")) ), fluidRow( column( width = 12, # 选择变量列表 radioButtons(inputId="variableList", label="选择您的变量列表", choices = c("names(mtcars)"="names(mtcars)","state.name"="state.name")), # 输入文本以筛选变量名 textInput( inputId = "subsetChooseListText", label = "输入文本以筛选列表", value = "c" ), div( class = "bucket-list-container default-sortable", "将项目拖拽到任意桶中", div( class = "default-sortable bucket-list bucket-list-horizontal", # uiOutput将生成可拖拽的源列表 (rank_list_1) uiOutput("selection_list"), # 移除 inline style，通过CSS文件控制 rank_list( text = "到这里", labels = list(), input_id = "rank_list_2", options = sortable_options(group = "mygroup") ), rank_list( text = "以及这里", labels = list(), input_id = "rank_list_3", options = sortable_options(group = "mygroup") ) ) ) ) ), fluidRow( column( width = 12, tags$b("结果"), column( width = 12, tags$p("input$rank_list_1"), verbatimTextOutput("results_1"), tags$p("input$rank_list_2"), verbatimTextOutput("results_2"), tags$p("input$rank_list_3"), verbatimTextOutput("results_3") ) ) ))server <- function(input,output) { # 初始化响应式变量 varList <- reactive({ req(input$variableList) if (input$variableList == "state.name") { state.name } else { # 生成一个长列表以演示滚动条 paste0(rep(names(mtcars), 20),"_", 1:220) } }) subsetChooseList <- reactive({ items <- varList() pattern <- input$subsetChooseListText if (nchar(pattern) < 1) { return(items) } items[ grepl( x = items, pattern = input$subsetChooseListText, ignore.case = TRUE ) ] }) output$selection_list <- renderUI({ labels <- subsetChooseList() # 移除已被选择的项目 labels <- labels[!( labels %in% input$rank_list_2 | labels %in% input$rank_list_3 )] # 生成可拖拽的源列表 rank_list( text = "从这里拖拽", labels = labels, input_id = "rank_list_1", options = sortable_options(group = "mygroup") ) }) # 调试用的可视化输出 output$results_1 <- renderPrint(input$rank_list_1) output$results_2 <- renderPrint(input$rank_list_2) output$results_3 <- renderPrint(input$rank_list_3)}shinyApp(ui, server)
代码解析
CSS样式定义 (tags$head 和 tags$style):
#rank_list_1: 这是关键的选择器，它精准地定位到由input_id = “rank_list_1″生成的rank_list容器。max-height: 300px;: 将该列表的最大高度设置为300像素。您可以根据实际布局和需求调整此值。overflow-y: auto;: 当列表内容的高度超过300像素时，将自动出现垂直滚动条。border, padding, background-color: 这些是可选的样式，用于改善列表的视觉效果，使其边界更清晰，与周围元素区分开来。flex-basis, flex-grow, flex-shrink: 这些Flexbox属性被添加到#rank_list_1以及#rank_list_2, #rank_list_3上，以确保在父容器（.bucket-list-horizontal）使用Flexbox布局时，它们能够正确地响应和调整大小，并与滚动高度协同工作。.bucket-list.bucket-list-horizontal > * { align-self: stretch; }: 确保横向布局的rank_list子元素能够拉伸以填充父容器的高度，这对于保持视觉一致性很重要。
uiOutput(“selection_list”):
在原始代码中，uiOutput带有一个style=”flex:1 0 200px;”的内联样式。为了更好地管理和集中样式，我们将其移除，并通过外部CSS（在tags$style中）来控制#rank_list_1的布局和滚动行为。
server 函数中的 output$selection_list:
此renderUI函数负责动态生成rank_list_1。它根据用户选择和筛选条件，生成包含相应标签的rank_list。生成的rank_list会自动获得id=”rank_list_1″，因此我们之前定义的CSS样式将自动应用于它。
注意事项与最佳实践
高度单位选择: max-height可以使用像素（px）、视口高度（vh，例如50vh表示视口高度的50%）或百分比（%，相对于父容器的高度）来定义。对于响应式设计，vh或百分比通常更具优势。Flexbox布局: 如果您的rank_list容器位于一个Flexbox布局中（如本例中的.bucket-list-horizontal），请确保Flexbox的属性（如flex-grow, flex-shrink, flex-basis）与max-height和overflow属性协同工作，以避免意外的布局问题。通常，flex-shrink: 1是必要的，以允许元素在空间不足时收缩。用户体验: 考虑为可滚动的列表添加一些视觉提示，例如边框或背景色，以明确指示它是独立的、可滚动的区域。SortableJS的autoScroll选项: sortable_options(autoScroll: true)是SortableJS库的一个选项，但它并非用于使列表容器本身滚动。其主要作用是在用户拖拽项目靠近页面边缘时，自动滚动整个页面，以便用户可以将项目拖拽到屏幕外可见的区域。它与我们这里讨论的，使rank_list容器内部内容滚动是两个不同的概念。
总结
通过简单地应用CSS的max-height和overflow-y: auto属性，我们可以有效地为Shiny sortable包中的rank_list添加滚动功能。这种方法不仅易于实现，而且提供了良好的用户体验，特别是在处理大量列表项时。结合Flexbox布局的考虑，您可以构建出既功能强大又美观的交互式Shiny应用。
以上就是Shiny Sortable列表滚动实现教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1524194.html
微信扫一扫 
支付宝扫一扫 
