Javafx：填充线

Question

我想在javafx.scene.shape.Line中使用类javafx.scene.layout.VBox的填充。 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);

然而没有任何帮助。感谢您的帮助和阅读。

Answer 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);
    }
}

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