如何将舞台大小调整与组件大小调整绑定在一起? [英] How to bind stage resizing with resizing of components?

问题描述

我有一个带有 FXML 的 JavaFX 2.0 应用程序.我希望在调整带有应用程序的窗口大小时调整组件(文本字段、组合框、布局等)的大小.所以...

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 文档中所写的那样，要使用形状制作类似的东西，形状有一些特殊的属性:

• 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、<代码>宽度、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 控件没有任何宽度高度属性，可以绑定到某些东西.或者我还没有找到它们.

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

  So, how can I solve my problem?

  UPD.关于 Sergey Grinev 的 Scene Builder: 当我在我的组件上使用 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 的选项卡.标签的宽度为 100 像素.每个 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 并将 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屋！