在最大化模式下更改字体大小答案

【问题标题】：change fontsize in maximize mode在最大化模式下更改字体大小
【发布时间】：2016-01-22 23:42:03
【问题描述】：

我正在使用 JavaFX，当我按下位于“退出”按钮附近右上角的最大化按钮时，我想增加项目中所有元素的字体大小，是否可以这样做？我的起始项目是 800x600，字体大小为 18px，我想，当用户按下最大化按钮时，字体大小变为例如24 像素。我正在使用 Java 7、NetBeans 和 Scene Builder。看图片，我想要全屏时的文本按钮大小，它比小那个大！所以我想覆盖最大化按钮操作！谢谢！

编辑：我想在用户按下此按钮时增加字体大小：我该怎么做？

【问题讨论】：

标签： layout javafx font-size

【解决方案1】：

说明最大化与全屏

您在问题中指向的按钮是最大化按钮。 Full screen mode 与 maximized window 不同（在大多数窗口系统中）。

为什么你不想列出最大化属性

您可以监听maximize property of the window 并根据最大化属性值设置您希望的字体大小，类似于此处概述的：Listener for a Stage minimizing, maximizing, etc。然而，我对此的测试不是它不是一个非常健壮的解决方案，因为（使用 Mac 上最大化属性的当前 JavaFX 8u60 实现），当用户按下最大化按钮时会触发监听器（并且最大化属性设置为 true )，但是如果用户稍后通过窗口边框手动调整窗口大小，则最大化属性保持为真，并且不会触发任何侦听器来注意窗口不再最大化（这实际上可能是 JavaFX 8u60 的 Mac 实现中的错误）。因此，您可以捕获最大化事件并在最大化时调整 UI 大小，但当不再最大化时，没有事件将您的 UI 重置为正常（未最大化）视图。

改为听根布局边界

一个更健壮的实现似乎实现了一种响应式布局算法，侦听场景布局边界的当前大小，并根据布局边界的变化进行不同的布局（或字体大小）。这些概念类似于responsive web design，但实现与基于 HTML 的网站不同，因为 JavaFX 中的 CSS 和布局与 HTML 不同。

这是这种方法的一个示例：

小尺寸窗口（小字体）

当窗口不是很大时使用较小的字体。

更大尺寸（包括最大化或全屏）窗口（更大字体）

窗口较大时使用较大的字体。

MaximizeFontResponder.java

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Bounds;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class MaximizeFontResponder extends Application {

    private static final String MAXIMIZED_ROOT_STYLE_CLASS = "maximized-root";
    private static final double FONT_SIZE_WIDTH_ON_THRESHOLD = 800;
    private static final double FONT_SIZE_HEIGHT_ON_THRESHOLD = 400;
    private static final double FONT_SIZE_WIDTH_OFF_THRESHOLD = 780;
    private static final double FONT_SIZE_HEIGHT_OFF_THRESHOLD = 380;

    @Override
    public void start(Stage stage) throws Exception {
        StackPane layout = new StackPane(new Label("Now is the time for all good men\nto come to the aid of the party."));

        Scene scene = new Scene(layout);
        scene.getStylesheets().add(
                MaximizeFontResponder.class.getResource(
                        "font-responder.css"
                ).toURI().toURL().toExternalForm()
        );
        stage.setScene(scene);

        refreshRootFontSize(layout);
        scene.getRoot().layoutBoundsProperty().addListener((observable, oldBounds, newBounds) -> {
            refreshRootFontSize(layout);
        });

        stage.show();
    }

    private void refreshRootFontSize(Pane root) {
        final ObservableList<String> rootStyleClass = root.getStyleClass();
        final Bounds layoutBounds = root.getLayoutBounds();

        if (layoutBounds.getWidth() >= FONT_SIZE_WIDTH_ON_THRESHOLD
                && layoutBounds.getHeight() >= FONT_SIZE_HEIGHT_ON_THRESHOLD
                && !rootStyleClass.contains(MAXIMIZED_ROOT_STYLE_CLASS)) {
            rootStyleClass.add(MAXIMIZED_ROOT_STYLE_CLASS);
        }

        if (layoutBounds.getWidth() <= FONT_SIZE_WIDTH_OFF_THRESHOLD
                || layoutBounds.getHeight() <= FONT_SIZE_HEIGHT_OFF_THRESHOLD) {
            rootStyleClass.remove(MAXIMIZED_ROOT_STYLE_CLASS);
        }
    }

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

font-responder.css

.root { -fx-font-size: 20px; } .maximized-root { -fx-font-size: 40px; }

此示例中用于根据 CSS 定义的 -fx-font-size 调整字体和 UI 组件大小的技术在以下对相关问题的回答中进行了说明：

关于 em 单位和控制/布局大小的注意事项

尽管该示例不包含任何控件，但如果包含任何控件，则这些控件的大小也会变大以适应更大的字体大小，因为所有 JavaFX 控件的大小都是基于 em 单位的。如果您希望 UI 布局的其余部分也以相同的方式进行调整，那么还要根据 em units 而不是绝对像素来调整它的大小。请注意，我已经为 em 单元链接链接了一个基于 HTML 的资源（JavaFX CSS 与 HTML CSS 不同），但一般 em 概念非常相似，您应该能够从该链接中的信息中掌握它。

更多资源

对于更强大的解决方案，您可能需要研究：

Hendrik Ebbers: Response Design for JavaFX。

【讨论】：