向页面添加更多项目（分页 javafx）

Question

我正在使用 kotlin 和 tornadofx 创建一些小应用程序，但是我不熟悉 javafx 的一些东西如何转换为 kotlin。

我正在尝试遍历按钮列表，并将按钮添加到页面，但我只设法每页添加一个按钮，我希望每页有 X 个项目，并且我希望页数为动态

       override val root = tabpane{
    setPrefSize(800.0,600.0)
    tabs.removeAll()
    tabClosingPolicy = TabPane.TabClosingPolicy.ALL_TABS
    val buttonList = arrayOf(
            Button("Btn1"),
            Button("Btn2"),
            Button("Btn3"),
            Button("Btn4")
    )
    tab("My Tab 1") {
        hbox {
            button("Click Me!") {
                setOnAction {
                    replaceWith<TestView>()
                }
            }
            button("Add Tab 2") {
                setOnAction {
                    tab("tab2 ")

                    {
                        select()
                        button("Close") { setOnAction { close() } }



                        pagination(buttonList.size) { setPageFactory { pageIndex -> (buttonList[pageIndex]) } }


                        style {
                            arrowsVisible = false
                            pageInformationVisible = false


                        }
                    }


                }


            }
        }


    }

 }

我尝试实现一个 for 循环，每页添加一定数量的项目（假设每页 2 个按钮），然后继续创建页面。但我没有运气。如果有人可以帮助我找到基于 kotlin 的分页的合适解决方案，我将不胜感激

pagination(buttonList.size)

通过这一行我可以控制页数，所以这至少是一些东西，但我不知道如何控制每页的项目数。

pageIndex -> (buttonList[pageIndex])

我意识到这里有问题，但我没有运气实现正确的逻辑。

假设我想要每页 4 个项目，我可以通过将我的列表除以数字 4（每页项目）来获得所需的页数。但不确定如何在每页添加超过 1 个项目。

Answer 1

class SomeView : View() {
    private val buttonList = arrayOf(
            Button("Btn1"),
            Button("Btn2"),
            Button("Btn3"),
            Button("Btn4"),
            Button("Btn5")
    )

    private var pageSize = 3 //Decide this however you want

    override val root = tabpane {
        setPrefSize(800.0, 600.0)
        tabs.removeAll()
        tabClosingPolicy = TabPane.TabClosingPolicy.ALL_TABS
        tab("My Tab 1") {
            hbox {
                button("Click Me!") {
                    setOnAction {
                        replaceWith<TestView>()
                    }
                }
                button("Add Tab 2") {
                    setOnAction {
                        tab("tab2 ")
                        {
                            select()
                            button("Close") { setOnAction { close() } }
                            //The ceiling calc is for rounding up for the size
                            pagination(ceil(buttonList.size.toDouble() / pageSize).toInt()) 
                                { setPageFactory { pageIndex -> createPage(pageIndex * pageSize, pageSize) } }
                            style {
                                arrowsVisible = false
                                pageInformationVisible = false
                            }
                        }
                    }
                }
            }
        }
    }

    private fun createPage(startingIndex: Int, pageSize: Int = 1) : Pane {
        val pagePane = VBox() //Create and design whatever pane you want
        val endingIndex = minOf(startingIndex + pageSize, buttonList.size) //Don't go out of bounds
        for(i in startingIndex until endingIndex) { //Assuming starting index is in bounds
            pagePane.add(buttonList[i])
        }
        return pagePane
    }
}

这里是动态页面分页的解决方案。您的主要问题是选项卡窗格仅包含一个子项 pane/component。答案是将按钮嵌套在窗格中。我还没有针对边缘情况或其他任何事情进行过如此严格的测试，所以这更像是概念验证。如果它们出现，您将不得不考虑这些问题。

旁注：如上所述，这也是您的 "Close" 按钮未出现的原因。此外，当我测试您的代码时，我注意到除非我单击窗格中的按钮，否则样式不会实现。如果您使用样式表，创建一个 cssclass，并将 class 添加到您的标签面板，也许它会起作用（如果您选择这样做，请不要忘记导入您的样式表）。

向页面添加更多项目（分页 javafx）

Adding more items to page (pagination javafx)

javafx

kotlin

tornadofx