JavaFX中的动态/即时调整大小

binding resize javafx

15168 观看

4回复

54 作者的声誉

如何创建(立即)动态调整大小的JavaFX应用程序?现在我编写了一个动态调整大小的简单应用程序,但布局更改直到拖动时释放鼠标按钮后才会显示。我希望在此按钮发布之前立即看到结果/布局更改。

我假设这是通过用反向绑定正确的值/控件来完成的......任何帮助都会很棒!


编辑:

这就是我让事情发生的原因(感谢Praeus)。正如他所说,我必须将我的顶级容器/布局宽度和高度绑定到scene.width和scene.height。 -

var scene:场景;

Stage {
title:“Application title”
scene:scene = Scene {
content:[
XMigLayout {
width:bind scene.width ;
height:绑定scene.height;
...}]}}

作者: Greg 的来源 发布者: 2010 年 8 月 2 日

回应 (4)


1

907 作者的声誉

是的,我认为你的选择是正确的 - 绑定将是你做你想做的事情的明显方式。你也可以看一下触发器。

如果您还没有,请阅读1.3布局指南作为起点

布局容器自动管理其内容节点的动态布局行为。但是,通常还希望使用JavaFX Script的绑定机制来建立布局的某些动态方面。例如,您可以将HBox容器的宽度和高度绑定到Scene高度和宽度,以便每当Scene调整大小时,HBox容器也会调整大小。

它也可能值得阅读JavaFX布局大师艾米福勒的文章和博客文章

作者: Matthew Hegarty 发布者: 03.08.2010 06:43

3

196 作者的声誉

决定

实际上,如果您已经将所有内容组织到布局中,那么您可以将顶级布局容器的宽度和高度绑定到scene.width和scene.height。我不认为顶级布局控件是由任何东西管理的,因此您可以安全地直接设置布局控件的宽度和高度。如果这不起作用,那么您可能成功绑定layoutInfo的宽度和高度。

理想情况下,您希望在诉诸绑定之前使用布局管理。过度绑定可能是性能问题,并且在调整大小时可能导致重绘速度变慢。在这种情况下,您可以只使用顶级容器的绑定,然后顶级容器的所有子级都应相应地调整大小。至少我认为这应该有效。

作者: Praeus 发布者: 03.08.2010 08:18

4

456 作者的声誉

绑定在JavaFX 2.0版本中有所不同。Angela Caicedo的视频演示了如何很好地绑定属性。必须将变量设置为ObservableNumberValue,并使用其get和set方法。在设置完成后,您可以将其绑定到组件的属性。

DoubleProperty x = new SimpleDoubleProperty(0);
x.set(1);
x.getValue();
imageView.xProperty().bind(x);
anchorPane.heightProperty().add(x);

Eric Bruno的帖子是另一种方式。

scene.widthProperty().addListener( 
    new ChangeListener() {
        public void changed(ObservableValue observable, 
                            Object oldValue, Object newValue) {
            Double width = (Double)newValue;
            tbl.setPrefWidth(width);
        }
    });

scene.heightProperty().addListener(
    new ChangeListener() {
        public void changed(ObservableValue observable, 
                            Object oldValue, Object newValue) {
            Double height = (Double)newValue;
            tbl.setPrefHeight(height);
        }
    });

编辑:添加了另一个更合适的答案以及我找到它的位置。

作者: Jeremy 发布者: 27.02.2012 10:07

0

114 作者的声誉

这就是我最终要做的事情,以便调整我喜欢的方式。必须有一个更简单的方法,但我肯定不知道。

我的主要方法加载我的控制器和场景然后调用我的控制器init()方法

        FXMLLoader loader = new FXMLLoader(getClass().getResource("sample.fxml"));
    Parent root = (Parent) loader.load();
    primaryStage.setTitle("Robot Interface");
    primaryStage.setScene(new Scene(root));
    primaryStage.show();
    Controller controller = (Controller)loader.getController();
    controller.init();

我正在使用一个动态调整大小的gridpane,因为整个舞台由用户调整大小,因此它始终适合。这是因为它的百分比大小。这比使用绑定IMO更容易以fxml方式完成。

<GridPane fx:id="gridPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="700.0" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">

  <columnConstraints>
    <ColumnConstraints percentWidth="50" />
    <ColumnConstraints percentWidth="50" />
  </columnConstraints>
  <rowConstraints>
    <RowConstraints percentHeight="35" />
    <RowConstraints percentHeight="35" />
    <RowConstraints percentHeight="35" />
  </rowConstraints>
   <children>

      <TextArea fx:id="textArea_Console" prefHeight="200.0" prefWidth="200.0" promptText="console/reponse" GridPane.columnIndex="1" GridPane.rowIndex="2" />

      <!-- <MediaView fx:id="mediaView_Images" fitHeight="225.0" fitWidth="225.0" GridPane.halignment="LEFT" GridPane.valignment="BOTTOM" /> -->


      <TextArea fx:id="textArea_RoboAvail" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="121.0" prefWidth="123.0" promptText="robots available" GridPane.columnIndex="1" GridPane.halignment="RIGHT" GridPane.valignment="TOP" />

      <TextArea fx:id="textArea_SensorData" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="249.0" prefWidth="106.0" promptText="sensor data" GridPane.halignment="RIGHT" GridPane.valignment="TOP" />

      <TextArea fx:id="textArea_Scripting" prefHeight="200.0" prefWidth="200.0" promptText="Scripting" GridPane.columnIndex="1" GridPane.rowIndex="1" />

      <Label text="Currently Viewing" GridPane.halignment="LEFT" GridPane.valignment="TOP" />

      <TextArea maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="250.0" prefWidth="100.0" promptText="to do list" GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.valignment="TOP" />

      <ImageView fx:id="imageView_Images"  fitHeight="233.0" fitWidth="225.0" pickOnBounds="true" preserveRatio="true" GridPane.halignment="LEFT" GridPane.valignment="TOP" />

      <Label fx:id="label_CheatSheet" text="Label" GridPane.halignment="LEFT" GridPane.rowIndex="2" GridPane.valignment="BOTTOM" />




   </children>

记住我的控制器类如何调用其init()方法。好的init()调用setupUI,我得到我的高度和宽度,然后创建高度和宽度变化的回调。那些改变我的类宽变量mHeight和mWidth;

  private void setupUI()
{
    imageView_Images.setImage( new Image("file:///C:\\Users\\administration\\IdeaProjects\\Robot User Interface\\Media\\filler.jpeg"));



   mHeight = gridPane.getHeight();
   mWidth = gridPane.getWidth();

   //for initial startup sizing
    dynamicRsize();


    //callbacks to detect changes for sizing
    gridPane.widthProperty().addListener(new ChangeListener<Number>() {
        @Override
        public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
            mWidth = newValue.doubleValue();
            dynamicRsize();
        }
    });

    gridPane.heightProperty().addListener(new ChangeListener<Number>() {
        @Override
        public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
            mHeight = newValue.doubleValue();
            dynamicRsize();
        }
    });


    setup_TextArea_Scriptng();
    setup_Label_CheatSheet();

}

最后我可以调用dynamicResize()来调整gridpane中的每个对象,作为行宽度或高度的百分比

  private void dynamicRsize()
{
    //two columns 50/50
    //three rows 35/35/30

    double columnType1 = mWidth/2;
    double rowType1 = mHeight * .35;
    double rowType2 = mHeight * .3;

    //node 1
    imageView_Images.setFitWidth(columnType1 * .75);
    textArea_SensorData.setPrefWidth(columnType1 * .25);

   //node 2

    //node 3

    //node 4

    //node 5

    //node 6







}
作者: cagney 发布者: 05.10.2018 08:23
32x32