JavaFX BorderPane布局（拉伸左右窗格）

Question

我正在使用BorderPane实现JavaFX中的布局。

假设BorderPane的maxPrefWidth设置为1000。左窗格中有一个按钮，右窗格中有一个按钮。在中心窗格中，还有一个大小未知的按钮。

• 如果：中间元素的宽度是500，那么左右节点的宽度应该是250。
• 如果：中间元素的宽度是600，那么左右节点的宽度应该是200。

有没有一种方法告诉左右窗格自动增长（水平）直到中心节点的被击中？

Answer 1

您的意图与borderpane的设计意图不一致。

引用javadoc：

顶部子级和底部子级的大小将调整到它们的首选高度，并扩展边框窗格的宽度。左右子节点的大小将调整为它们的首选宽度，并在顶部节点和底部节点之间延长长度。并且中心节点的大小将被调整以填充中间的可用空间。任何位置都可以为空。

• 中心扩展以占用所有额外空间。
• 顶部和底部采用最大宽度及其首选高度。
• 左右区域取其首选宽度和最大高度。

把中间想象成一个盒子，里面有一个强人推上、推下、推出。

这种逻辑对于很多商务应用来说往往相当得心应手。外部区域通常用于导航、面包屑、菜单栏、工具栏、状态栏等。内部区域则包含感兴趣的主要内容。给定这样的用法，只将必要的空间分配给外部区域，而将大部分空间分配给内部内容区域是有意义的。

package work.basil.example;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ToolBar;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

import java.time.ZonedDateTime;

/**
 * JavaFX App
 */
public class App extends Application
{

    @Override
    public void start ( Stage stage )
    {
        // Widgets
        ToolBar toolBar = new ToolBar();
        Button button = new Button( "Click Me" );
        toolBar.getItems().add( button );

        Button buttonLeft = new Button( "Left" );
        Button buttonRight = new Button( "Right" );

        HBox appContent = new HBox( new Button( "Bonjour le monde" ) );
        appContent.setStyle( "-fx-background-color: cornflowerblue;" );

        HBox statusBar = new HBox( new Label( "Status goes here. Now: " + ZonedDateTime.now() ) );

        // Arrange
        BorderPane borderPane = new BorderPane();
        borderPane.setTop( toolBar );
        borderPane.setLeft( buttonLeft );
        borderPane.setCenter( appContent );
        borderPane.setRight( buttonRight );
        borderPane.setBottom( statusBar );

        var scene = new Scene( borderPane , 1000 , 1000 );
        stage.setScene( scene );
        stage.show();
    }

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

您可能可以使用HBox来解决问题。为了实现最大程度的控制，您将需要投入一些时间来掌握GridPane。

你的问题还不完全清楚。如果您希望中心内容的宽度固定为500像素，而左右两个单元格的宽度是灵活的，可以按比例分配任何额外的空间，则使用GridPane同时将左单元格和右单元格的ColumnConstraints设置为Priority.Sompersony或Priority.Always。

下面是一个完整的示例应用程序。

我们在单行GridPane的每个单元格中放置一个按钮，每个按钮嵌套在彩色HBox中。颜色戏剧化的大小行为显示在这里。或者，您可以删除彩色的HBox，而不是调用GridPane.SetStyle（“-FX-Grid-Lines-Visible：true；”）来显示每个单元格周围的边框线。

package work.basil.example;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ToolBar;
import javafx.scene.layout.*;
import javafx.stage.Stage;

import java.time.ZonedDateTime;

/**
 * JavaFX App
 */
public class App extends Application
{

    @Override
    public void start ( Stage stage )
    {
        // Widgets
        Button buttonLeft = new Button( "Left" );
        HBox left = new HBox( buttonLeft );
        left.setStyle( "-fx-background-color: Salmon;" );

        Button buttonCenter = new Button( "Center" );
        HBox center = new HBox( buttonCenter );
        center.setStyle( "-fx-background-color: CornflowerBlue;" );

        Button buttonRight = new Button( "Right" );
        HBox right = new HBox( buttonRight );
        right.setStyle( "-fx-background-color: MediumSeaGreen;" );

        // GridPane
        GridPane gridPane = new GridPane();
        gridPane.addRow( 0 , left , center , right );  // Add these widgets in first row (annoying zero-based counting means index 0 is row 1).
        gridPane.setStyle( "-fx-grid-lines-visible: true ;" );  // Add lines to the edges of each cell (row/column) in the grid. Useful for learning and debugging. https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#gridpane

        // Grid constraints
        ColumnConstraints column1 = new ColumnConstraints();
        column1.setHgrow( Priority.SOMETIMES ); // Extra space alloted to this column.

        ColumnConstraints column2 = new ColumnConstraints( 500 ); // Fixed width of 500 pixels.

        ColumnConstraints column3 = new ColumnConstraints();
        column3.setHgrow( Priority.SOMETIMES );// Extra space alloted to this column.

        gridPane.getColumnConstraints().addAll( column1 , column2 , column3 ); // first column gets any extra width

        // Render
        var scene = new Scene( gridPane , 1000 , 150 );
        stage.setScene( scene );
        stage.setTitle( "Example of JavaFX GridPane, by Basil Bourque" );
        stage.show();
    }


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

app运行截图。注意左边和右边是如何获得每个250像素的剩余空间的。我们将窗口(stage)设置为1,000像素，并将中心件的宽度固定为500像素。这就剩下500个像素需要分配。左右两个单元格都被设置为相同的优先级，因此它们在它们之间均匀地分配空间：每个单元格500/2=250像素。

如果用户将窗口的宽度缩小到600像素，那么左右单元格将各为50像素:600-500=100，100/2=50像素。