Gluon Mobile应用iPhone端setBottom绑定Pane与底部滑动指示器间距不足问题

问题原因 #

你遇到的是iOS带底部手势滑动条设备的安全区适配问题，自定义底部组件默认会延伸到安全区以外，导致内容被手势条遮挡。

解决步骤 #

1. 导入Gluon提供的安全区工具类

import com.gluonhq.charm.glisten.util.SafeInsets;
import javafx.geometry.Insets;

2. 修改自定义底部导航的代码，给HBox增加底部安全区对应的高度和内边距即可，调整后的完整代码如下：

public HBox bottomNav(Sessions sessions, Session session, String uid, String pass) {
    HBox tabBar = new HBox();
    tabBar.setAlignment(Pos.CENTER);
    tabBar.setSpacing(40);
    // 获取iOS底部安全区高度，安卓设备该值自动为0，无需额外适配
    double bottomSafeInset = SafeInsets.BOTTOM.get();
    // 原有导航高度+安全区高度作为总高度
    tabBar.setPrefHeight(50 + bottomSafeInset);
    // 给HBox加底部内边距，让导航内容全部显示在安全区上方
    tabBar.setPadding(new Insets(0, 0, bottomSafeInset, 0));
    
    Button home = new Button();
    home.setStyle("-fx-background-radius: 50; -fx-background-color: rgb(0, 0, 0, 0);");
    Icon homeicon = new Icon(MaterialDesignIcon.HOME);
    home.setGraphic(homeicon);
    home.setOnAction(e -> {
        homeScreen(sessions, session, uid, pass);
    });
    
    Button newSession = new Button();
    newSession.setId("newSession");
    newSession.setPrefSize(50, 50);
    Pane pane = new Pane(newSession);
    Icon sessionicon = new Icon(MaterialDesignIcon.ADD_CIRCLE_OUTLINE);
    newSession.setGraphic(sessionicon);
    newSession.setOnAction(e -> {
        sessionicon.setStyle("-fx-background-color: rgb(253, 181, 21);");
        startSession(sessions, session, uid, pass);
    });
    
    Button settings = new Button();
    settings.setStyle("-fx-background-radius: 50; -fx-background-color: rgb(0, 0, 0, 0);");
    Icon settingsicon = new Icon(MaterialDesignIcon.SETTINGS);
    settings.setGraphic(settingsicon);
    settings.setOnAction(e -> {
        getApplication().getDrawer().open();
    });
    
    tabBar.getChildren().addAll(home, pane, settings);
    tabBar.setStyle("-fx-background-color: rgb(253, 181, 21, 0.5);");
    return tabBar;
}

效果参考 #

• 理想效果：
  
• 调整前实际效果：
  

内容的提问来源于stack exchange，提问作者cocobeans