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

时间:2013-03-05 12:26:58

标签: java css javafx-2 fxml pane

我有一个只有一个FXML文件的JavaFX应用程序。在这个文件中,我有一个AnchorPane,里面有一个StackPane。这是截图:

my panel inside panel application

当我启动此应用程序时,我想使用AnchorPane自动调整StackPane的大小。从而; StackPane将自动获得当前可用的宽度和高度。在我调整应用程序大小的那一刻,AnchorPane正在自动调整大小,但StackPane保持固定大小。

如何自动调整StackPane的大小并使其在父面板中完全拉伸?

我的代码

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%;
}

6 个答案:

答案 0 :(得分:74)

经过几个小时的搜索和测试,在发布问题后终于得到了它!

您可以使用值为“0.0”的“ AnchorPane.topAnchor,AnchorPane.bottomAnchor,AnchorPane.leftAnchor,AnchorPane.rightAnchor ”fxml命令进行拟合/拉伸/将子元素放在AnchorPane中。因此,这些命令告诉子元素在调整大小时跟随其父元素。

我的更新代码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>

结果如下:

enter image description here

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

答案 1 :(得分:14)

我在SceneBuilder中设计了一个GUI,试图让主容器适应窗口大小。它应该总是100%宽。

您可以在SceneBuilder中设置这些值:

AnchorPane Constraints in SceneBuilder

切换虚线/红线实际上只是添加/删除Korki在其解决方案中发布的属性(AnchorPane.topAnchor等)。

答案 2 :(得分:9)

另见here

@FXML
private void mnuUserLevel_onClick(ActionEvent event) {
    FXMLLoader loader = new FXMLLoader(getClass().getResource("DBedit.fxml"));
    loader.setController(new DBeditEntityUserlevel());

    try {
           Node n = (Node)loader.load();
           AnchorPane.setTopAnchor(n, 0.0);
           AnchorPane.setRightAnchor(n, 0.0);
           AnchorPane.setLeftAnchor(n, 0.0);
           AnchorPane.setBottomAnchor(n, 0.0);
           mainContent.getChildren().setAll(n);
    } catch (IOException e){
           System.out.println(e.getMessage());
    }
}

方案是将子fxml加载到父AnchorPane中。 要使孩子伸展符合其父母使用AnChorPane.setxxxAnchor命令。

答案 3 :(得分:1)

无需放弃。

只需选择窗格右键单击,然后选择适合父级

它会自动调整窗格大小以锚定窗格大小。

答案 4 :(得分:0)

这很简单,因为您使用的是 FXMLBuilder

只需按照以下简单步骤操作:

  1. 将FXML文件打开到FXMLBuilder。
  2. 选择堆栈窗格。
  3. 打开布局选项卡[FXMLBuilder的左侧选项卡]。
  4. 在舞台调整大小期间设置您想要计算窗格大小的边值,如TOP,LEFT,RIGHT,BOTTOM。

答案 5 :(得分:0)

如果您正在使用Scene Builder,您将在右侧看到一个手风琴面板,通常有三个选项(&#34;属性&#34;,&#34;布局&#34;&#34;&#34;代码&# 34)。在第二个(&#34; Layout&#34;)中,您将看到一个名为&#34; [parent layout] Constraints&#34; (在你的情况下&#34; AnchorPane Constrainsts&#34;)。

你应该把&#34; 0&#34;在元素的四边,代表父布局。