使用JavaFX的流体节点列表布局。

huangapple go评论61阅读模式
英文:

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的下方。

这是我想要得到的最终布局,但我不知道如何实现。

使用JavaFX的流体节点列表布局。

一切都很好,当窗口没有调整大小时,但调整大小后,它看起来很难看。

使用JavaFX的流体节点列表布局。

英文:

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.

使用JavaFX的流体节点列表布局。


Everything is nice when window is not resized, but after resize, it looks ugly.

使用JavaFX的流体节点列表布局。


答案1

得分: 4

ListView 的主要目的是提供虚拟化;也就是说,它提供了一种高效的机制来显示大量项目,让用户滚动浏览它们,而不会因为当前未显示的项目而产生UI组件的开销。它还提供一些附加功能,比如选择(允许用户将列表中的一个或多个项目置于“选择”状态,可视化显示)。

如果您确实需要虚拟化,也许需要选择功能,并且希望获得类似网格的布局,那么第三方库ControlsFX提供了类似虚拟化的GridView

然而,您的问题似乎只涉及布局,您的截图似乎显示您正在使用Pagination控件,这可能会消除对虚拟化的需求。如果您不需要ListView的功能,那么标准的布局容器,如FlowPaneTilePane,可能包装在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.

huangapple
  • 本文由 发表于 2023年6月1日 22:49:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/76383155.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定