Question

我想为我的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);
        }
    }
}

}

Answer 1

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

在您的示例代码中，您已经扩展了Pane，因此请删除所有网格代码，然后执行以下操作：

getChildren().addAll(view, goButton);

而不是：

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

修改goButton的布局属性，将其放置在父级中，该父级不管理其子级的布局位置，例如：你可以致电goButton.relocate(xPos, yPos)。

您在覆盖的layoutChildren方法中有一些自定义内容，可能会破坏默认的Pane布局处理逻辑。覆盖layoutChildren更像是一个高级布局主题，我不会为初学者提供建议。

googleoverlaid

以下是您可以查看的更新示例，其中使用了本答案中提到的一些概念。

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())
        );
    }
}

在GridPane中将按钮放在webView的顶部

1 个答案: