按钮水平居顶排列，点击后表格无法垂直置于按钮下方的问题

算力阿峰

2026-8-6

问题解决：点击按钮后表格显示在按钮下方的布局调整

问题原因

你当前的代码把表格直接添加到水平方向的BoxPanel中，点击按钮后表格会和原有按钮横向并排，这就是不符合预期的核心原因——水平面板的子组件会沿水平方向排列，而非垂直。

解决方案

调整整体布局结构：用垂直BoxPanel作为外层容器，分为上下两部分——上方是水平排列的按钮栏，下方是专门用来承载表格的容器。按钮点击时，将表格添加到下方的容器中，就能实现表格在按钮下方显示的效果。

修改后的代码：

// 外层垂直面板，分为按钮栏和表格容器两部分
contents = new BoxPanel(Orientation.Vertical) {
  // 上方的水平按钮栏
  val buttonPanel = new BoxPanel(Orientation.Horizontal) {
    contents += Button("Top 10 most commun runways latitude") {
      val headers = Array.tabulate(10) {"Col-" + _}.toSeq
      val rowData = Array.tabulate[Any](10, 10) {"" + _ + ":" + _}
      // 清空表格容器，再添加新表格
      tableContainer.contents.clear()
      tableContainer.contents += new ScrollPane(new Table(rowData, headers))
    }
    contents += Button("10 highest and lowest number of countries") {
      // 这里可以添加对应表格的逻辑，同样操作tableContainer
      tableContainer.contents.clear()
      // tableContainer.contents += 你的表格组件
    }
    contents += Button("Type of runways per country") {
      // 同理处理
      tableContainer.contents.clear()
      // tableContainer.contents += 你的表格组件
    }
  }
  contents += buttonPanel

  // 下方的表格容器，初始为空
  val tableContainer = new BoxPanel(Orientation.Vertical) {}
  contents += tableContainer
}