如何通过调整组件大小来绑定舞台大小调整？ [英] How to bind stage resizing with resizing of components?

问题描述

我有一个带FXML的JavaFX 2.0应用程序。
我希望在调整带有应用程序的窗口时调整组件（TextFields，ComboBoxes，layouts等）的大小。
所以......

I have a JavaFX 2.0 application with FXML. I want the components (TextFields, ComboBoxes, layouts, and so on) to be resized when a window with an application is resized. So...

• 因为它写在 JavaFX的Oracle文档，使用形状制作这样的东西，形状有一些特殊的属性： / li>
  

• As it is written on Oracle documentation for JavaFX, to make something like this with shapes, there are a few special properties to shapes:

使用JavaFX构建GUI应用程序时，您会注意到API中的某些类已经实现了属性。例如， javafx.scene.shape.Rectangle 类包含 arcHeight ， arcWidth的属性， height ， width ， x ，和 y 。对于这些属性中的每一个，将存在与先前描述的约定匹配的对应方法。例如， getArcHeight（）， setArcHeight（double）， arcHeightProperty（），它们一起表示（对于开发人员和工具）给定的属性存在。*

When building GUI applications with JavaFX, you will notice that certain classes in the API already implement properties. For example, the javafx.scene.shape.Rectangle class contains properties for arcHeight, arcWidth, height, width, x, and y. For each of these properties there will be corresponding methods that match the conventions previously described. For example, getArcHeight(), setArcHeight(double), arcHeightProperty(), which together indicate (to both developers and tools) that the given property exists.*

• 要将监听器添加到舞台，我必须执行以下操作：

  • To add listener to a stage I have to do something like:

       stage.resizableProperty().addListener(new ChangeListener<Boolean>(){
        @Override
        public void changed(ObservableValue<? extends Boolean> arg0, Boolean arg1, Boolean arg2){
            throw new UnsupportedOperationException("Not supported yet.");
        }
    
    });
    

  
  

  所以有两个问题：

  
  
  • 要进行一些绑定，我必须在控制器类中获得我的舞台。那么 - 我怎样才能在控制器类中获得一个阶段？
  
  
  • 看起来UI控件没有任何width\height属性，只能绑定到某个东西。或许我还没有找到它们。
  
  

  那么，我该如何解决我的问题呢？

  So, how can I solve my problem?

  UPD 。关于Scene Builder到Sergey Grinev：当我在我的组件上使用 Ctrl + K 时（告诉它占据其父组件的整个区域） - 一切正常。

  UPD. About Scene Builder to Sergey Grinev: When I use Ctrl+K on my component (tell it to occupy the whole area of its parent component) - everything is ok.

  但如果我想告诉我的组件占据某个区域的 50％怎么办？
  例如，我有一个带有两个VBox的标签。
  标签的宽度为 100px 。每个Vbox的宽度 50px 。 VBox1 x1 = 0 ， x2 = 50 ，VBox2 x1 = 50 ， x2 = 100 。
  然后我用JavaFX应用程序调整窗口大小。
  现在我有标签的宽度= 200px 。
  但是我的VBoxes宽度仍然= 50px ：VBox1 x1 = 0 ， x2 = 50 ，VBox2 > x1 = 150 ， x2 = 200 。
  我需要它们是VBox1 x1 = 0 且 x2 = 100 且VBox2 x1 = 100 且 x2 = 200 即可。
  其中x1和x2值是VBoxes角的坐标。

  But what if I want to tell my component to occupy 50% of an area? For exammple I have a tab with two VBoxes on it. The tab's width is 100px. The Vbox's widths are 50px for each. VBox1 has x1=0, and x2=50, and VBox2 has x1=50, and x2=100. Then I resize my window with JavaFX application. Now I have tab's Width = 200px. But my VBoxes widths are still = 50px: VBox1 has x1=0, and x2=50, and VBox2 has x1=150, and x2=200. And I need them to be VBox1 x1=0 and x2=100 and VBox2 x1=100 and x2=200. Where x1 and x2 values are the coordinates of VBoxes corners.

  在这种情况下，Scene Builder如何帮助我？

  How can Scene Builder help me in this situation?

  推荐答案

  另一个简单的选择是使用JavaFX Scene Builder（最近成为公共测试版： http://www.oracle.com/technetwork/java/javafx/tools/index.html ）

  Another easy option is to use JavaFX Scene Builder (recently become available as public beta: http://www.oracle.com/technetwork/java/javafx/tools/index.html)

  它允许通过拖动创建UI -drop和锚定UI元素到边框（通过锚点工具），所以他们用窗口边框移动/调整大小。

  It allows to create UI by drag-and-drop and anchor UI elements to borders (by anchor tool), so they move/resize with the window borders.

  更新：

  实现自动调整您可以使用的百分比布局 GridPane ， ColumnConstraint ：

  To achieve autoresizing percentage layout you can use GridPane with ColumnConstraint:

  public void start(Stage stage) {
  
      VBox box1 = new VBox(1);
      VBox box2 = new VBox(1);
  
      //random content
      RectangleBuilder builder = RectangleBuilder.create().width(20).height(20);
      box1.getChildren().addAll(builder.build(), builder.build(), builder.build());
      builder.fill(Color.RED);
      box2.getChildren().addAll(builder.build(), builder.build(), builder.build());
  
      //half by half screen
      GridPane grid = new GridPane();
      grid.addRow(0, box1, box2);
  
      ColumnConstraints halfConstraint = ColumnConstraintsBuilder.create().percentWidth(50).build();
      grid.getColumnConstraints().addAll(halfConstraint, halfConstraint);
  
      stage.setScene(new Scene(grid, 300, 250));
      stage.show();
  }
  

  这篇关于如何通过调整组件大小来绑定舞台大小调整？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！