javaFX-使用主应用程序窗口调整textarea/其他UI控件的大小

Question

在我的JavaFX应用程序中，我需要更新它来处理窗口大小调整。我想做的是，当窗口变大时，保持所有东西都对齐，只是让纹理与窗口成比例，当它变小时类似。

我将设置一个最小和最大高度，以适应右手边的按钮（随着它变小，减小一点间距）。

我发现AnchorPane不是最好的选择，我希望我能得到一个更好的方法的一点指导。我使用的文本区域是自定义的，扩展了StyledTextArea（RichTextFX API）。

最后一个规范是，我希望文本下的文本字段和按钮与文本区域对齐，我认为窗格使文本字段和按钮之间的距离将是一个麻烦的方法（我计划不使其大小可调）。

图片供参考：文字app图片

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

<?import java.lang.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>
<?scenebuilder-stylesheet ../application.css?>

<AnchorPane fx:id="leftPane" minWidth="-1.0" prefHeight="582.0" prefWidth="855.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="application.TextProController">
  <!-- TODO Add Nodes -->
  <children>
    <VBox alignment="CENTER_LEFT" layoutX="649.0" layoutY="0.0" prefHeight="582.0" prefWidth="205.0" spacing="55.0" styleClass="right-split">
      <children>
        <Button mnemonicParsing="false" onAction="#handleLoadText" prefHeight="21.0" prefWidth="160.0" text="Load Text">
          <font>
            <Font size="14.0" fx:id="x1" />
          </font>
        </Button>
        <Button font="$x1" mnemonicParsing="false" onAction="#handleFleschIndex" prefWidth="160.0" text="Flesch Index" />
        <Button font="$x1" mnemonicParsing="false" onAction="#handleEditDistance" prefHeight="21.0" prefWidth="160.0" text="Edit Distance" />
        <Button mnemonicParsing="false" onAction="#handleMarkovText" prefHeight="25.0" prefWidth="160.0" text="Generate Markov Text">
          <font>
            <Font size="13.5" />
          </font>
        </Button>
        <CheckBox fx:id="spellingBox" font="$x1" mnemonicParsing="false" onAction="#handleSpelling" text="Spelling Suggestions" />
        <CheckBox fx:id="autocompleteBox" font="$x1" mnemonicParsing="false" onAction="#handleAutoComplete" text="AutoComplete" />
      </children>
      <padding>
        <Insets bottom="20.0" left="5.0" />
      </padding>
    </VBox>
    <AnchorPane layoutX="0.0" layoutY="0.0" minHeight="0.0" minWidth="0.0" prefHeight="582.0" prefWidth="650.0" styleClass="left-split">
      <children>
        <HBox alignment="CENTER_LEFT" layoutX="0.0" layoutY="525.0" prefHeight="32.0" prefWidth="642.0" spacing="15.0">
          <children>
            <TextField fx:id="fleschField" prefWidth="72.0" />
            <Label text="Flesch Index">
              <font>
                <Font name="System Bold" size="14.0" />
              </font>
            </Label>
            <Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="32.0" prefWidth="322.0" />
            <Button font="$x1" mnemonicParsing="false" onAction="#handleClear" text="Clear" />
          </children>
          <padding>
            <Insets left="39.0" />
          </padding>
        </HBox>
      </children>
    </AnchorPane>
  </children>
</AnchorPane>

import java.io.IOException;
import java.util.List;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Pos;
import javafx.stage.Modality;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;





    public class MainApp extends Application {
        private Stage primaryStage;
        private BorderPane rootLayout;

        private LaunchClass launch;
        spelling.WordPath wp;
        textgen.MarkovTextGenerator mtg;



        // called at start of application
        @Override
        public void start(Stage primaryStage) {

            this.primaryStage = primaryStage;

            this.primaryStage.setTitle("TextProApp");
            //primaryStage.setResizable(false);

            try {
                // Load root layout from fxml
                FXMLLoader loader = new FXMLLoader(MainApp.class.getResource("view/RootLayout.fxml"));
                rootLayout = (BorderPane) loader.load();
                Scene scene = new Scene(rootLayout);
                primaryStage.setScene(scene);
                primaryStage.show();

            } catch(Exception e) {
                e.printStackTrace();
            }

            launch = new LaunchClass();

            showTextProApp();
        }

        /**
         * Shows the main TextApplication scene
         */
        public void showTextProApp() {
            try {
                // Load the fxml file and set into the center of the main layout
                FXMLLoader loader = new FXMLLoader(getClass().getResource("view/TextAppLayout.fxml"));

                AnchorPane textProPage = (AnchorPane) loader.load();
                rootLayout.setCenter(textProPage);

                // Connect controller and main app
                TextProController controller = loader.getController();
                controller.setMainApp(this);

            } catch (IOException e) {
                // Exception gets thrown if the fxml file could not be loaded
                e.printStackTrace();
            }
        }

    }

import javafx.concurrent.Task;
import javafx.fxml.FXML;
import javafx.scene.control.CheckBox;
import javafx.scene.control.TextField;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class TextProController {

    private MainApp mainApp;

    // UI Controls
    private AutoSpellingTextArea textBox;

    @FXML
    private AnchorPane leftPane;

    @FXML
    private TextField fleschField;

    @FXML
    private CheckBox autocompleteBox;

    @FXML 
    private CheckBox spellingBox;

    @FXML
    private VBox rightBox;



     /**
     * Initializes the controller class. This method is automatically called
     * after the fxml file has been loaded.
     */
    @FXML
    private void initialize() {
        // make field displaying flesch score read-only
        fleschField.setEditable(false);

        // instantiate and add custom text area
        textBox = new AutoSpellingTextArea();
        textBox.setPrefSize(570, 492);
        textBox.setWrapText(true);
        textBox.setLayoutX(40);
        textBox.setLayoutY(25); 
        leftPane.getChildren().add(textBox);


    }




    /**
     * Is called by the main application to give a reference back to itself.
     * Also give reference to AutoSpellingTextArea
     * 
     * 
     * @param mainApp
     */
    public void setMainApp(MainApp mainApp) {
        this.mainApp = mainApp;
        textBox.setMainApp(mainApp);
        textBox.setReferences();
    }
}

Answer 1

我不知道我是否理解您的问题，如果您想调整窗格的大小，您可以使用hgrow属性，该属性控制水平增长，同时使用Anchorpane.left/rightanchor，该属性将窗格的左/右侧以所需的距离修复为父侧。试试这个基本的布局。您可以根据您的代码对其进行调整。

<HBox maxHeight="1080.0" maxWidth="1980.0" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
 <children>
  <VBox prefHeight="400.0" prefWidth="402.0" AnchorPane.leftAnchor="0.0" HBox.hgrow="ALWAYS">
     <children>
        <TextArea prefHeight="341.0" prefWidth="368.0" />
        <HBox prefHeight="100.0" prefWidth="200.0" />
     </children>
  </VBox>
  <VBox layoutX="402.0" maxWidth="200.0" prefHeight="400.0" prefWidth="200.0" AnchorPane.rightAnchor="0.0" HBox.hgrow="NEVER">
     <children>
        <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="114.0" text="Button">
           <VBox.margin>
              <Insets left="50.0" top="50.0" />
           </VBox.margin>
        </Button>
        <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="117.0" text="Button">
           <VBox.margin>
              <Insets left="50.0" top="50.0" />
           </VBox.margin>
        </Button>
        <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="117.0" text="Button">
           <VBox.margin>
              <Insets left="50.0" top="50.0" />
           </VBox.margin>
        </Button>
     </children>
  </VBox>
 </children>
</HBox>