问题标签 [splitpane]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
5829 浏览

css - 使用`display:flex`时反应拆分窗格显示在其他组件上方

对于我的新反应项目,我需要一个拆分窗格。
我为此使用https://github.com/tomkp/react-split-pane 。
在我实现了所有东西之后,我想要上面的标题,所以它看起来像这样。

设计应该是什么样子


所以我将标题添加到我的根组件中。

就像这样没有任何CSS它给了我几乎正确的结果。这里唯一的问题是拆分窗格似乎将100vh其作为其高度,因此整个应用程序更大。这给了我漂亮的滚动条,这是我不想要的。

没有任何CSS

我的下一个想法是将所有内容放入 css 网格中(我知道它可能不是最好的用例,但至少我知道如何解决大小问题),然后使用相对单位调整它的大小。

我添加到主要组件中的 css 是。

这种变化并没有让我达到我想要的效果。它不是整齐地堆叠所有东西,而是以某种方式将拆分窗格放在标题上方。

应用了 css 的图像

我认为我在 css 网格上做错了,所以我申请display: flex;了这给了我同样的问题。


我真的不知道这里的问题是什么,所以我很好奇以前是否有人遇到过这样的问题。

0 投票
0 回答
513 浏览

javafx - JavaFX拆分窗格分隔线位置不起作用

我有一个拆分窗格,初始分隔位置设置为 0.2,问题是在运行应用程序后位置更改为 0.5,我读到这是由于stage.setMaximized(true);
我检查了这个问题,但答案暗示当前的拆分窗格和主舞台在同一个班级,但就我而言,我必须在控制器班级工作。

我试图Main.getStage().showingProperty().addListener(...)initialize()方法中显示属性的阶段添加一个侦听器,但它不起作用,它说阶段为空,我猜是因为 initialize() 之前运行Main.start()

那么我怎样才能让我的拆分窗格从一个固定的分隔位置开始呢?

谢谢!

编辑 :

我做了一个简单的例子来暴露我的问题:

主要的

Controller_Test

现在我将拆分窗格分隔线设置为 1,这意味着第二个窗格不应显示,我运行应用程序,结果如下:

启动时的窗口

好的,这个分隔线是 1,所以只显示一个窗格,现在我将最大化窗口:

在此处输入图像描述

分频器位置明显改变。如果您阅读我之前提供的代码,您可以看到 3 个打印行作为检查点,这是它们在运行应用程序后的输出:

初始化:1.0
主要:0.9933110367892977
方法:0.9933110367892977

谢谢!

0 投票
0 回答
243 浏览

javafx - JavaFx:SplitPane 动态滚动条

我的SplitPane内部有问题ScrollPane。我需要一个类似于的可扩展滚动窗格,TableView所以当我有太多项目时我有滚动条,当我的所有项目都可见时,然后隐藏滚动条。

ScrollPane 有一个开关:fitToHeight但真/假都不能完成我需要的工作。我将上传两张截图来说明我的意思。如果它设置为true然后我根本没有滚动,这不是一个解决方案,因为我可能有太多数据无法容纳在一个窗口中,所以我需要滚动。如果它设置为false然后我总是有滚动条,即使没有数据显示在视图的底部。

我想成为动态的滚动条,所以当我拖动最后一个分隔线并且没有空间容纳最后一个项目时,滚动条应该出现,当每个项目都有空间时,SplitPane它不应该显示。

知道如何实现吗?

相关代码:

文件格式:

控制器:

主要的:

在这里我有滚动条,即使不需要滚动,每个项目都是可见的

合身

这里我没有滚动条

适合

0 投票
0 回答
43 浏览

javafx - 将节点添加到拆分窗格分隔符中

我正在尝试找到如何将标签添加到拆分窗格分隔器中的解决方案,或者至少创建这种错觉。我的方法是将三个窗格添加到拆分窗格中,然后将中间窗格与两个分隔线一起拖动。问题是,在鼠标快速移动时,中间窗格会变大,但如果我定义了最大高度,那么拖动根本不起作用。

我的问题是,是否有一种方法可以直接将标签插入到分隔器上,或者是否有人像我这样有更好的解决方案来完成这样的事情。

MWE:

班级

FXML

0 投票
2 回答
71 浏览

css - Material UI Fab Button 保留在左侧拆分窗格下方

如何使Fab 按钮完全可见?它的左半部分始终位于左窗格下方。试图增加 z-index,但没有奏效。

密码箱

0 投票
1 回答
182 浏览

reactjs - 如何使卡片组件与 react-split-pane 组件一起使用?

是我的代码。

我的问题是,如何在不使用 h-100 类的情况下使用卡片组件来填充 SplitPane 的第一个窗格?

这是因为当我在 Card 组件中使用 h-100 类时,当用户在移动平台上点击输入框时,它会破坏布局。

我尝试使用“flex-grow-1”类来解决问题,但是它不起作用。

除此之外,我不确定 react-split-pane 是否有自己的方向更改事件处理方法。如果是这样,请告诉我。

0 投票
1 回答
331 浏览

java - 如何在 JavaFX 中的 SplitPane Divider 上检测鼠标拖动事件

SplitPane在 JavaFx 中使用分隔线分割两个节点。我正在寻找一种区分两种情况的方法。一种情况是分隔线在屏幕宽度变化时响应移动,第二种情况是我使用鼠标将分隔线拖动到某个位置。当使用鼠标拖动分隔线时,我需要向分隔线添加一个侦听器。我怎样才能做到这一点?

0 投票
0 回答
27 浏览

stage - JAVA - JavaFX - 处理调用另一个阶段的节点(例如:一个 JButton)

我想要一个主舞台(主 GUI),它将在顶部包含一个菜单栏,然后​​由一个带有垂直 SplitPane [拆分发生在 350 像素] 的 AnchorPane 组成(它在右侧包含另一个水平 SplitPane,给了我总共有 3 个部分可供使用),或者一个仅使用 BorderPane 的 Left、Top 和 Center 的 BorderPane。在垂直的 SplitPane(或 Left BorderPane)中,我想要 3 个占用大约 320x320 像素的按钮,留下一个 15 像素的缓冲区。顶部部分[200 像素高度xMaxValue 宽度] 将有一个背景图像、一个 ImageView 和一个标签。现在 BorderPane 的中心部分,或第一个 SplitPane 的右侧,其中包含一个水平的 SplitPane,即该 SplitPane 的底部,将是最大的区域。我想在那个区域有5个按钮,[我可以调整这些按钮的大小和间距,可能在水平拆分窗格的底部使用 GridPane] 当单击左侧的第一个按钮时,它将变得可见。然后我希望在单击第二个按钮时显示另外 5 个不同的按钮,删除前 5 个按钮。我不知道是否需要让左侧的按钮调用 GridPane 中的 5 个按钮可见,或者如何设置它。然后我希望 GridPane 中的按钮调用另一个阶段(实际上是 5 个单独的阶段,但一次可见一个),它在打开时覆盖整个第一个阶段。另外,我需要将其调整为打开最大化的默认尺寸 1440x900(最小尺寸)。(我可以处理那个功能,我只需要子节点来调整它的大小,但只有一个大小。我需要第一个拆分窗格的左侧仅调整高度,顶部部分仅调整宽度。我知道,这很多,但我试图提供尽可能多的信息。感谢大家对此的帮助。

这是到目前为止的代码:

javaFX

0 投票
1 回答
18 浏览

javafx - 我试图弄清楚如何使我在 BorderPane 内的 VBox 与 BorderPane/Stage 一起扩展,但仍保持在一定范围内

我想弄清楚如何制作我的 VBox,只能达到 300 像素宽的大小,但我想在程序初始化时让它宽 250 像素,然后当用户点击全屏时,我想要它会扩展,但不一定会扩展它所拥有的整个空间。我希望它只达到 300 像素(并让里面的 3 个按钮做同样的事情),但我不知道该怎么做。我无法确定 PrefSize 和 CompSize 的实际含义和用途。任何帮助都会很棒。

我也遇到了与标签相同的问题,在 HBox 内,在 SplitPane 内,在 BorderPane 内。任何关于你所建议的为什么会起作用的解释都将帮助我解决未来的此类问题。谢谢

0 投票
1 回答
54 浏览

java - JavaFX splitpane - 防止不必要的分隔线位置更改

我正在尝试找到一种方法来防止分隔线位置在其中一个分隔线受 maxWidth 属性约束时发生变化。

在示例中,我单击一个按钮以最小化面板,并希望调整中央面板的大小以容纳额外的可用空间,但额外的空间在其他两个面板之间共享。

运行中的应用

单击左键后,右分隔线已移动