使用 Css 在 JavaFX 中为 TextField 创建形状

Question

我需要使用 CSS

为 TextField 创建此形状

但我只成功创建了以下 UI:

如何创建示例图片之类的文本字段？

Answer 1

使用 Region to specify a SVG path 的 -fx-shape 属性。

.login-box {
    -fx-spacing: -15;
    -fx-fill-height: false;
}

.login-box > .button {
    -fx-shape: "M0,1 L1,0 L2,1 L1,2 Z";
    -fx-min-width: 60;
    -fx-max-width: 60;
    -fx-min-height: 60;
    -fx-max-height: 60;
}

.login-box > .textfield-container {
    -fx-spacing: 8;
}

.login-box > .textfield-container > .text-field {
    -fx-shape: "M200,0 H0 V30 H170 Z";
}

.login-box > .textfield-container > .password-field {
    -fx-shape: "M170,0 H0 V30 H200 Z";
}

.login-box > .textfield-container > .text-field, .login-box > .textfield-container > .password-field {
    -fx-min-width: 200;
    -fx-max-width: 200;
    -fx-min-height: 30;
    -fx-max-height: 30;
    -fx-padding: 4 30 4 8;
}

两个SVG路径都是从右上角开始（M200,0/M170,0）然后绘制到左上角（H0），继续向下绘制到左下角 (V30) 然后绘制到右下角 (V170/V200) 最后关闭路径 (Z).

视图结构：

login-box                                (HBox)
    |---- textfield-container            (VBox)
    |         |--- text-field            (TextField)
    |         |--- password-field        (PasswordField)
    |
    |---- button                         (Button)

使用 Css 在 JavaFX 中为 TextField 创建形状

Create Shape For TextField in JavaFX With Css

css

javafx

javafx-2

javafx-8

javafx-3d