美文网首页JAVA开发
用CSS美化你的JavaFX界面

用CSS美化你的JavaFX界面

作者: 陶然然_niit | 来源:发表于2018-12-03 14:22 被阅读0次

    1.原型参照


    LayuiAmin Pro后台管理系统模板

    2.系统性地设计你的CSS
    主要设计了全局字体、按钮基础样式、按钮圆角、按钮悬停样式、各种配色主题样式、单选、复选框样式、标题字体、普通字体、输入框、导航菜单样式等。

    /*全局字体样式*/
.root {
   -fx-font-size: 14px;
}

/*按钮基础样式*/
.btn-basic {
   /*文本对齐方式*/
   -fx-text-alignment: center;
   /*合适高度*/
   -fx-pref-height: 38px;
   /*内边距*/
   -fx-padding: 0 18px;
   /*无边框*/
   -fx-border-style: none;
   /*鼠标样式*/
   -fx-cursor: pointer;
}

/*鼠标覆盖按钮效果*/
.btn-basic:hover {
   /*粗体*/
   -fx-font-weight: bold;
   /*透明度*/
   -fx-opacity: 0.8;
}

/*边框正常弧度按钮*/
.btn-radius-normal {
   -fx-border-radius: 2px;
   -fx-background-radius: 2px;
}

/*边框圆角按钮*/
.btn-radius-large {
   -fx-border-radius: 50px;
   -fx-background-radius: 50px;
}

/*默认主题*/
.default-theme {
   -fx-background-color: #fff;
   -fx-border-color: rgb(230, 230, 230);
   -fx-text-fill: rgb(110, 110, 110);
}
/*深灰色主题*/
.dark-gray-theme {
   -fx-background-color: rgb(58, 61, 73);
}
/*深色主题*/
.dark-theme {
   -fx-background-color: rgb(40, 43, 51);
}

/*绿色主题*/
.green-theme {
   -fx-background-color: #009688;
   -fx-text-fill: #fff;
}

/*灰色主题*/
.gray-theme {
   -fx-background-color: rgb(210, 210, 210);
   -fx-text-fill: #fff;
}

/*警告色主题*/
.warning-theme {
   -fx-background-color: rgb(254, 87, 34);
   -fx-text-fill: #fff;
}

/*暖色主题*/
.warm-theme {
   -fx-background-color: rgb(254, 184, 0);
   -fx-text-fill: #fff;
}

/*蓝色主题*/
.blue-theme {
   -fx-background-color: rgb(30, 158, 255);
   -fx-text-fill: #fff;
}

/*内容盒子样式，设置一下圆角和内边距*/
.box {
   -fx-border-color: rgb(162, 162, 162);
   -fx-border-radius: 5px;
   -fx-background-radius: 5px;
   -fx-padding: 5 5 5 5;
}

/*输入框样式*/
.input-group {
   /*对齐方式*/
   -fx-text-alignment: left;
   /*内容显示方式*/
   -fx-content-display: inline-block;
   /*合适高度*/
   -fx-pref-height: 30px;
   /*边框色*/
   -fx-border-color: rgb(230, 230, 230);
   /*提示文字颜色*/
   -fx-prompt-text-fill: rgb(162, 162, 162);
   /*输入文字颜色*/
   -fx-text-fill: rgb(110, 110, 110);
   /*边框圆角*/
   -fx-border-radius: 2px;
   -fx-background-radius: 2px;
   /*内边距*/
   -fx-padding: 5 5 5 5;
   /*鼠标形状*/
   -fx-cursor: pointer;
}

/*白色字体*/
.font-white {
   -fx-text-fill: #fff;
}

/*灰色字体*/
.font-gray {
   -fx-text-fill: rgb(110, 110, 110);
}

/*标题字体*/
.font-title {
   -fx-font-size: 18px;
   -fx-font-weight: bold;
}

/*复选框样式*/
.check-box .box {
   -fx-background-color: #fff;
   -fx-border-color: rgb(230, 230, 230);
   -fx-border-radius: 3px;
}

/*复选框选中后标记的颜色*/
.check-box:selected .mark {
   -fx-background-color: #fff;
}

/*复选框选中后背景色*/
.check-box:selected .box {
   -fx-background-color: rgb(95, 184, 120);
}

/*单选按钮样式*/
.radio-button .radio {
   -fx-background-color: #fff;
   -fx-border-color: rgb(230, 230, 230);
   -fx-border-radius: 100;
}

/*单选按钮中间点的颜色*/
.radio-button:selected .dot {
   -fx-background-color: #fff;
}

/*单选按钮选中后背景色*/
.radio-button:selected .radio {
   -fx-background-color: rgb(95, 184, 120);
}

/*表格内容居中显示*/
.table-view .table-column {
   -fx-alignment: center;
}

/*左侧导航菜单按钮样式*/
.menu-btn {
   -fx-pref-width: 300px;
   -fx-pref-height: 35px;
   -fx-background-color: rgb(40, 43, 51);
   -fx-text-fill: rgb(191, 192, 194);
}

/*左侧导航菜单按钮鼠标悬停效果*/
.menu-btn:hover {
   -fx-background-color: rgb(95, 184, 120);
   -fx-text-fill: #fff;
}

/*风琴标题面板字体颜色*/
.titled-pane {
   -fx-text-fill: rgb(174, 175, 180);
}

/*风琴标题面板背景色*/
.titled-pane > .title {
   -fx-background-color: rgb(58, 61, 73);
   -fx-padding: 30 10 10 10;
}

    3.样式的使用

    • fxml文件中使用
            <Button text="默认按钮" styleClass="btn-basic,green-theme,btn-radius-normal"/>
    • Java代码中使用
       Button myButton = new Button("圆角按钮");
   myButton.getStyleClass().add("border-button");

    4.完整的使用了CSS的main.fxml布局文件

    <?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<BorderPane
       styleClass="green-theme"
       xmlns:fx="http://javafx.com/fxml"
       fx:controller="com.soft1841.book.controller.MainController">
   <top>
       <AnchorPane prefHeight="80.0">
           <Label text="图书后台管理系统" styleClass="font-gray" onMouseClicked="#listDefault"
                  AnchorPane.topAnchor="20" AnchorPane.leftAnchor="10">
               <effect>
                   <Reflection bottomOpacity="0.2" fraction="0.5" topOffset="-5.0"/>
               </effect>
               <font>
                   <Font name="System Bold" size="26.0"/>
               </font>
           </Label>
           <ImageView fitWidth="45" fitHeight="45" AnchorPane.topAnchor="15" AnchorPane.rightAnchor="120">
               <Image url="/img/me.png"/>
           </ImageView>
           <Button text="退出系统" styleClass="btn-radius-large,blue-theme"
                   AnchorPane.topAnchor="20" AnchorPane.rightAnchor="20"/>
       </AnchorPane>
   </top>
   <center>
       <SplitPane>
           <AnchorPane styleClass="dark-gray-theme" minWidth="200">
               <Accordion AnchorPane.leftAnchor="0.0"
                          AnchorPane.rightAnchor="0.0"
                          AnchorPane.topAnchor="0.0">
                   <panes>
                       <TitledPane alignment="TOP_LEFT" text="类别管理">
                           <VBox minHeight="100" spacing="10" styleClass="dark-theme">
                               <Button styleClass="menu-btn" text="图书类别" onAction="#listType"/>
                               <Button styleClass="menu-btn" text="分类统计"/>
                           </VBox>
                       </TitledPane>
                       <TitledPane alignment="TOP_LEFT" text="图书管理">
                           <VBox minHeight="100" spacing="10" styleClass="dark-theme">
                               <Button styleClass="menu-btn" text="图书信息" onAction="#listBook"/>
                               <Button styleClass="menu-btn" text="统计分析"/>
                           </VBox>
                       </TitledPane>
                       <TitledPane alignment="TOP_LEFT" text="用户管理">
                           <VBox minHeight="130" spacing="10" styleClass="dark-theme">
                               <Button styleClass="menu-btn" text="管理员信息"/>
                               <Button styleClass="menu-btn" text="读者信息"/>
                               <Button styleClass="menu-btn" text="统计分析"/>
                           </VBox>
                       </TitledPane>
                       <TitledPane alignment="TOP_LEFT" text="借阅管理">
                           <VBox minHeight="130" spacing="10" styleClass="dark-theme">
                               <Button styleClass="menu-btn" text="借阅查询"/>
                               <Button styleClass="menu-btn" text="统计分析"/>
                           </VBox>
                       </TitledPane>
                       <TitledPane alignment="TOP_LEFT" text="系统维护">
                           <VBox minHeight="130" spacing="10" styleClass="dark-theme">
                               <Button styleClass="menu-btn" text="系统初始化"/>
                               <Button styleClass="menu-btn" text="数据备份"/>
                               <Button styleClass="menu-btn" text="主题设置"/>
                           </VBox>
                       </TitledPane>
                   </panes>
               </Accordion>
           </AnchorPane>

           <!--中间内容面板-->
           <StackPane fx:id="mainContainer" styleClass="default-theme" minWidth="1060">
               <padding>
                   <Insets top="10" left="30" bottom="5" right="10"/>
               </padding>
           </StackPane>
           <padding>
               <Insets top="10"/>
           </padding>
       </SplitPane>
   </center>
</BorderPane>

    5.效果


    fxml+css实现效果

    相关文章

      网友评论

        本文标题：用CSS美化你的JavaFX界面

        本文链接：https://www.haomeiwen.com/subject/gnlycqtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        JAVA开发

        关于我们|服务条款|联系我们|用CSS美化你的JavaFX界面|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！