将滚动条添加到文本字段

时间:2018-01-05 22:48:21

标签: javafx javafx-8 scrollbar textfield

鉴于我有两个文本字段,两个文本字段都包含长度相同的文本。文本可以比文本字段大得多。如果有人使用光标或标记文本滚动浏览此文本字段,则两个文本字段应滚动完全相同。

我想添加一个表示文本字段文本的滚动条。如果文本小于文本字段,则滚动条应该已满(拇指不能移动)。滚动时,文本字段和滚动条中的文本都应相应地运行。

整个事情看起来像这样: text fields with scrollbar

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

如何设置最小值和最大值并绑定滚动条的值?

1 个答案:

答案 0 :(得分:1)

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

  

控制器

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>