Question

我想要一个布局，顶部是可调整大小的图表，底部是固定大小的表格。我尝试将VBox与Chart和TableView与VBox.setVgrow一起使用，以确保所有调整大小都在图表上。我事先知道，表格中只有3行。

但是，该表首先显示的行数比我的更多，其次，当我调整主窗口的大小时，它也会调整大小。

我在Windows 8.1 / 64位上使用JDK8，更新31。

我正在设置我的舞台

public void start(Stage primaryStage) {
    LineChart<Number, Number> chart = new LineChart<>(new NumberAxis(), new NumberAxis());

    Node table = makeTable();

    VBox.setVgrow(chart, Priority.ALWAYS);
    VBox.setVgrow(table, Priority.NEVER);
    VBox root = new VBox( chart, table);
    Scene scene = new Scene(root, 300, 250);

    primaryStage.setScene(scene);
    primaryStage.show();
}

并且表格是这样初始化的（注意：Color的所有内容只是要将一些数据放在表格中）

private static Node makeTable() {
    TableView<Color> table = new TableView<>(FXCollections.observableArrayList(Color.ALICEBLUE, Color.CHARTREUSE, Color.GOLDENROD));
    TableColumn<Color, Double> col1 = new TableColumn<>("Red");
    TableColumn<Color, Double> col2 = new TableColumn<>("Green");
    TableColumn<Color, Double> col3 = new TableColumn<>("Blue");
    col1.setCellValueFactory(new PropertyValueFactory<>("red"));
    col2.setCellValueFactory(new PropertyValueFactory<>("green"));
    col3.setCellValueFactory(new PropertyValueFactory<>("blue"));
    table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
    table.getColumns().setAll(Arrays.asList(col1, col2, col3));
    return table;
}

有没有办法将表格调整为内容并将其修复？

我在桌面上尝试了setMaxHeight和setPrefHeight USE_PREF_SIZE和USE_COMPUTED_SIZE，但没效果

Answer 1

该表首先显示的行数多于我的行数

这是TableView的默认样式。您可以通过自定义表格单元格的CSS来隐藏它们。但随后出现了另一个问题，tableview仍会显示没有行的空白区域。但是，如果数字或项目（行）是固定的，则这两个问题都可以解决。这可以通过简单地设置tableview的首选宽度和高度来实现：

table.setPrefSize( 300, 100 );

其次，当我调整主窗口的大小时也会调整大小

这是VBox的默认行为。这里将tableview放到另一个不能直接调整大小的Parent，将解决调整大小问题。大多数时候，好的候选人是Group。

Group group = new Group( table );

其他视觉布局提示：

将VBox孩子对齐为居中：root.setAlignment( Pos.CENTER );
为Vbox提供一些填充：root.setPadding( new Insets( 15 ) );

对您的代码进行全面修改：

@Override
public void start( Stage primaryStage )
{
    LineChart<Number, Number> chart = new LineChart<>( new NumberAxis(), new NumberAxis() );

    Node table = makeTable();
    Group group = new Group( table );

    VBox.setVgrow( chart, Priority.ALWAYS );
    VBox.setVgrow( group, Priority.NEVER );
    VBox root = new VBox( chart, group );
    root.setAlignment( Pos.CENTER );
    root.setPadding( new Insets( 15 ) );
    Scene scene = new Scene( root, 300, 250 );

    primaryStage.setScene( scene );
    primaryStage.show();
}


private static Node makeTable()
{
    TableView<Color> table = new TableView<>( FXCollections.observableArrayList( Color.ALICEBLUE, Color.CHARTREUSE, Color.GOLDENROD ) );
    TableColumn<Color, Double> col1 = new TableColumn<>( "Red" );
    TableColumn<Color, Double> col2 = new TableColumn<>( "Green" );
    TableColumn<Color, Double> col3 = new TableColumn<>( "Blue" );
    col1.setCellValueFactory( new PropertyValueFactory<>( "red" ) );
    col2.setCellValueFactory( new PropertyValueFactory<>( "green" ) );
    col3.setCellValueFactory( new PropertyValueFactory<>( "blue" ) );
    table.setColumnResizePolicy( TableView.CONSTRAINED_RESIZE_POLICY );
    table.setPrefSize( 300, 100 );
    table.getColumns().setAll( Arrays.asList( col1, col2, col3 ) );
    return table;
}

VBox中TableView的大小

1 个答案: