Question

我最近选择了＃Hendrix Ebbers掌握了Javafx 8控件，并且几天来一直在努力创建UI。我目前正在学习列表视图，我决定使用包含labes和按钮的节点填充列表。

这本书非常擅长用读者提供工具，但是现在我觉得我已经碰壁了。

第一个问题是我似乎找不到让列表扩展到屏幕底部的方法。

其次，我需要让每个列表行内的按钮延伸到最右边，非常靠近窗框，只是为了美观。有什么我想念的吗？我想在不改变我正在使用的结构的情况下实现这个结果。这是有问题的类以及.css文件：

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ListView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.scene.control.Label;


public class MainAplicationWindow extends Application{
    VBox vBox1;
    VBox vBox2;
    HBox hBox1;
    HBox hBox2;
    HBox hBox3;
    Button button1;
    Button button2;
    Button button3;
    Button button4;
    Button button5;
    Button button6;

    public static void main(String[] args) {
        launch(args);
    }

public HBox populateNewSimpleListCell(){
    HBox listCell = new HBox();
    listCell.setPadding(new Insets(10,10,10,10));
    listCell.setSpacing(10);

    VBox labelContainer = new VBox();
    labelContainer.setPadding(new Insets(10,10,10,10));
    labelContainer.setSpacing(10);


    Label nameHere =  new Label("Insert Name Here!");
    Label LastNameHere =  new Label("Insert Last Name Here!");
    Button deleteReccord = new Button("Delete");
    deleteReccord.setOnAction(e-> ConfirmNotificationWindow.display("Confirm", "Are you sure you want to delette?"));

    labelContainer.getChildren().addAll(nameHere, LastNameHere);

    listCell.getChildren().addAll(labelContainer, deleteReccord);
    return listCell;
}


@Override
public void start(Stage primaryStage) throws Exception {
    // Initializing the containers.
    vBox1 = new VBox();
    vBox1.setPadding(new Insets(10,10,10,10));
    vBox1.setSpacing(10);

    vBox2 = new VBox();
    vBox2.setPadding(new Insets(10,10,10,10));
    vBox2.setSpacing(10);

    hBox1 = new HBox();
    hBox1.setPadding(new Insets(50,50,50,50));
    hBox1.setSpacing(100);

    hBox2 = new HBox();
    hBox2.setPadding(new Insets(50,50,50,50));
    hBox2.setSpacing(100);

    hBox3 = new HBox();

    //initializing the nodes.
    button1 = new Button("Option 1 ");
    button2 = new Button("Option 2 ");
    button3 = new Button("Option 3 ");
    button4 = new Button("Option 4 ");
    button5 = new Button("Option 5 ");
    button6 = new Button("Option 6 ");

    // Events
    button1.setOnAction(e-> SimpleLogInScreen.display("Log in"));
    button2.setOnAction(e-> ConfirmNotificationWindow.display("Log in", "Confirm?"));
    button3.setOnAction(e-> SimpleNotificationWindow.display("Log in", "Alert, invalid action!"));


    // Arrange the containers and contents
    hBox1.getChildren().addAll(button1, button2, button3);
    hBox2.getChildren().addAll(button4, button5, button6);

    vBox1.getChildren().addAll(hBox1, hBox2);

    hBox3.getChildren().addAll(vBox1);
    hBox3.setAlignment(Pos.TOP_LEFT);



    // Creating a list view
    ListView<HBox> list = new ListView<HBox>();

    ObservableList<HBox> items =FXCollections.observableArrayList ();
    for(int i = 0; i< 20; i++){
        items.addAll(populateNewSimpleListCell());
    }
    list.setItems(items);
    //--------------------------------------------------------------------



    vBox2.getChildren().addAll(hBox3, list);

    // Loading the final scene.
    Scene scene1 = new Scene(vBox2);
    scene1.getStylesheets().add("StyleSheets.css");

    // Final steps to set up the window.

    primaryStage.setScene(scene1);
    primaryStage.setTitle("Main Aplication Interface");
    primaryStage.setWidth(800);
    primaryStage.setHeight(600);
    primaryStage.setMaximized(true);
    primaryStage.setResizable(false);
    primaryStage.show();

}

}

css文件：

.root{
    -fx-background-color: #383838;
}

.button {
 -fx-padding: 8 15 15 15;
    -fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
    -fx-background-radius: 8;
    -fx-background-color: 
        linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
        #9d4024,
        #d86e3a,
        radial-gradient(center 50% 50%, radius 100%, #d86e3a, #c54e2c);
    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
    -fx-font-weight: bold;
    -fx-font-size: 1.1em;
}

.text-field {
    -fx-font-family: "Arial";
    -fx-font-size: 1em;
    -fx-font-color: black;
    -fx-font-weight: bold;
    -fx-background-color: #dc9656;
    -fx-background-radius: 8;
}

.label {
    -fx-font-family: "Arial";
    -fx-font-size: 1em;
    -fx-text-fill: #dc9656;
    -fx-font-weight: bold;
}
.list{

}

Answer 1

您在列表底部和窗口底部之间看到的间隙只是您在包含列表的VBox上设置的填充：

vBox2.setPadding(new Insets(10, 10, 10, 10));

如果删除此项，则删除间隙。您也可以删除底部的部分：

vBox2.setPadding(new Insets(10, 10, 0, 10));

要使按钮向右移动是可能的，但在HBox中非常困难。最好使用更适合的布局，例如GridPane或AnchorPane。要进行此更改，您必须更改ListView（您已设置ListView<HBox>）的类型，以及您ObservableList的类型等。

事实上，将ListView（或其他此类控件）的数据类型设为Node类型通常是一个非常糟糕的主意。（我没有看过亨德里克的书，但我读过他写过的其他东西，如果他在书中做了类似的话，我会非常惊讶。）你应该创建一个合适的数据类型来保存数据<{1}}中的。如果您需要更改其显示方式，请使用ListView并创建相应的cellFactory。

由于您的数据似乎包含每个项目的名字和姓氏，我会将数据类称为ListCell类（尽管在您的实际应用中类似Person，{{ 1}}，User或Employee等可能更合适）。它可以这么简单：

Customer

或者您可能会发现使用JavaFX Property pattern来实现此类更好。

列表单元格可以如下所示（使用Student和列约束来适当地对齐每个列）：

public class Person {
    private String firstName ;
    private String lastName ;

    public Person(String firstName, String lastName) {
        this.firstName = firstName ;
        this.lastName = lastName ;
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }


}

现在，您的列表视图设置如下：

GridPane

这是一个完整的SSCCE：

public class PersonCell extends ListCell<Person> {
    private final Label firstNameLabel ;
    private final Label lastNameLabel ;

    private final GridPane listCellContents ;

    public PersonCell() {
        listCellContents = new GridPane();
        listCellContents.setPadding(new Insets(10, 10, 10, 10));
        listCellContents.setHgap(10);
        listCellContents.setVgap(10);

        firstNameLabel = new Label();
        lastNameLabel = new Label();

        Button deleteReccord = new Button("Delete");
        deleteReccord.setOnAction(e -> { 
            Person person = getItem();
            getListView().getItems().remove(person);
        });


        listCellContents.add(firstNameLabel, 0, 0);
        listCellContents.add(lastNameLabel, 0, 1);
        listCellContents.add(deleteReccord, 1, 0, 1, 2);

        ColumnConstraints leftCol = new ColumnConstraints();
        ColumnConstraints rightCol = new ColumnConstraints();

        rightCol.setHalignment(HPos.RIGHT);
        rightCol.setHgrow(Priority.ALWAYS);

        listCellContents.getColumnConstraints().addAll(leftCol, rightCol);

    }

    @Override
    public void updateItem(Person item, boolean empty) {
        super.updateItem(item, empty);
        if (empty) {
            setGraphic(null);
        } else {
            firstNameLabel.setText(item.getFirstName());
            lastNameLabel.setText(item.getLastName());
            setGraphic(listCellContents);
        }
    }
}

关于javaFX，需要将listview内的节点对齐到最右边

1 个答案: