英文:
Fluid nodes list layout with JavaFX
问题
我使用ListView来动态显示JavaFX应用程序中的项目。项目通过对后端应用程序的REST调用进行加载。每个项目都可以单击,然后显示产品视图,而不是产品列表。这在应用窗口调整大小后会导致项目看起来不美观,占用太多空间。
问题:有没有办法获得某种流体项目顺序?
在HTML和CSS中,这将是Flexbox,如果我记得正确的话。
所有项目的宽度和高度都相同,不给每个项目单独计算宽度或高度的机会。
我在互联网上找到的唯一解决方案是在这里:https://github.com/onexip/FlexBoxFX -
但它仅使用FXML文件,没有选项可以动态添加项目。最后的项目更新是6年前,这告诉我它已经被放弃或维护不好。他们的官方网站已经关闭:http://flexboxfx.io
编辑:正如James_D
所提到的,我不需要ListView,而是任何其他有效的解决方案。
我也知道WebView,但我想避免在我的应用程序中使用HTML内容。
为了让我的情况更清楚,我制作了一些屏幕截图,第一张是编辑过的,以表示我想要的理念。编辑过的截图上的数字代表项目的期望顺序。
如果窗口在宽度上增长,第一行应该有项目1、2和3,下一行有项目4、5和6,接下来一行有项目7、8和9,最后一行应该只有一个项目(10)。所有行应该居中,最后一行的项目10应该位于项目8的下方。
这是我想要得到的最终布局,但我不知道如何实现。
一切都很好,当窗口没有调整大小时,但调整大小后,它看起来很难看。
英文:
I use ListView to dynamically display items in my JavaFX app. Items are loaded through REST call to my backend app. Each item can be clicked and then product view is displayed instead of product list. That works (looks) fine until app window is resized. After resize, items look ugly and they use too much space.
The question: Is there a way to get some kind of fluid item order?
In HTML and CSS that would be Flexbox if I remember well.
All items would be the same width and the same height not giving a chance to calculate width or height for each item separately.
The only solution I found on the internet is here: https://github.com/onexip/FlexBoxFX -
but it uses FXML files only and there is no option to add items dynamically. The last project update is 6 years ago which tells me it's abandoned or poorly maintained. Their official website is dead: http://flexboxfx.io
EDIT: As James_D
mentioned, I don't need ListView but any other solution that works.
Also I am aware of WebView but I would like to avoid HTML content in my app.
To make my case more clear, I made some screenshots and the first one is edited to represent the idea what I want. Numbers on edited screenshot represent desired order of items.
If window grows more in width, first row should have items 1, 2 and 3, next row 4, 5 and 6, next row 7, 8 and 9 and last row should have only one item (10). All rows should be centered and item 10 of last row should be positioned below item 8.
This is the final layout I want to get but I don't know how.
Everything is nice when window is not resized, but after resize, it looks ugly.
答案1
得分: 4
ListView
的主要目的是提供虚拟化;也就是说,它提供了一种高效的机制来显示大量项目,让用户滚动浏览它们,而不会因为当前未显示的项目而产生UI组件的开销。它还提供一些附加功能,比如选择(允许用户将列表中的一个或多个项目置于“选择”状态,可视化显示)。
如果您确实需要虚拟化,也许需要选择功能,并且希望获得类似网格的布局,那么第三方库ControlsFX提供了类似虚拟化的GridView
。
然而,您的问题似乎只涉及布局,您的截图似乎显示您正在使用Pagination
控件,这可能会消除对虚拟化的需求。如果您不需要ListView
的功能,那么标准的布局容器,如FlowPane
或TilePane
,可能包装在ScrollPane
中,应该提供您所需的布局。
英文:
The primary purpose of a ListView
is to provide virtualization; i.e. it provides an efficient mechanism to display a large number of items, letting the user scroll through them, without the overhead of UI components for the items that are not currently displayed. It also provides some additional functionality, such as selection (allowing the user to put one or more items in the list into a "selected" state which is shown visually).
If you actually need virtualization, and perhaps selection, and want a grid-like layout, then the third-party library ControlsFX provides a similarly-virtualized GridView
.
However, your question appears to be only about layout and your screenshots appear to show you using a Pagination
control, which would (probably) obviate the need for virtualization anyway. If you don't need the functionality of the ListView
, then a standard layout pane such as FlowPane
or TilePane
, possibly wrapped in a ScrollPane
, should provide the layout you need.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论