javafx Scene Builder入门教学之制作一个简单的页面

忘是亡心i 2021-10-12 20:37 464阅读 0赞

### ***申明：我不是资料搬运工，我只是记录一些我实际遇到的问题以及解决方案*** ###

### **最终效果如下** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

**包含的主要内容有**

1、如何设置背景颜色、边框颜色以及字体颜色

2、多个文本如何对齐

3、如何布局出自己想要的效果

**参考的资料**

eclipse如何安装javafx

[javafx中插入image view图像 如何调整图片大小，不是等比例放大    ][javafx_image view_ _]

[javafx Scene Builder如何设置按钮的背景颜色以及字体颜色 ][javafx Scene Builder_]

[javafx scene如何设置多个文本垂直对齐 ][javafx scene_]

[javafx Scene Builder设置textFiled的背景颜色、边框颜色以及字体颜色][javafx_image view_ _]

--------------------

附上实现上面效果的.fxml代码

<?xml version="1.0" encoding="UTF-8"?>
    
    <?import java.lang.*?>
    <?import java.net.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.image.*?>
    <?import javafx.scene.layout.*?>
    <?import javafx.scene.layout.AnchorPane?>
    <?import javafx.scene.paint.*?>
    <?import javafx.scene.shape.*?>
    <?import javafx.scene.text.*?>
    
    <AnchorPane prefHeight="766.0001220703125" prefWidth="747.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="application.MyCon">
      
      <children>
        <Text layoutX="295.0" layoutY="28.0" scaleX="3.9095259458651115" scaleY="2.432368163379494" strokeType="OUTSIDE" strokeWidth="0.0" text="冬瓜山实时位移检测数据" />
        <ImageView fitHeight="429.560546875" fitWidth="405.9136962890625" layoutX="5.0" layoutY="59.0" pickOnBounds="true" preserveRatio="false">
          <image>
            <Image url="file:/C:/Users/Administrator/Desktop/1.png" />
          </image>
        </ImageView>
        <Text layoutX="448.0" layoutY="63.0" scaleX="2.6227616802394635" scaleY="2.7552219919635594" strokeType="OUTSIDE" strokeWidth="0.0" text="检测范围">
          <font>
            <Font size="8.0" />
          </font>
        </Text>
        <Button id="btn" contentDisplay="CENTER" layoutX="532.0" layoutY="51.0" mnemonicParsing="false" prefHeight="25.647308349609375" style="  -fx-background-color:red;
    " styleClass="null" text="0m - 5m" underline="false" wrapText="false">
          <textFill>
            <Color blue="0.000" green="1.000" red="0.800" fx:id="x1" />
          </textFill>
        </Button>
        <Button id="btn" contentDisplay="CENTER" layoutX="422.0" layoutY="94.0" mnemonicParsing="false" prefHeight="26.0" prefWidth="80.0" style="  -fx-background-color:red;
    " styleClass="null" text="0m - 5m" textFill="$x1" underline="false" wrapText="false" />
        <Button id="btn" contentDisplay="CENTER" layoutX="532.0" layoutY="94.0" mnemonicParsing="false" prefHeight="26.0" prefWidth="80.0" style="  -fx-background-color:red;
    " styleClass="null" text="5m-10m" textFill="$x1" underline="false" wrapText="false" />
        <Button id="btn" contentDisplay="CENTER" layoutX="634.0" layoutY="94.0" mnemonicParsing="false" prefHeight="25.647308349609375" style="  -fx-background-color:red;
    " styleClass="null" text="10m-15m" textFill="$x1" underline="false" wrapText="false" />
        <Button id="btn" contentDisplay="CENTER" layoutX="422.0" layoutY="137.0" mnemonicParsing="false" prefHeight="26.0" prefWidth="80.0" style="  -fx-background-color:red;
    " styleClass="null" text="15m-20m" textFill="$x1" underline="false" wrapText="false" />
        <Button id="btn" contentDisplay="CENTER" layoutX="633.0" layoutY="137.0" mnemonicParsing="false" prefHeight="25.647308349609375" style="  -fx-background-color:red;
    " styleClass="null" text="25m-30m" textFill="$x1" underline="false" wrapText="false" />
        <Button id="btn" contentDisplay="CENTER" layoutX="532.0" layoutY="137.0" mnemonicParsing="false" prefHeight="25.647308349609375" style="  -fx-background-color:red;
    " styleClass="null" text="20m-25m" textFill="$x1" underline="false" wrapText="false" />
        <Button id="btn" contentDisplay="CENTER" layoutX="422.0" layoutY="186.0" mnemonicParsing="false" prefHeight="25.647308349609375" style="  -fx-background-color:red;
    " styleClass="null" text="30m-35m" textFill="$x1" underline="false" wrapText="false" />
        <Text fill="#1000cc" layoutX="437.0" layoutY="246.0" scaleX="1.6446962859908134" scaleY="2.509306065733269" strokeType="OUTSIDE" strokeWidth="0.0" text="测点位移" textAlignment="CENTER" />
        <Text layoutX="435.0" layoutY="289.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A0位移" />
        <Text layoutX="435.0" layoutY="317.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="B0位移" />
        <Text layoutX="435.0" layoutY="347.0" scaleX="1.2006662747403487" scaleY="1.8191486927024192" strokeType="OUTSIDE" strokeWidth="0.0" text="C0位移" />
        <TextField layoutX="486.0" layoutY="276.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="612.0" layoutY="274.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="486.0" layoutY="331.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="486.0" layoutY="306.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <Text layoutX="564.0" layoutY="293.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A1位移" />
        <Text layoutX="564.0" layoutY="322.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="B1位移" />
        <Text layoutX="564.0" layoutY="349.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="C1位移" />
        <Text layoutX="435.0" layoutY="408.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="E0位移" />
        <Text layoutX="435.0" layoutY="382.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D0位移" />
        <Text layoutX="564.0" layoutY="380.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" />
        <TextField layoutX="486.0" layoutY="365.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="612.0" layoutY="339.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="612.0" layoutY="306.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="486.0" layoutY="393.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="612.0" layoutY="367.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <Text layoutX="564.0" layoutY="410.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" />
        <Text layoutX="435.0" layoutY="442.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" />
        <Text layoutX="564.0" layoutY="438.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" />
        <Text layoutX="564.0" layoutY="474.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" />
        <Text layoutX="435.0" layoutY="478.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="D1位移" />
        <TextField layoutX="486.0" layoutY="429.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="486.0" layoutY="461.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="612.0" layoutY="433.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="612.0" layoutY="404.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="612.0" layoutY="461.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <Button layoutX="537.0" layoutY="608.0" mnemonicParsing="false" prefHeight="36.0" prefWidth="96.0" style="-fx-background-color:#3385ff;
    -fx-text-fill:white;
    " text="位移曲线" />
        <Circle fill="$x1" layoutX="50.0" layoutY="538.0" radius="13.75" stroke="#fff733" strokeType="INSIDE" />
        <Circle fill="#ff33c6" layoutX="50.0" layoutY="573.0" radius="13.75" stroke="#ff007a" strokeType="INSIDE" />
        <Circle fill="#33e7ff" layoutX="50.0" layoutY="612.0" radius="13.75" stroke="#00e0ff" strokeType="INSIDE" />
        <Circle fill="#ff3d00" layoutX="50.0" layoutY="651.0" radius="13.75" stroke="#cc0000" strokeType="INSIDE" />
        <Text layoutX="91.0" layoutY="540.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A0位移" />
        <Text layoutX="91.0" layoutY="658.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A0位移" />
        <Text layoutX="91.0" layoutY="575.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A0位移" />
        <Text layoutX="91.0" layoutY="616.0" scaleX="1.2006662747403487" scaleY="1.5729472653517975" strokeType="OUTSIDE" strokeWidth="0.0" text="A0位移" />
        <TextField layoutX="159.0" layoutY="526.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="159.0" layoutY="561.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="159.0" layoutY="597.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
        <TextField layoutX="159.0" layoutY="643.0" prefHeight="26.0" prefWidth="60.0" style="-fx-background-color:green;
    -fx-border-color:yellow;
    -fx-text-fill:white;
    " text="0.02m" />
      </children>
    </AnchorPane>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20211013/8338332355e6411c83354ea3a5fce2fa.png
[javafx_image view_ _]: https://blog.csdn.net/qq_37591637/article/details/99713932
[javafx Scene Builder_]: https://blog.csdn.net/qq_37591637/article/details/99712682
[javafx scene_]: https://blog.csdn.net/qq_37591637/article/details/99713159