JavaFX文本区域禁用滚动条

Question

目前，我正在为一种编程语言制作一个lw解释器。 http://www.muppetlabs.com/~breadbox/bf/ 无论如何，我正在尝试实现一个文本区域，但我希望滚动条被隐藏。我查看了多个教程来实现这一点，但它们中的没有一个似乎有效。以下是我的fxml窗口的代码：

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

<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<SplitPane dividerPositions="0.6231155778894473" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" orientation="VERTICAL" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="interpreter.Window">
  <items>
    <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0">
         <children>
            <HBox layoutX="188.0" layoutY="81.0" prefHeight="262.0" prefWidth="599.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="-1.0" AnchorPane.topAnchor="0.0">
               <children>
                  <Pane prefHeight="200.0" prefWidth="200.0">
                     <children>
                        <Button fx:id="executor" layoutX="64.0" layoutY="64.0" mnemonicParsing="false" onAction="#onExecute" text="Execute" />
                        <TextField fx:id="input" layoutX="15.0" layoutY="105.0" promptText="input" />
                        <ComboBox fx:id="byteSize" layoutX="23.0" layoutY="153.0" prefWidth="150.0" promptText="Byte Size" />
                        <TextField fx:id="bytes" alignment="CENTER_RIGHT" layoutX="25.0" layoutY="205.0" prefHeight="27.0" prefWidth="91.0" promptText="Bytes" text="30000" />
                        <Text layoutX="39.0" layoutY="41.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Control Center" textAlignment="CENTER">
                           <font>
                              <Font size="17.0" />
                           </font>
                        </Text>
                        <Text layoutX="122.0" layoutY="222.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Bytes" />
                        <Line endX="100.0" layoutX="98.0" layoutY="261.0" startX="-100.0" />
                     </children>
                  </Pane>



                    <TextArea fx:id="errorLog" disable="true" editable="false" prefHeight="262.0" prefWidth="38.0" style="-fx-text-fill: #ff0000" />
                     //this is the one where I want the scroll bars hidden



                  <TextArea fx:id="code" prefHeight="262.0" prefWidth="361.0" promptText="Code" HBox.hgrow="ALWAYS" />
               </children>
            </HBox>
         </children>
      </AnchorPane>
      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
         <children>
             <TextArea fx:id="output" disable="true" editable="false" layoutX="76.0" layoutY="-60.0" prefHeight="166.0" prefWidth="598.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
         </children>
      </AnchorPane>
  </items>
</SplitPane>

我已经指定了要隐藏滚动条的内容。有人能给点建议吗？谢谢。

- Java Noob

Answer 1

这可以通过设置内部ScrollPane的水平+垂直滚动条策略来实现。我目前不确定是否可以通过FXML或Java API来完成，但可以通过CSS实现。

请参见ScrollPane上的CSS指南。

#errorLog .scroll-pane {
    -fx-hbar-policy: never;
    -fx-vbar-policy: never;
}

这假定了TextArea的CSS子结构，但这在TextArea官方CSS指南中有明确定义。

scroll-pane — ScrollPane
    content — Region

如果你还没有使用CSS，那么你需要定义一个CSS文件并将其添加到场景或FXML中。如何操作可以在使用CSS样式化UI控件中找到。

- Adam

---

@Adam，看起来你在CSS文件中使用了fx:id，但我们为TextArea定义了一个id。 - Menai Ala Eddine - Aladdin

如果您没有指定id，则会使用fx:id。请参见https://dev59.com/hYnca4cB1Zd3GeqP9E_p。 - Adam

Answer 2

有许多方法可以满足您的需求。

使用 Css： 在这个 CSS 中，我假设 error 是 TextArea 的 id。

Fxml：

<TextArea id="error" fx:id="errorLog" disable="true" editable="false" prefHeight="262.0" prefWidth="38.0" style="-fx-text-fill: #ff0000" />

CSS ：

#error .scroll-pane {
    -fx-hbar-policy: never;
    -fx-vbar-policy: never;
}

或者

#error .scroll-pane{
    -fx-padding:0

}

这些样式会给你相同的结果。

通过使用FXML： 我添加了wrapText="true"

  <TextArea id="error" fx:id="errorLog" disable="true" editable="false" prefHeight="262.0" prefWidth="38.0" style="-fx-text-fill: #ff0000" wrapText="true"/>

- Menai Ala Eddine - Aladdin

Answer 3

为了避免在项目中反复使用 CSS 链接，我扩展了 TextArea，创建了一个非常简单的“仅垂直滚动”TextArea对象。我将 CSS 附加到对象本身上。即使不必要，垂直滚动条也是可见的，因为我喜欢这样。要仅在需要时显示滚动条，可以将 CSS 调用中的 'always' 更改为 'as-needed'。

我还添加了一些填充来使文本垂直居中，尽管这显然需要根据不同的字体大小进行更改。

package sample.controls;

import javafx.scene.control.TextArea;

public class VertOnlyTextArea extends TextArea {

    public VertOnlyTextArea(){
        setWrapText(true);
        getStylesheets().add("/css/vertOnlyTextArea.css");
    }
}

在 CSS 目录中... vertOnlyTextArea.css

.text-area .scroll-pane {
    -fx-hbar-policy: never;
    -fx-vbar-policy: always;
}
.text-area .content{
    -fx-padding: 8 0 0 8;
}

希望这可以帮到你

- Alastair Cooper