如何在用鼠标拖动调整选项卡窗格大小时调整组件的大小

Question

我已经实现了非常简单的鼠标拖动位于中间的选项卡窗格。鼠标大小调整是非常基本的，它的工作不是很好，但现在我可以拖动选项卡的边界并增加大小。

现在我发现了一个问题。当我调整位于中心的标签的大小时，位于中心旁边的组件并没有像用户期望的那样被推回并自动尖叫，它们被放置在我调整大小的组件的后面。当我用鼠标拖动扩展主组件时，我能以某种方式设置所有组件被推回吗？

Answer 1

作为替代解决方案：

我已经发布了Drombler FX的第一个早期版本，这是一个基于OSGi和Maven的JavaFX的新的富客户端平台。

它还附带了一个初始版本的对接框架，这似乎是你正在寻找的东西。

你可以在这里阅读更多关于Drombler FX的内容:http://puces-blog . blogspot . ch/2012/12/Drombler-FX-building-modular-Java FX . html

Answer 2

像这里的其他人一样，我建议使用 SplitPane 类来处理屏幕的拆分。下面是拆分窗格的示例（基于屏幕截图）。如果您不喜欢分隔条的显示，可以修改CSS以满足您的需求。

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.SplitPane;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;


public class FXSplitTabs extends Application{

    @Override
    public void start(Stage stage) throws Exception {
        stage.setTitle("SplitTabs");
        stage.setWidth(700);
        stage.setHeight(500);

        //Setup Center and Right
        TabPaneWrapper wrapper = new TabPaneWrapper(Orientation.HORIZONTAL, .9);
        TabPane centerPane = new TabPane();
        centerPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N"));

        TabPane rightPane = new TabPane();
        rightPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N"));
        SplitPane.setResizableWithParent(rightPane, false);
        wrapper.addNodes(centerPane, rightPane);

        //Add bottom
        TabPane bottomPane = new TabPane();
        bottomPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N"));
        TabPaneWrapper wrapperBottom = new TabPaneWrapper(Orientation.VERTICAL, .7);
        wrapperBottom.addNodes(wrapper.getNode(), bottomPane);

        //Add left
        TabPane leftPane = new TabPane();
        leftPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N"));
        TabPaneWrapper wrapperleft = new TabPaneWrapper(Orientation.HORIZONTAL, .1);
        wrapperleft.addNodes(leftPane, wrapperBottom.getNode());

        Scene myScene = new Scene(wrapperleft.getNode());
        stage.setScene(myScene);
        stage.sizeToScene();
        stage.show();
    }

    public Tab generateTab(String name){
        Tab result = new Tab(name);
        BorderPane content = new BorderPane();
        TextArea text = new TextArea();
        content.setCenter(text);
        result.setContent(content);
        return result;
    }

    public static void main(String[] args){
        FXSplitTabs.launch(args);
    }

    public static class TabPaneWrapper{
        SplitPane split;

        public TabPaneWrapper(Orientation o, double splitLocation){
            split = new SplitPane();

            //Change the CSS (uncomment if using an external css)
            //split.getStylesheets().add("test.css");

            split.setOrientation(o);
            split.setDividerPosition(0, splitLocation);
        }

        public void addNodes(final Node node1, final Node node2){
            //Add to the split pane
            split.getItems().addAll(node1, node2);
        }

        public Parent getNode(){
            return split;
        }
    }

}

如果您想使用CSS来更改分隔器的外观，请取消注释上面的CSS代码行，在基本包中创建一个文件test.css，并插入css规范（这里有一个将分隔器透明的示例）：

.split-pane-divider {
   -fx-border-color: transparent;
   -fx-background-color: transparent;
}