我想让我的应用程序流畅。但是，当我将窗口放大时，与 UI 元素相比，字体看起来很小。最终，当我调整窗口大小时，我希望我的文本大小变大或变小。我知道理论上我可以使用 style 属性做到这一点，但在某些情况下我已经将该属性绑定到其他东西。
我知道有“fontProperty”方法，但我没有任何东西可以绑定它，因为我不知道如何创建具有同步大小的动态 ObjectProperty。我该怎么办？
编辑：为避免混淆，我尝试根据其他因素更改字体大小，而不是相反。
【问题讨论】：
标签： java user-interface data-binding fonts javafx
只需将您希望字体大小更改的所有内容放入容器中，然后设置该样式或根据需要使用绑定。
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class FontBind extends Application {
private DoubleProperty fontSize = new SimpleDoubleProperty(10);
private IntegerProperty blues = new SimpleIntegerProperty(50);
@Override
public void start(Stage primaryStage) {
Button btn = new Button("click me, I change color");
btn.setOnAction((evt)->{blues.set(blues.get()+20);});//max?
Label lbl = new Label("I'm a label");
TextArea ta = new TextArea("Lots of text can be typed\nand even number 1234567890");
HBox hbox = new HBox(new Label("I never change"));
VBox child = new VBox(btn, lbl, ta);
VBox root = new VBox(child, hbox);
Scene scene = new Scene(root, 300, 250);
fontSize.bind(scene.widthProperty().add(scene.heightProperty()).divide(50));
child.styleProperty().bind(Bindings.concat("-fx-font-size: ", fontSize.asString(), ";"
,"-fx-base: rgb(100,100,",blues.asString(),");"));
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
我不确定您的样式已经绑定到什么，但您可以在样式字符串中设置多个 css 值。
【讨论】：
设置 .root -fx-font-size
在样式表.root 选择器中，将-fx-font-size 设置为您想要的值：
.root { -fx字体大小：40px； }
为什么会这样
之所以有效，是因为：
执行此操作后，所有控件（以及其中的文本）都会自动调整大小以适应您指定的任何字体大小。
相关示例
相关信息
em 是一个不特定于 JavaFX 的通用单位，并且 em 单位也用于 HTML CSS。有兴趣的可以阅读broader discussion on em units versus other units。
通过表达式绑定在 FXML 中使用 em 单位
仅设置默认字体大小即可让您达到所需位置的大约 90%，但不一定是通用修复，因为某些布局单位可能未使用 em 单位指定。大多数情况下，这并不是一个真正的问题，但如果是您的情况，您也可以应用Oracle developer mailing list post 中描述的机制，这似乎可行，但有点笨拙。
如何使用表达式绑定。
对于 35em x 25em，您可以这样写：
prefWidth="${35*u.em}" prefHeight="${25*u.em}"
它不是 100% 简洁，但也许还过得去。
这些大小表达式在场景构建器 1.1 中工作，这很好。
这是一个使用 Rectangle 来存储 fxml 文件的宽度和高度修饰符的示例。
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.*?>
<StackPane xmlns:fx="http://javafx.com/fxml">
<fx:define>
<Rectangle fx:id="s" width="13" height="13"/>
</fx:define>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="${22 * s.width}" prefWidth="${14 * s.height}">
<children>
<Button layoutX="${4 * s.width}" layoutY="${ 5 * s.height}" prefWidth="${6 * s.width}" text="Top" />
<Button layoutX="${4 * s.width}" layoutY="${10 * s.height}" prefWidth="${6 * s.width}" text="Middle" />
<Button layoutX="${4 * s.width}" layoutY="${15 * s.height}" prefWidth="${6 * s.width}" text="Bottom" />
</children>
</AnchorPane>
</StackPane>
或者，您可以创建自己的单元类并将其用于您的大小调整表达式，例如：
package org.jewelsea.measure;
public class Measurement {
private double em;
public void setEm(double em) { this.em = em; }
public double getEm() { return em; }
}
. . .
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import org.jewelsea.measure.Measurement?>
<?scenebuilder-classpath-element .?>
<StackPane xmlns:fx="http://javafx.com/fxml">
<fx:define>
<Measurement fx:id="u" em="26.0" />
</fx:define>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="${22*u.em}" prefWidth="${14*u.em}">
<children>
<Button layoutX="${4*u.em}" layoutY="${ 5*u.em}" prefWidth="${6*u.em}" text="Top" />
<Button layoutX="${4*u.em}" layoutY="${10*u.em}" prefWidth="${6*u.em}" text="Middle" />
<Button layoutX="${4*u.em}" layoutY="${15*u.em}" prefWidth="${6*u.em}" text="Bottom" />
</children>
</AnchorPane>
</StackPane>
【讨论】：
有一种最简单且合适的方法将字体大小与容器大小绑定，以使其具有响应式字体缩放效果。
bind(Bindings.concat("-fx-font-size: " 是一个不错的选择，但是当您调整窗口大小时，它似乎很慢，我认为这不是解决问题的正确方法。
您可以声明 FontProperty 并将此 FontProperty 绑定到组件（标签、文本等），最后创建一个事件以根据我们的设计将大小与 FontProperty 大小绑定：
private Label textTracking = new Label();
private ObjectProperty<Font> fontTracking = new SimpleObjectProperty<Font>(Font.getDefault());
然后在构造函数或一些 init 方法中，您可以将我们对象的字体属性与我们的动态字体绑定：
textTracking.fontProperty().bind(fontTracking);
最后，您需要将包装容器更改大小与动态字体大小绑定：
widthProperty().addListener(new ChangeListener<Number>()
{
@Override
public void changed(ObservableValue<? extends Number> observableValue, Number oldWidth, Number newWidth)
{
fontTracking.set(Font.font(newWidth.doubleValue() / 4));
}
});
使用此方案，动态字体调整非常流畅和快速，甚至超过bind(Bindings.concat("-fx-font-size: "方法。
【讨论】：
ObjectExpression<Font> fontTracking = Bindings.createObjectBinding(() -> Font.font(getWidth() / 4), widthProperty()) 然后textTracking.fontProperty().bind(fontTracking) 可能更容易。
我遇到了类似的问题，用这种方法解决了：
之所以有效，是因为设置到主窗格的样式将作为修饰符影响已在 FXML 中定义的所有节点。已有样式类的节点也会受到影响，因为新样式作为层叠样式表中的额外顶层样式出现。
此解决方案的主要优点是在一个地方处理字体大小缩放系数。因此，您不必找到每个具有 Font 属性的节点即可使其正常工作。
示例文件：
styles.css
.label {
-fx-font-size: 1.1em;
}
.title {
-fx-font-size: 1.5em;
-fx-font-weight: bold;
}
main.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.control.cell.*?>
<?import javafx.scene.layout.*?>
<BorderPane style="-fx-background-color: #fff;"
xmlns="http://javafx.com/javafx/8"
xmlns:fx="http://javafx.com/fxml/1"
prefWidth="1280.0" prefHeight="720.0"
fx:controller="controllers.MainController">
<top>
<Label text="Application title" styleClass="title"/>
</top>
<center>
<Label text="Lorem ipsum"/>
</center>
</BorderPane>
MainController.java
package controllers;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.layout.BorderPane;
public class MainController implements Initializable {
@FXML private BorderPane mainPane;
@Override
public void initialize(URL url, ResourceBundle resourceBundle) {
initializeFontSizeManager();
}
private void initializeFontSizeManager() {
// Cf. https://stackoverflow.com/questions/13246211/javafx-how-to-get-stage-from-controller-during-initialization
mainPane.sceneProperty().addListener((observableScene, oldScene, newScene) -> {
// We need a scene to work on
if (oldScene == null && newScene != null) {
DoubleProperty fontSize = new SimpleDoubleProperty(0);
fontSize.bind(newScene.widthProperty().add(newScene.heightProperty())
.divide(1280 + 720) // I know, it's a very rough approximation :)
.multiply(100)); // get a suitable value to put before the '%' symbol in the style
mainPane.styleProperty().bind(
Bindings.concat("-fx-font-size: ", fontSize.asString("%.0f")).concat("%;"));
}
});
}
}
【讨论】：