javafx sdk html 布局,JavaFX登录页面简单实现

一、准备工作

准备好javaFX开发环境，请详见我上篇文章https://www.sdk.cn/details/wAe9P8mXAq5dbqDl4y

二、项目结构

三、启动类创建Stage

public class Main extends Application {

/**

* 任务目标

* 使用javaFX 创建一个表单登录页面

* */

@Override

public void start(Stage primaryStage) throws Exception{

Parent root = FXMLLoader.load(Objects.requireNonNull(getClass().getResource("/fxml/login/index.fxml")));

primaryStage.setTitle("天桥登录页面");

Scene scene = new Scene(root);

primaryStage.setScene(scene);

primaryStage.setMaximized(false);

primaryStage.setMaxHeight(600);

primaryStage.setMaxWidth(1300);

//设置窗口的图标.

primaryStage.getIcons().add(new Image(

getClass().getResourceAsStream("/img/top_left_logo.png")));

primaryStage.show();

}

public static void main(String[] args) {

launch(args);

}

}

四、创建简单的fxml文件

xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">

五、使用javaFX SceneBuilder可视化组件

javaFX SceneBuilder是什么？详情请见我上篇文章https://www.sdk.cn/details/wAe9P8mXAq5dbqDl4y

打开是这样

六、布局

这里可能需要一点点前端知识，跟H5的div布局类似，但是javaFX细分了一些组件

原始页面：

分隔页面：

整体页面我使用了BorderPane(上下左右中，比较好布局)，上下结构布局使用VBox,左右接口布局使用HBox，反正确定好布局后就是拖组件，然后调试调试

六、调整好后的fxml

七、css

.body{

-fx-background-color: white;

}

.leftpane{

-fx-background-color: #262626;

-fx-background-repeat: stretch;

-fx-background-size: auto;

-fx-background-position: center center;

}

.login_username_input{

/*去除默认样式*/

-fx-background-insets: 0;

-fx-background-color: #fff;

}

.login_password_input{

/*去除默认样式*/

-fx-background-insets: 0;

-fx-background-color: #fff;

}

.login_username{

-fx-background-image: url("../img/loginIcon.png");

-fx-background-repeat: no-repeat;

-fx-background-position: -58px -4px;

}

.login_password{

-fx-background-image: url("../img/loginIcon.png");

-fx-background-repeat: no-repeat;

-fx-background-position: -28px -3px;

}

.login_btn{

-fx-background-insets: 0;

-fx-background-color: rgb(3, 197, 255);

-fx-fill:#fff;

}

.login_jump{

-fx-background-image: url("../img/loginIcon.png");

-fx-background-repeat: no-repeat;

-fx-background-position: -52px -37px;

}

八、效果(应评论要求，上才艺)