Java 如何在画布上放置由网格窗格定位的颜色选择器

我有3个颜色选择器，使用网格窗格定位，我也使用画布。但问题是，画布会将网格窗格推到屏幕底部。因此，如果我使用

root.add（HeadColor，0,1）（将第一个颜色选择器添加到第0列和第1列的网格窗格中），因为网格窗格在网格窗格下面开始，颜色选择器在屏幕中间某个位置定位。所以我的问题是，如何将网格窗格放置在画布的顶部，或者如何将颜色选择器放置在画布的顶部

我使用的代码：

package gui;

import display.Image;
import java.awt.Button;
import java.io.IOException;
import java.util.logging.*;
import javafx.application.Application;
import javafx.event.*;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.canvas.*;
import javafx.scene.control.ColorPicker;
import javafx.scene.layout.*;
import javafx.scene.layout.VBox;
import javafx.scene.paint.*;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class JavaFXColorPicker extends Application {
private Image head;
private Image heart;

ColorPicker HeadColor = new ColorPicker();
ColorPicker BodyColor = new ColorPicker();
ColorPicker LegColor = new ColorPicker();

@Override
public void start(Stage primaryStage) throws IOException {

    GridPane root = new GridPane();
    final Canvas canvas = new Canvas(200,300);

    Scene scene = new Scene(root, 500, 400, Color.BLACK);   
    GraphicsContext gc = canvas.getGraphicsContext2D();
    root.setHgap(10);
    root.setVgap(10);
    root.setPadding(new Insets(10, 30, 30, 30));

    HeadColor.setOnAction(new EventHandler(){ 
        @Override
        public void handle(Event event) {
            Color HeadPaint = HeadColor.getValue();
            Color[] HeadColorArray = new Color[]
                {
                    new Color(0 , 0, 0, 1),
                    HeadPaint,
                    HeadPaint,
                    HeadPaint,
                    HeadPaint,
                    new Color(1, 1, 1, 1) // de ogen
                 };

            try {
                head = new display.Image(display.Parts.playerHead);
            } catch (IOException ex) {
                Logger.getLogger(JavaFXColorPicker.class.getName())
                        .log(Level.SEVERE, null, ex);
            }

            head.recolour(HeadColorArray);
            Image i = head;
            gc.drawImage(i.show(), 200, 100);
        }
    });

    root.getChildren().add(canvas);
    root.add(HeadColor, 0, 1); 
    root.add(BodyColor, 0, 2); 
    root.add(LegColor,0,3);

    primaryStage.setTitle("Customize Character!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

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

问题是：

root.getChildren().add(canvas);

各国：

如果未显式设置行/列索引，则子项将放置在第一行/列中

将行和列分配给画布，就像您使用颜色选择器一样。
您将画布添加到了哪一行？如果您希望画布位于颜色选择器的下方，也许您应该将其放置在比任何颜色选择器使用的行更高的行中。