Question

我使用GridPane作为舞台的主场景，布局完全在FXML文件中定义。我想在窗口的整个侧面（即遍布我的GridPane的所有行）都有一个按钮，如下所示：

但是我无法让它发挥作用。更准确地说，按钮似乎不会在整个高度上拉伸。我为按钮设置了GridPane.vgrow=ALWAYS，maxHeight="Infinity"和GridPane.fillHeight=true，但按钮仍然与文本中的文本一样长，并放置在侧面的中心。

如何让按钮伸展整个GridPane？正如开头所提到的，我当然正确地设置了GridPane.rowSpan。并不是按钮没有正确放置在GridPane中，只是它不会在整个可用的垂直空间内自行拉伸。

请注意我更喜欢通过FXML而不是Java代码的解决方案，因为我不希望在我的类中有这样的布局代码。

谢谢！

Answer 1

最简单的方法是使用css。请按照以下步骤操作：

要旋转按钮中使用的标签，请使用：

.button > .text {
    -fx-rotate: 90;
}

要扩展按钮以使用整个高度，请使用Infinity作为首选高度：

.button {
    -fx-pref-height: Infinity;
    -fx-pref-width: 75;
}

<强> MCVE

以下是一个示例，其中显示了如何使用上述代码：

FXML

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>

<GridPane styleClass="root" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
   <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints minHeight="50.0" vgrow="SOMETIMES" />
      <RowConstraints minHeight="50.0" prefHeight="30.0" vgrow="SOMETIMES" />
      <RowConstraints minHeight="50.0" prefHeight="30.0" vgrow="SOMETIMES" />
   </rowConstraints>
   <children>
      <Button mnemonicParsing="false" text="Button" GridPane.rowSpan="3" />
      <VBox style="-fx-background-color: white;" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS" />
      <VBox style="-fx-background-color: white;" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" />
      <VBox style="-fx-background-color: white;" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" />
   </children>
</GridPane>

CSS

root是分配给GridPane的样式类。

.root {
    -fx-background-color: grey;
    -fx-hgap: 5;
    -fx-vgap: 5;
    -fx-padding: 5;
}

.root > .button > .text {
    -fx-rotate: 90;
}

.button {
    -fx-pref-height: Infinity;
    -fx-pref-width: 75;
}

主要

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 {

    @Override
    public void start(final Stage primaryStage) throws Exception {

        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("/grid.fxml"));
        final Parent root = fxmlLoader.load();
        final Scene scene = new Scene(root, 685, 411);
        scene.getStylesheets().add(getClass().getResource("/grid.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

输出

Answer 2

这是一个很好的问题。很难想象这样做但是在这里场景构建者做的结果和FXML文件是这样做的：

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>

<GridPane hgap="20.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" vgap="5.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
  <columnConstraints>
    <ColumnConstraints halignment="CENTER" hgrow="NEVER" maxWidth="100.0" minWidth="50.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="NEVER" maxWidth="1.7976931348623157E308" minWidth="500.0" prefWidth="500.0" />
  </columnConstraints>
  <rowConstraints>
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
  </rowConstraints>
   <children>
      <Label text="Label" GridPane.columnIndex="1" />
      <Label text="Label" GridPane.columnIndex="1" GridPane.rowIndex="1" />
      <Label text="Label" GridPane.columnIndex="1" GridPane.rowIndex="2" />
      <AnchorPane GridPane.hgrow="ALWAYS" GridPane.rowSpan="3" GridPane.vgrow="ALWAYS">
         <children>
            <Button contentDisplay="TOP" mnemonicParsing="false" textOverrun="CLIP" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
               <font>
                  <Font size="11.0" />
               </font>
               <graphic>
                  <Label minWidth="-Infinity" rotate="90.0" text="Some Text">
                     <font>
                        <Font size="15.0" />
                     </font>
                  </Label>
               </graphic>
            </Button>
         </children>
      </AnchorPane>
   </children>
</GridPane>

我在这里做了什么：我把Gridepane作为其他控制器的父级，它包含2列和3行例如，然后我放置锚窗格和索引（0,0）并使列跨度保留并将其他组件放在其他行中，然后我但锚点窗格中的按钮和锚定窗格的设置值约束为0（对于所有角落（你可以在按钮的布局部分下找到锚定窗格约束）之后我删除按钮的文本并将带有文本的标签放在按钮中，最后我旋转标签为90度（您可以在标签布局下找到转换下的旋转属性），然后就可以得到你想要的东西了。

我希望我回答你的问题！

Answer 3

选择垂直按钮。

在SceneViewer转到布局下拉菜单。

1.设置 minHeight，minWidth，prefWidth，prefHeight，MaxWidth

            to 
   **USE_COMPUTED_SIZE**

和 maxHeight

            to
      **MAX_VALUE**

2. Button必须跨越GridPane的所有行。

3. Button必须旋转90度

此处还注意一些重要事项。当您在SceneViewer中调整列或行的大小时，您设置的大小将是最大大小。

这可能会增加问题，如果窗口增长，GridPane将不会相应地进行。

因此，选择所有列和行，并将其最大尺寸设置为

USE_COMPUTED_SIZE 如果您希望它们增长。我将此添加为建议。

JavaFX / FXML：整个窗口旁边的垂直按钮

3 个答案: