2013-03-05 15 views
41

Mam aplikację JavaFX, która ma tylko jeden plik FXML. W tym pliku mam jeden AnchorPane, który ma w sobie StackPane. Oto zrzut ekranu:Panel JavaFX wewnątrz panelu Automatyczne zmienianie rozmiaru

my panel inside panel application

Kiedy zacznę tę aplikację, chcę zmienić rozmiar StackPane automatycznie z AnchorPane. A zatem; StackPane automatycznie dostarczy aktualną dostępną szerokość i wysokość. W momencie zmiany rozmiaru aplikacji rozmiar AnchorPane zmienia się automatycznie, ale StackPane pozostaje na swoim stałym rozmiarze.

Jak mogę automatycznie zmienić rozmiar stosu stosów i czy jest on całkowicie rozciągnięty w panelu nadrzędnym?

mój kod

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

Odpowiedz

62

Po godzinach poszukiwań i badań w końcu go zaraz po zaksięgowaniu pytanie!

Można użyć "AnchorPane.topAnchor, AnchorPane.bottomAnchor, AnchorPane.leftAnchor, AnchorPane.rightAnchor" Polecenia fxml o wartości "0.0", aby dopasować/odcinek/wyrównać elementy potomne wewnątrz AnchorPane. Komendy te informują element podrzędny, aby podążał za rodzica podczas zmiany rozmiaru.

Mój kod aktualizowane 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> 

Tutaj jest wynikiem:

enter image description here

Dla dokumentacji API: http://docs.oracle.com/javafx/2/api/javafx/scene/layout/AnchorPane.html

+2

Czy możesz przyjąć tę odpowiedź. Pozwolą nam wiedzieć, że istnieje rozwiązanie tego problemu. Dobre odkrycia, szukał tego. – blo0p3r

+2

@ blo0p3r Będę, ale na razie system mówi "Możesz zaakceptować własną odpowiedź w ciągu 2 dni";) Mam nadzieję, że pojawi się więcej innych sugestii. –

+0

Witam. po dodaniu przycisku. na przykład. \t \t \t przycisk fx "0.0" id = "button" layoutX = "172,0" layoutY = "195,0" onAction = "# ingresarLogin" prefHeight = "35.0" prefWidth = "87.0" text = "Ingresar" /> \t to jest poprawne? thanksssss –

12

byłem projektowania GUI w SceneBuilder, starając się spraw, aby główny pojemnik dostosował się do rozmiaru okna. Zawsze powinno być 100% szerokości.

To gdzie można ustawić te wartości w SceneBuilder:

AnchorPane Constraints in SceneBuilder

Przełączanie przerywane/czerwone linie rzeczywiście będzie po prostu dodaj/usuń atrybuty korki zamieszczone w jego roztworze (AnchorPane.topAnchor etc.).

+0

Jaki kod FXML to generuje? Chciałbym to zobaczyć. –

+0

Cóż, możesz zacząć SceneBuilder i przekonać się samemu ... w dosłownie mniej niż 20 sekund ... – specializt

6

zobaczyć również 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()); 
    } 
} 

Scenariusz jest załadować fxml dziecko do macierzystej AnchorPane. Aby sprawić, aby dziecko rozciągało się zgodnie z jego rodzicem, należy użyć polecenia AnChorPane.setxxxAnchor.

0

Jest to dość proste, ponieważ używasz modelu FXMLBuilder.

Wystarczy wykonać te proste czynności:

  1. Otwórz plik FXML do FXMLBuilder.
  2. Wybierz okienko stosu.
  3. Otwórz kartę Układ [lewa zakładka FXMLBuilder].
  4. Ustaw wartość boków, według których chcesz obliczyć rozmiar panelu podczas zmiany rozmiaru sceny, jak GÓRA, LEWO, PRAWO, DÓŁ.
0

Jeśli korzystasz z Scene Builder, po prawej stronie zobaczysz panel akordeonowy, który zwykle ma trzy opcje ("Właściwości", "Układ" i "Kod"). W drugim ("Layout") zobaczysz opcję o nazwie "[Layer nadrzędny] Constraints" (w Twoim przypadku "AnchorPane Constrainsts").

Powinieneś umieścić "0" na czterech bokach elementu, który reprezentuje układ rodzica.

0

Nie trzeba cedować.

tylko wybierz okienko, prawym przyciskiem następnie wybierz Dopasuj do rodzica.

Automatycznie zmieni rozmiar panelu, aby zakotwiczyć rozmiar panelu.

Powiązane problemy