问题
I have this: A borderPane with left node a Vbox (green arrow) with button inside(orange arrow).
What I can not do is find a way to change the dimensions of Vbox(green segment) and then for the button (orange segment) in accordance with the size of the window. (when the user plays with the window size)
I prefer to find a way to set the parameters into my css files, or as a last resort inside my fxml.
.css file:
.left-borderPane{ /*this is style class for Vbox */
/*something so similar: */
-fx-min-width:30% ;
-fx-max-width:30% ;
}
.icon-settings{/*this is style class for buttons*/
-fx-shape:"M72.5,65.9 M90,50c0,8.6-2.5,16.9-7.3,24.1c-0.4,0.6-1,0.9-1.7,0.9c-0.4,0-0.8-0.1-1.1-0.3c-0.9-0.6-1.2-1.8-0.6-2.50zM69.6,50c0,3.2-0.6,6.2-1.8,9.1c-0.3,0.8-1.1,1.2-1.8,1.2c-0.2,0-0.5,0-0.8-0.1c-1-0.4c0.6-0.6,1.4-0.7,2.2-0.4C57.5,14.5,58,15.2,58,16z M35,37H14v26h21V37z M54,20.8l-15,15v28.3l15,15V20.8z";
/*something so similar: */
-fx-min-width:80% ;
-fx-max-width:80% ;
}
回答1:
Sizing using GridPane percentWidth/percentHeight column and row constraints
You mention that you would like to do this in CSS or FXML. CSS in JavaFX isn't going to do this, it is mainly for style and not layout. FXML is designed to accomplish most of the layout work (it's best used in conjunction with Gluon SceneBuilder).
Here is an attempt to design your layout using just FXML. The main container used is a GridPane. To set the size of grid pane regions based upon a percentage of the available area, ColumnConstraints and RowConstraints are used with a percentWidth and percentHeight. The min/max/pref size of the enclosed controls (in this case a button), are set so that they will fill the available region.
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="200.0"
prefWidth="300.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.65">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" percentWidth="5.0"/>
<ColumnConstraints hgrow="SOMETIMES" percentWidth="30.0"/>
<ColumnConstraints hgrow="SOMETIMES" percentWidth="5.0"/>
<ColumnConstraints hgrow="SOMETIMES"/>
</columnConstraints>
<rowConstraints>
<RowConstraints percentHeight="5.0" vgrow="SOMETIMES"/>
<RowConstraints vgrow="SOMETIMES"/>
<RowConstraints percentHeight="5.0" vgrow="SOMETIMES"/>
</rowConstraints>
<children>
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0"
mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.halignment="CENTER"
GridPane.rowIndex="1" GridPane.valignment="CENTER"/>
</children>
</GridPane>
Information from other similar questions
There are a bunch of ways to change element size dynamically, some of which are discussed in the following posts. It may be worthwhile reviewing different techniques to determine which is the best fit for your situation.
- javafx automatic resizing and button padding
- JavaFX fullscreen - resizing elements based upon screen size
- JavaFX correct scaling
- Bind Font Size in JavaFX?
回答2:
Unlike in the web, i.e. HTML+CSS, JavaFX+CSS does NOT do positioning and sizing from the CSS. You will have to bind the size of the left panel to the size of the window (through a simple calculation most probably) and the the size of the button to the size of the panel (again through a simple calculation). The following code demonstrates the principle:
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class BoundSizes extends Application {
@Override
public void start(Stage primaryStage) {
BorderPane borderPane = new BorderPane();
VBox vbox = new VBox();
Button b = new Button("THE BUTTON");
vbox.getChildren().add(b);
borderPane.setLeft(vbox);
// the VBox stays e.g. 1/3 of the window width
vbox.prefWidthProperty().bind(Bindings.divide(primaryStage.widthProperty(), 3.0));
// painting it to be obvious
vbox.setStyle("-fx-background-color: black");
// the button stays e.g. at half the width of the VBox
b.prefWidthProperty().bind(Bindings.divide(vbox.widthProperty(), 2.0));
Scene scene = new Scene(borderPane, 300, 275);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String arg[]) {
launch(arg);
}
}
回答3:
This work for me
hbox.prefHeightProperty().bind(Bindings.divide(primaryStage.heightProperty(), 12.0));
hbox.prefWidthProperty().bind(Bindings.divide(primaryStage.widthProperty(), 12.0));
button.prefWidthProperty().bind(Bindings.divide(primaryStage.widthProperty(), 10.0));
button.prefHeightProperty().bind(Bindings.divide(primaryStage.heightProperty(), 12.0));
来源:https://stackoverflow.com/questions/43236082/javafx-elements-change-the-size-dynamically-in-relationship-to-the-size-of-the