将滚动条添加到文本字段

Question

假设我有两个文本字段，并且两个文本字段都包含一个长度相同的文本。文本可以比文本字段大得多。如果有人使用光标或通过标记文本滚动浏览此文本字段，则两个文本字段应该滚动完全相同。

我想添加一个滚动条来表示文本字段的文本。如果文本小于文本字段，那么滚动条应该是满的（拇指不能移动）。文本字段和滚动条中的文本在滚动时都应该相应地表现。

整个事情看起来像这样：

如何将所有三个控件的滚动事件相互绑定？

如何设置最小值和最大值以及绑定滚动条的值？

Answer 1

这是一种解决方案。此示例采用两个 TextFields 和一个水平 ScrollBar 并将它们添加到一个组中。然后根据当前ScrollBar值移动TextFields'光标位置

Controller

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ScrollBar;
import javafx.scene.control.TextField;

/**
 *
 * @author Sedrick
 */
public class FXMLDocumentController implements Initializable {

    @FXML TextField tfOne, tfTwo;
    @FXML ScrollBar sbMain;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
        sbMain.setMin(0);
        sbMain.setMax(tfOne.getText().length());


        tfOne.setOnKeyReleased(keyEvent ->{
            if(tfOne.getText().length() <= tfTwo.getText().length())
            {
                sbMain.setMax(tfOne.getText().length());
            }
        });

        tfTwo.setOnKeyReleased(keyEvent ->{
            if(tfTwo.getText().length() <= tfOne.getText().length())
            {
                 sbMain.setMax(tfOne.getText().length());
            }           
        });

        sbMain.valueProperty().addListener((obs, oldVal, newVal)->{
            System.out.println(newVal);
            tfOne.positionCaret(newVal.intValue());
            tfTwo.positionCaret(newVal.intValue());
        });
    }    

}

FXML

<?import javafx.scene.Group?>
<?import javafx.scene.control.ScrollBar?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" prefHeight="375.0" prefWidth="460.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication34.FXMLDocumentController">
   <children>
      <Group />
      <ScrollBar fx:id="sbMain" layoutX="137.0" layoutY="209.0" prefHeight="18.0" prefWidth="187.0" />
      <TextField fx:id="tfOne" layoutX="137.0" layoutY="178.0" text="SDadsaSasdasASasADSasASDadsadadA" />
      <TextField fx:id="tfTwo" layoutX="137.0" layoutY="147.0" text="SDadsaSasdasASasADSasASDadsadadA" />
   </children>
</AnchorPane>

将滚动条添加到文本字段

Add scrollbar to textfield

javafx

scrollbar

textfield

javafx-8