Javafx：填充线答案

【问题标题】：Javafx: Padding lineJavafx：填充线
【发布时间】：2018-07-03 18:07:26
【问题描述】：

我想在 javafx.scene.layout.VBox 中使用类 javafx.scene.shape.Line 的填充。 FXML（包含在另一个中）：

<Tab xmlns:fx="http://javafx.com/fxml" fx:controller=...>
    <VBox>
        <Pane>...</Pane>
        <Line fx:id="line"/>
        ...
    </VBox>
</Tab>

我尝试使用 FXML 中的 CSS 和填充标签。我还尝试了java代码（在控制器类中）：

@FXML MyLine spacerLine;
...
line.setStartX(5);
line.setEndX(scene.getWidth() - 5);

但是没有任何帮助。感谢您的帮助和阅读。

【问题讨论】：

我不确定“填充”是您真正的意思。 padding 是为 Region 定义的（Line 不是 Region），它是“区域内容周围”的空间量。一行没有内容（没有子节点等）。那么，如果您将填充设置为某些东西，您实际上希望看到什么？
我需要这样的东西：[space to border]________[space to border]。所以这条线不会触及边界。我已经编辑了我的问题，有一个错误。
所以您正在寻找类似 HTML horizontal rule?

标签： java javafx padding

【解决方案1】：

假设您要查找的内容类似于水平规则，我建议为此使用 Region，并使用 CSS 对其进行样式设置。

使用Line 的问题在于，您要么创建managed 行（这是默认值），要么不受管理。如果它是托管的，则包含它的布局窗格将根据布局规则对其进行定位，因此您将无法指定 startX，例如。如果不托管，则需要计算其x 和y 坐标；因此，例如在VBox 中，您需要相对于VBox 的其他子节点手动定位它。在任何一种情况下，您还需要根据容器的宽度计算endX，该宽度可能随时发生变化（例如，如果用户调整窗口大小）。

使用区域，您可以这样做

<Region styleClass="hr" />

然后在外部 CSS 文件中应用适当的样式，例如：

.hr {
        -fx-background-color: slategray ;
        -fx-background-insets: 2 5 2 5 ;

        -fx-padding: 3 0 2 0  ;
}

这通过使用背景颜色（slategrey，但您当然可以选择任何您喜欢的颜色）来绘制规则，但使用插图在左侧和右侧留出 5 个像素未填充，在左侧留出 2 个像素未填充顶部和底部。填充确保该区域在顶部具有三个像素（2 个未填充，1 个已填充），在底部具有 2 个像素（未填充）。所以这最终会得到一个像素高的填充区域（看起来像一条水平线），将整个宽度拉伸到每端减少 5 个像素。您可以尝试不同的插图和填充以获得不同的效果；例如如果需要，-fx-background-insets: 0 5 0 5; 和 1 0 0 0 的填充将删除顶部和底部周围的空间。在所有边上使用 5 的插图但 9 0 5 0 的填充将给出 4px 宽的线等。您也可以使用渐变填充...

这是一个完整的 FXML 文件 (HRWithRegion.fxml) 来测试它：

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

<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.Region?>

<VBox xmlns:fx="http://javafx.com/fxml/1">
    <VBox spacing="5">
        <Label text="Some content"/>
        <TextField />
        <Label text="Some more content"/>
    </VBox>
    <Region styleClass="hr" />
    <VBox>
        <Label text="Content below rule" />
    </VBox>
</VBox>

还有一个 JavaFX 应用程序类：只需将上面的 FXML 文件与此处的源代码放在同一文件夹中，并将 CSS 文件作为 hr.css 再次放在同一文件夹中。

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

public class HRTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("HRWithRegion.fxml"));
        Scene scene = new Scene(root);
        scene.getStylesheets().add("hr.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

这是结果（调整窗口大小后）：

【讨论】：