小编Gur*_*ofu的帖子

我将上标签的字体大小设置为 24px。我不知道在哪里可以检查元素的实际高度（如果在场景构建器中可能的话），但是盒子的上部（在图像中指定）和下部有额外的空间。

• 行间距为0。
• 父 VBox 没有顶部填充。
• 计算所有标签大小。

我需要标签的高度等于字体大小。我的意思是FontSize = Gray space surrounded by blue markers height。

如何达到？

我遇到过类似的问题 HTML/CSS。在那里，对于大多数情况来说，不是简单但有效的解决方案是负边距:before和:after伪元素。

现在有哪些适用于 JavaFX 的解决方案？

再现

存储库

resources/static/TasksOverview.fxml通过场景生成器打开。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>


<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="640.0" prefWidth="320.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <HBox alignment="CENTER_LEFT">
         <children>
            <CheckBox mnemonicParsing="false" />
            <VBox>
               <children>
                  <Label style="-fx-font-size: 24px;" text="Wake up">
                     <VBox.margin>
                        <Insets />
                     </VBox.margin>
                  </Label>
                  <Label style="-fx-font-size: 14px;" …

来自through2文档：

\n

你需要这个吗？

\n

自从 Node.js 引入了简化流构造以来，\nthrough2 的许多使用都变得多余了。考虑您是否确实需要\n使用 through2 还是只想使用\'readable-stream\' 包或\n核心\'stream\' 包（源自\'readable-stream\'）。

\n

如果我理解正确的话，现在（从 2021 年开始）我们可以在没有第三方库的情况下干预流。\n我没有找到如何执行与Stream 文档through2中相同的操作。

// ...\n  .pipe(through2(function (file, encoding, callback) {\n    // Do something with file ...\n    callback(null, file)\n   }))\n\n// \xe2\x86\x91 Possible to reach the same effect natively (with core packages)?\n

我想，2021 年一定会有一些支持 async/await 语法的方法：

// ...\n  .pipe(newFeatureOfModernNodeJS(async function (file) {\n\n    await doSomethingAsyncWithFile(file);\n    // on fail - same effect as "callback(new Error(\'...\'))" of trough2\n\n    return file; // …

如何CoolerFanIsOn在类中编写数组属性的getter和setter表达式CoolerSystem？我展示了非阵列属性的类似的所需表达IsOn的Lamp类.

class CoolerFan{

    bool isOn;
    public bool IsOn {
        get => isOn;
        set {
            isOn = value;
        }
    }
}

class CoolerSystem {

    private CoolerFan[] = new CoolerFan[5];
    private bool[] coolerFanIsOn = new Boolean[5];

    // invalid code from now

    public bool[] CoolerFanIsOn {
        get => coolerFanIsOn[number];
        set {
            coolerFanIsOn[number] = value;
        }
    }
}

目标

单击“编辑”按钮时，将出现输入字段并自动聚焦。

<button v-if="!editingMode" @click="editingMode = !editingMode">edit</button>
<input v-else type="text" value ref="input">

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data: function() {
    return {
      editingMode: false
    };
  },
  methods: {
    onClickButton() {
      this.editingMode = true;
      this.$refs.input.focus();
    }
  }
};

小提琴

问题

因为Vue中的重新渲染是同步的，所以当我们调用 时this.$refs.input.focus()，输入字段可能还没有渲染。我经历过两个案例：

1. 输入尚未安装。在这种情况下，Error in v-on handler: "TypeError: Cannot read property 'focus' of undefined"就会出现。
2. 没有这个错误，但也没有焦点。看起来输入字段已安装和准备操作之间存在间隔。

在下面的代码中：

import { Vue, Component } from "vue-property-decorator";  \n\n\n@Component({\n  components: {}\n})\nexport default class ProductViewingAndEditingPage extends Vue {\n\n  private readonly componentsReferencesIDs: {\n    productTitleInputField: string;\n    productPriceInputControl: string;\n  } = {\n    productTitleInputField: "ProductTitle--InputField",\n    productPriceInputControl: "ProductPrice--InputComponent"\n  };\n\n  private readonly productDataFormValidator: InputsGroupValidator = new InputsGroupValidator({\n    controls: {\n      [this.componentsReferencesIDs.productTitleInputField]:\n          this.$refs[this.componentsReferencesIDs.productTitleInputField],\n      [this.componentsReferencesIDs.productPriceInputControl]:\n          this.$refs[this.componentsReferencesIDs.productPriceInputControl]\n    }\n  });\n}\n

@typescript/eslint发出@typescript-eslint/no-invalid-this问题（因为它不是 ESLint no-invalid-this，该规则理解类字段。）。

关于概念解决方案的思考

如果我使用componentsReferencesIDs静态类字段，则无法从 vue 模板中检索值。

这里不能使用箭头函数，因为这里是类字段。而且，如果我们使用 alias this，我们将面临no-this-alias规则。

我知道 ESLint 并不是唯一的事实来源。但我想要这样的理由：“因为 \xe3\x80\x88argument\xe3\x80\x89，这个 ESLint 规则不涵盖这种情况。”

假设根据设计，红色按钮必须仅显示在宽屏幕上。

如果只是展示它，没有什么困难，但我会跳过装饰。

.Container {
  display: flex;
  column-gap: 12px;
}

@media screen and (max-width: 340px) {
  .Button__WideScreensOnly {
    display: none;
  }
}

<div class="Container">
   <button class="Button">Button</button>
   <button class="Button">Button</button>
   <button class="Button Button__WideScreensOnly">Narrow screens only</button>
</div>

据我所知，辅助功能软件不尊重 CSS，因此第三个按钮对于辅助功能软件始终可见。但是用户（例如视力较弱但如果屏幕阅读器能够读取按钮标签则能够按下按钮）无法在狭窄的屏幕上按下按钮。

辅助软件标记隐藏元素的常见解决方案是“隐藏”属性（标签的属性，而不是 CSS 属性）。但据我所知，这些属性不能依赖于媒体查询。