【问题标题】:Making an AnchorPane scrollable使 AnchorPane 可滚动
【发布时间】:2021-12-09 19:17:57
【问题描述】:

以下是我用于其中一种 Javafx 表单的 fxml:

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

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<AnchorPane fx:id="CustomerAddLabel" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="683.0" prefWidth="824.0" style="-fx-background-color: aliceblue; -fx-border-color: black; -fx-border-radius: 5;" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="c195.View_Controller.CustomerScreenController">
    <children>
        <Label alignment="TOP_CENTER" layoutX="300.0" layoutY="14.0" prefHeight="38.0" prefWidth="226.0" style="-fx-border-color: gray; -fx-border-radius: 5;" text="Customer" textAlignment="CENTER">
            <font>
                <Font name="System Bold Italic" size="25.0" />
            </font>
        </Label>
        <AnchorPane layoutX="16.0" layoutY="102.0" prefHeight="404.0" prefWidth="363.0" style="-fx-background-color: white;">
            <children>
                <TableView fx:id="CustomerTable" layoutY="1.0" style="-fx-border-color: black; -fx-border-radius: 5;">
                    <columns>
                        <TableColumn fx:id="CustomerIDColumn" prefWidth="63.0" text="ID" />
                        <TableColumn fx:id="CustomerNameColumn" prefWidth="175.0" text="Customer Name" />
                        <TableColumn fx:id="CustomerPhoneColumn" prefWidth="123.0" text="Phone" />
                        <TableColumn fx:id="CustomerAddressColumn" prefWidth="123.0" text="Address" />
                        <TableColumn fx:id="CustomerPostalCodeColumn" prefWidth="123.0" text="Postal Code" />
                        <TableColumn fx:id="CustomerDivisionColumn" prefWidth="123.0" text="Division" />
                        <TableColumn fx:id="CustomerCountryColumn" prefWidth="123.0" text="Country" />

                    </columns>
                </TableView>
            </children>
        </AnchorPane>
     <ButtonBar layoutX="587.0" layoutY="564.0" prefHeight="40.0" prefWidth="200.0">

        </ButtonBar>
        <ButtonBar layoutX="500.0" layoutY="613.0" prefHeight="40.0" prefWidth="200.0">
            <buttons>
                <Button fx:id="CustomerBackButton" mnemonicParsing="false" onAction="#CustomerBackButtonHandler" text="Back" />
                <Button fx:id="CustomerDeleteButton" mnemonicParsing="false" onAction="#CustomerDeleteButtonHandler" text="Delete" />
            </buttons>
        </ButtonBar>
        <Label fx:id="CustomerLabel" layoutX="542.0" layoutY="52.0" prefHeight="40.0" prefWidth="90.0" textFill="#1924e8">
            <font>
                <Font name="System Bold Italic" size="20.0" />
            </font>
        </Label>
    </children>
</AnchorPane>



下面是对应控制器的sn-p:

public class CustomerScreenController implements Initializable {
    @FXML
    private TableView<Customer> CustomerTable;
    @FXML
    private TableColumn<Customer, String> CustomerIDColumn;
    @FXML
    private TableColumn<Customer, String> CustomerNameColumn;
    @FXML
    private TableColumn<Customer, String> CustomerPhoneColumn;
    @FXML
    private TableColumn<Customer, String> CustomerAddressColumn;
    @FXML
    private TableColumn<Customer, String> CustomerPostalCodeColumn;
    @FXML
    private TableColumn<Customer, String> CustomerDivisionColumn;
    @FXML
    private TableColumn<Customer, String> CustomerCountryColumn;
    @FXML
    private Button CustomerBackButton;
    private Parent root;
    private Stage stage;
    private ObservableList<Customer> customerOL = FXCollections.observableArrayList();

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        PropertyValueFactory<Customer, String> custCustomerIDFactory = new PropertyValueFactory<>("customerID");
        PropertyValueFactory<Customer, String> custNameFactory = new PropertyValueFactory<>("customerName");
        PropertyValueFactory<Customer, String> custPhoneFactory = new PropertyValueFactory<>("phone"); //String value "CustomerPhone" calls getCustomerPhone method
        PropertyValueFactory<Customer, String> custCountryFactory = new PropertyValueFactory<>("country");
        PropertyValueFactory<Customer, String> custDivisionFactory = new PropertyValueFactory<>("division");
        PropertyValueFactory<Customer, String> custAddressFactory = new PropertyValueFactory<>("address");
        PropertyValueFactory<Customer, String> custPostalCodeFactory = new PropertyValueFactory<>("postalCode");

        CustomerIDColumn.setCellValueFactory(custCustomerIDFactory);
        CustomerNameColumn.setCellValueFactory(custNameFactory);
        CustomerPhoneColumn.setCellValueFactory(custPhoneFactory);
        CustomerCountryColumn.setCellValueFactory(custCountryFactory);
        CustomerDivisionColumn.setCellValueFactory(custDivisionFactory);
        CustomerAddressColumn.setCellValueFactory(custAddressFactory);
        CustomerPostalCodeColumn.setCellValueFactory(custPostalCodeFactory);
        try {
            updateCustomerTableView();

        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
}



我的用户界面如下所示:


这似乎被裁剪了。并且完整的列名Country 不可见。但是,如果我将其调整到最大,那么我确实会看到按钮。我怎样才能让它可滚动?
完整的窗格和其中的 TableView,这样这个问题就不会出现在屏幕上。

【问题讨论】:

    标签: javafx tableview


    【解决方案1】:

    您似乎错误地使用了AnchorPane。我会使用VBoxBorderPane。此示例使用VBox

    <?xml version="1.0" encoding="UTF-8"?>
    
    <?import javafx.geometry.Insets?>
    <?import javafx.scene.control.Button?>
    <?import javafx.scene.control.ButtonBar?>
    <?import javafx.scene.control.Label?>
    <?import javafx.scene.control.TableColumn?>
    <?import javafx.scene.control.TableView?>
    <?import javafx.scene.layout.VBox?>
    <?import javafx.scene.text.Font?>
    
    
    <VBox alignment="TOP_CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="683.0" prefWidth="824.0" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1">
       <children>
          <Label alignment="CENTER" prefHeight="38.0" prefWidth="226.0" style="-fx-border-color: gray; -fx-border-radius: 5;" text="Customer" textAlignment="CENTER">
             <font>
                <Font name="System Bold Italic" size="25.0" />
             </font>
             <VBox.margin>
                <Insets bottom="60.0" top="20.0" />
             </VBox.margin>
          </Label>
          <TableView fx:id="CustomerTable" style="-fx-border-color: black; -fx-border-radius: 5;" VBox.vgrow="ALWAYS">
             <columns>
                <TableColumn fx:id="CustomerIDColumn" prefWidth="63.0" text="ID" />
                <TableColumn fx:id="CustomerNameColumn" prefWidth="175.0" text="Customer Name" />
                <TableColumn fx:id="CustomerPhoneColumn" prefWidth="123.0" text="Phone" />
                <TableColumn fx:id="CustomerAddressColumn" prefWidth="123.0" text="Address" />
                <TableColumn fx:id="CustomerPostalCodeColumn" prefWidth="123.0" text="Postal Code" />
                <TableColumn fx:id="CustomerDivisionColumn" prefWidth="123.0" text="Division" />
                <TableColumn fx:id="CustomerCountryColumn" prefWidth="123.0" text="Country" />
             </columns>
             <VBox.margin>
                <Insets left="10.0" right="10.0" />
             </VBox.margin>
          </TableView>
          <ButtonBar>
             <buttons>
                <Button fx:id="CustomerBackButton" mnemonicParsing="false" onAction="#CustomerBackButtonHandler" text="Back" />
                <Button fx:id="CustomerDeleteButton" mnemonicParsing="false" onAction="#CustomerDeleteButtonHandler" text="Delete" />
             </buttons>
             <VBox.margin>
                <Insets bottom="20.0" right="20.0" top="20.0" />
             </VBox.margin>
          </ButtonBar>
       </children>
    </VBox>
    

    【讨论】:

    • 我没有测试过这个,但我认为一旦你将数据添加到表格中它应该是可滚动的。
    • 确认BorderPane hereVBox here。用几行调整Stage 的大小是查看滚动条的快速方法。
    • @sedrick 太棒了
    猜你喜欢
    • 2017-08-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多