JavaFX实现UI美观效果代码实例

JavaFX是一种强大的图形用户界面（GUI）框架，用于构建桌面、移动和嵌入式平台的应用程序。相较于Swing，JavaFX提供了更为丰富的UI组件和更高级的视觉效果，使得开发者能够创建出美观、现代的用户界面。在JavaFX中，通过结合FXML布局文件和CSS样式表，可以轻松实现界面的美化。 1. JavaFX CSS语法 JavaFX的CSS语法与标准HTML CSS类似，允许使用类选择器、组合选择符和伪元素。不过，JavaFX CSS特性的前缀是"-fx-"，例如设置最小高度、最大高度和字体大小： ```css /* CSS 样式 */ .min-height { min-height: 46; } .max-height { max-height: 46; } .font-size { font-size: 18; } /* JavaFX CSS 样式 */ .fx-min-height { -fx-min-height: 46; } .fx-max-height { -fx-max-height: 46; } .fx-font-size { -fx-font-size: 18; } ``` 2. 美化控件 使用CSS可以直接在控件上定义样式，从而改变控件的外观。例如，我们可以美化一个按钮，使其看起来更吸引人： ```xml <Button text="Go." style="-fx-min-height: 30; -fx-min-width: 80; -fx-background-color: #337ab7;"> </Button> ``` 这将创建一个具有自定义尺寸和背景颜色的按钮，使得界面更具吸引力。 3. 使用CSS样式表进行美化 在大型项目中，直接在每个控件上写CSS样式并不利于维护。此时，可以将样式写入外部CSS文件，并通过类选择器引用它们。例如，创建一个名为`AppUI.css`的CSS文件，包含以下内容： ```css .go { -fx-text-fill: white; -fx-min-height: 30; -fx-min-width: 80; -fx-background-color: #337ab7; } ``` 然后在FXML文件中，通过`stylesheets`属性引用这个样式表，并使用`styleClass`属性将样式绑定到控件： ```xml <BorderPane prefHeight="400.0" prefWidth="600.0" stylesheets="@AppUI.css"> ... <Button onAction="#click" text="Go." styleClass="go"> ... </BorderPane> ``` 这样，所有的按钮美化样式都集中在一个地方，便于管理和更新。 4. Maven配置 如果你的项目使用Maven管理，需要确保在`pom.xml`文件中配置相关的插件，以便在构建时将CSS文件复制到类路径中，以便JavaFX可以访问它们。例如，添加`maven-resources-plugin`插件： ```xml <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <version>3.2.0</version> <configuration> <resources> <resource> <directory>src/main/resources</directory> <includes> <include>**/*.css</include> </includes> <targetPath>.</targetPath> </resource> </resources> </configuration> </plugin> </plugins> </build> ``` 总结： JavaFX通过结合FXML和CSS，为开发者提供了丰富的工具来创建美观的用户界面。理解JavaFX的CSS语法并学会使用样式表进行控件美化是提升应用程序用户体验的关键步骤。通过合理的项目结构和Maven配置，可以确保CSS资源在运行时正确加载，从而实现高效的UI设计和维护。