且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

JavaFX面板内面板自动调整大小

更新时间:2022-11-02 14:06:50



您可以使用 AnchorPane.topAnchor,AnchorPane.bottomAnchor,AnchorPane.leftAnchor,AnchorPane.rightAnchor fxml命令的值为0.0以适应/拉伸/对齐AnchorPane中的子元素。因此,这些命令告诉子元素在调整大小时跟随其父级。



我更新的代码Main.fxml

 <?xml version =1.0encoding =UTF-8?> 

<?import java.lang。*?>
<?import java.util。*?>
<?import javafx.scene。*?>
<?import javafx.scene.control。*?>
<?import javafx.scene.layout。*?>

< AnchorPane fx:id =anchorPanexmlns:fx =http://javafx.com/fxmlfx:controller =app.MainController>
<! - < StackPane fx:id =stackPane>< / StackPane> <! - 替换为 - >
< StackPane fx:id =stackPaneAnchorPane.topAnchor =0.0AnchorPane.bottomAnchor =0.0AnchorPane.leftAnchor =0.0AnchorPane.rightAnchor =0.0>< / StackPane&
< / AnchorPane>

Hier是结果:



img src =https://i.stack.imgur.com/7ktnh.pngalt =enter image description here>



对于api文档: http://docs.oracle.com/javafx/2/ api / javafx / scene / layout / AnchorPane.html


I have a JavaFX application which has only one FXML file. In this file I have one AnchorPane which has a StackPane inside it. Here is the screenshot:

When I start this application, I want to resize StackPane automatically with the AnchorPane. Thus; StackPane will get the current avaliable width and height automatically. At the moment when I resize the application, AnchorPane is being resized automatically but StackPane stays as his fixed size.

How can I resize the StackPane automatically and make it fully stretched inside its parent panel?

My Code

Main.java

package app;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

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

  @Override
  public void start(Stage stage) throws Exception {
      Parent root = FXMLLoader.load(getClass().getResource("Main.fxml"));
      Scene scene = new Scene(root,800,600);
      scene.getStylesheets().add(this.getClass().getResource("/app/style1.css").toExternalForm());
      stage.setScene(scene);
      stage.show();
  }
}

MainController.java

package app;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.StackPane;

public class MainController implements Initializable {

   @FXML
   private AnchorPane anchorPane;
   @FXML
   private StackPane stackPane;

   @Override
   public void initialize(URL url, ResourceBundle rb) {
     stackPane.setPrefSize(anchorPane.getPrefWidth(), anchorPane.getPrefHeight()); //didn't work
   }    
}

Main.fxml

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane fx:id="anchorPane" xmlns:fx="http://javafx.com/fxml" fx:controller="app.MainController">
    <StackPane fx:id="stackPane" ></StackPane>
</AnchorPane>

style1.css

#anchorPane { 
    -fx-border-width: 2px;
    -fx-border-color: chartreuse;
}
#stackPane {
    -fx-border-width: 2px;
    -fx-border-color: red;

    /* didn't work */
   -fx-hgap: 100%;
   -fx-vgap: 100%;
}

After hours of searching and testing finally got it just after posting the question!

You can use the "AnchorPane.topAnchor, AnchorPane.bottomAnchor, AnchorPane.leftAnchor, AnchorPane.rightAnchor" fxml commands with the value "0.0" to fit/stretch/align the child elements inside a AnchorPane. So, these commands tell to child element to follow its parent while resizing.

My updated code Main.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane fx:id="anchorPane" xmlns:fx="http://javafx.com/fxml" fx:controller="app.MainController">
    <!--<StackPane fx:id="stackPane" ></StackPane>--> <!-- replace with the following -->
    <StackPane fx:id="stackPane" AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" ></StackPane>
</AnchorPane>

Hier is the result:

For api documentation: http://docs.oracle.com/javafx/2/api/javafx/scene/layout/AnchorPane.html