代码之家  ›  专栏  ›  技术社区  ›  Nero

Javafx:填充线

  •  1
  • Nero  · 技术社区  · 6 年前

    我想在课堂上使用填充 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代码(在controller类中):

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

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

    1 回复  |  直到 6 年前
        1
  •  3
  •   James_D    6 年前

    假设您正在寻找的是类似于水平规则的东西,我建议使用 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个已填充),底部有两个像素(未填充)。因此,最终得到一个一像素高的填充区域(看起来像一条水平线),将整个宽度延伸到每端少5个像素。您可以尝试不同的插入和填充,以获得不同的效果;例如 -fx-background-insets: 0 5 0 5; 和填充 1 0 0 0 如果需要,将删除顶部和底部周围的空间。在所有侧面使用5的插图,但填充 9 0 5 0 将给出一条4倍宽的线,等等。你也可以使用渐变来填充。。。

    这是一个完整的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);
        }
    }
    

    以下是调整窗口大小后的结果:

    enter image description here