将按钮放在 GridPane 中的 webView 顶部

Posted 2023-02-26

【中文标题】将按钮放在 GridPane 中的 webView 顶部

【英文标题】：Place button on top of webView in GridPane

【发布时间】：2013-05-17 00:09:25

【问题描述】：

我想为我的 webView 创建一个刷新按钮，该按钮将位于视图顶部（即使它隐藏了视图的一部分），当我将按钮放在网格窗格上时，它会将 webView 向下或推到一边（取决于我放置按钮的位置）

如何将“刷新”按钮放在 webView 顶部而不将其移到一边？

import java.util.List;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class webviewbrowser extends Application 

@Override public void start(Stage primaryStage) throws Exception 
    Pane root = new WebViewPane();
    primaryStage.setScene(new Scene(root, 1024, 768));
    primaryStage.setFullScreen(true);
    primaryStage.show();

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


/**
 * Create a resizable WebView pane
 */
public class WebViewPane extends Pane 

    public WebViewPane() 
        VBox.setVgrow(this, Priority.ALWAYS);
        setMaxWidth(Double.MAX_VALUE);
        setMaxHeight(Double.MAX_VALUE);

        WebView view = new WebView();
        view.setMinSize(500, 400);
        view.setPrefSize(500, 400);
        final WebEngine eng = view.getEngine();
        eng.load("http://google.com");
        //final TextField locationField = new TextField("http://www.google.com");
        //locationField.setMaxHeight(Double.MAX_VALUE);
        Button goButton = new Button("Refresh");
        goButton.setDefaultButton(true);

        EventHandler<ActionEvent> goAction = new EventHandler<ActionEvent>() 
            @Override public void handle(ActionEvent event) 
                eng.reload();
            
        ;
        goButton.setOnAction(goAction);

        GridPane grid = new GridPane();
        grid.setVgap(0);
        grid.setHgap(0);

        GridPane.setConstraints(goButton,2,0,2,1, HPos.RIGHT, VPos.BOTTOM, Priority.ALWAYS, Priority.ALWAYS);
        GridPane.setConstraints(view, 0, 0, 2, 1, HPos.CENTER, VPos.CENTER, Priority.SOMETIMES, Priority.SOMETIMES);
        grid.getColumnConstraints().addAll(
                new ColumnConstraints(100, 100, Double.MAX_VALUE, Priority.ALWAYS, HPos.CENTER, true),
                new ColumnConstraints(40, 40, 40, Priority.NEVER, HPos.CENTER, true)
        );
        grid.getChildren().addAll(goButton, view);
        getChildren().add(grid);
    

    @Override protected void layoutChildren() 
        List<Node> managed = getManagedChildren();
        double width = getWidth();
        double height = getHeight();
        double top = getInsets().getTop();
        double right = getInsets().getRight();
        double left = getInsets().getLeft();
        double bottom = getInsets().getBottom();
        for (int i = 0; i < managed.size(); i++) 
            Node child = managed.get(i);
            layoutInArea(child, left, top,
                           width - left - right, height - top - bottom,
                           0, Insets.EMPTY, true, true, HPos.CENTER, VPos.CENTER);
        
    

【参考方案1】：

如果您想将一个组件堆叠在另一个组件之上，请不要使用 GridPane 进行布局，而是使用允许布局组件相互叠加的父级。例如，标准Pane、StackPane、Group 或Region。在这些堆叠样式布局中，组件按照子组件在父子列表中的位置顺序呈现。

在您的示例代码中，您已经在扩展 Pane，因此请去掉所有网格代码并执行以下操作：

getChildren().addAll(view, goButton);

代替：

grid.getChildren().addAll(goButton, view);

修改 goButton 的布局属性以将其定位在不管理其子级布局位置的父级中，例如您可以拨打goButton.relocate(xPos, yPos)。

您在覆盖的 layoutChildren 方法中有一些自定义内容，可能会弄乱默认的窗格布局处理逻辑。覆盖 layoutChildren 更像是一个高级布局主题，我不建议初学者使用它。

这是一个更新的示例，您可以查看它使用了此答案中提到的一些概念。

import javafx.application.Application;
import javafx.event.*;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.scene.web.*;
import javafx.stage.Stage;

public class WebViewBrowser extends Application 
    @Override public void start(Stage stage) throws Exception 
        stage.setScene(new Scene(new WebViewPane("http://google.com")));
        stage.setFullScreen(true);
        stage.show();
    

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


class WebViewPane extends Pane 
    final WebView view     = new WebView();
    final Button  goButton = createGoButton(view.getEngine());

    public WebViewPane(String initURL) 
        view.getEngine().load(initURL);

        getChildren().addAll(
            view, 
            goButton
        );

        initLayout();
    

    private Button createGoButton(final WebEngine eng) 
        Button go = new Button("Refresh");
        go.setDefaultButton(true);
        go.setOnAction(new EventHandler<ActionEvent>() 
            @Override public void handle(ActionEvent event) 
                eng.reload();
            
        );

        return go;
    

    private void initLayout() 
        setMinSize(500, 400);
        setPrefSize(1024, 768);

        view.prefWidthProperty().bind(widthProperty());
        view.prefHeightProperty().bind(heightProperty());

        goButton.setLayoutX(10);
        goButton.layoutYProperty().bind(
            heightProperty().subtract(20).subtract(goButton.heightProperty())
        );