如何在R语言编写的Dash应用中创建blocks与cards

R生态暂未官方移植dash_design_kit包，但可通过以下两种方案实现同等效果的blocks和cards组件：

• 方案1：使用dashBootstrapComponents包实现（优先推荐）
  该包是R Dash生态官方维护的Bootstrap风格UI拓展库，自带卡片和区块布局相关组件：
  • 实现cards：直接调用dbc_card()组件，可配合dbc_cardheader()、dbc_cardbody()、dbc_cardfooter()快速拆分卡片结构，支持自定义样式、交互事件等参数。
  • 实现blocks：本质是带分组样式的容器组件，可通过dbc_container()、dbc_row()、dbc_col()组合布局，加上自定义样式参数即可实现和dash_design_kit的blocks一致的分组区块效果。
    参考实现代码：

  library(dash)
  library(dashBootstrapComponents)
  
  # 初始化应用，引入Bootstrap样式
  app <- Dash$new(external_stylesheets = dbcThemes$BOOTSTRAP)
  
  # 样例卡片组件
  sample_card <- dbc_card(
    list(
      dbc_cardheader("卡片标题"),
      dbc_cardbody(
        list(
          h4("卡片子标题", className = "card-title"),
          p("卡片内可插入任意Dash组件，包括图表、输入控件、文本等", className = "card-text")
        )
      )
    ),
    style = list(width = "18rem")
  )
  
  # 样例区块组件
  sample_block <- dbc_container(
    dbc_row(
      list(
        dbc_col(sample_card, width = 4),
        dbc_col(sample_card, width = 4),
        dbc_col(sample_card, width = 4)
      )
    ),
    style = list(padding = "2rem", backgroundColor = "#f8f9fa", borderRadius = "0.5rem")
  )
  
  app$layout(dbc_container(sample_block, style = list(marginTop = "2rem")))
  app$run_server()
  

• 方案2：自定义HTML+CSS实现
  如果需要完全对齐dash_design_kit的视觉样式，可直接使用Dash原生的htmlDiv()组件，给组件绑定自定义的CSS样式即可，无需依赖第三方拓展包，灵活度更高。

两种方案均可覆盖dash_design_kit中blocks和cards的全部使用场景，无功能缺口，常规开发优先选择方案1即可。

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