【IntelliJ IDEA 2019.2 + jdk8】java fx 绘制界面

墨蓝 2021-09-21 01:56 488阅读 0赞

# 加入按钮 #

参考：[https://blog.csdn.net/weixin\_41571493/article/details/81415327][https_blog.csdn.net_weixin_41571493_article_details_81415327]

通过FX的 helloworld例程，可以发现，第一句语句就是调用fxml文件，

Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));

由此，可以看出，想要什么样的界面，只需编辑fxml文件就行，

当你点开fxml文件时，会发现有两个视图，一种是Text(左图)，一种是 Scene Builder(右图)。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 1][]

和C\#， Android Studio 一样的操作方式,而且操作方式也大同小异。比如，当要画一个按钮时，在 Scene Builder 模式下，把Button拖拽出来即可。

运行的效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 2][]

按钮画出来了，那么，怎么把按钮和代码联系起来呢？也就是按一下按钮，就去做相应的事情。

在Scence Builder界面选中按钮，右边就会出现属性栏，点开 Code:Button项，再点开On Action 项，在方框里填入函数名，如下图中填入了“Button\_Test\_Do”，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 3][]

再退回 Text模式，就发现多了一个红色的 "Button\_Test\_Do"的字符串。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 4][]

把鼠标移到红色字符上，就会提示解决方法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 5][]

点击“Create mothod 'Button\_Test\_Do' in 'Controller' ”就会在 Controller.java 文件里生成代码，如下所示，接下来，我们需要按钮按下的时候做什么，在里面添加代码就行。

![20201110161650403.png][]

## 在程序里改变控件显示值 ##

### 下面以在程序里改变button显示值为例。 ###

代码为：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 6][]

有两个易错点，

### 易错点1： ###

是 javafx.scene.control.Button 也不是 Button，如上图红框中所示，这个BUG花费了我半天的时间。当你输入Button时，其实也是会提示两个选项的，这点需要注意了。

![2020111217380186.png][]

### 易错点2： ###

在fxml文件里，button的ID是“huiButton”, 但是填进 lookup() 里时，要加上字符“\#”, 写成“\#huiButton”，如上图红框中所示。

### 举一反三： ###

所有控件，包括 Table等等，在程序里实时改变值都是这样的，若想在其它地方也方便地改，可把局部变量改为全局变量。

如 TextArea 写成：

javafx.scene.control.TextArea ta = (javafx.scene.control.TextArea)root.lookup("#huiTextArea");
            ta.setText("hui==========================");

改后运行如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 7][]

# 先画底板 #

其实，由于上面的画Button步骤之前应该先画一个底板，也就是Container，如果没有先画这个的话，Button就只会在最中间，无法移动到其它位置，控件一旦多了，就会重叠在一起。所以要先画Container.

**专业术语:** 舞台(Stage)，场景(Scene)，容器(Container)，布局(Layout )和控件(Controls)之间的关系

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 8][]

所以操作步骤是：

第一步先放一个Container, 然后第2步就和C\#,Android Studio  一样了，拖拽Control（就是按钮之类的控件）进来。

放控件图如下，图中的是 Containers -- > Pane。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 9][]

可以在Text模式下精确调节大小，如下：

![20201112142659880.png][]

# 加类似串口助手的显示区域 #

如下图，在先有一个Pane的基础上，再选择Controls-->TextArea。就出现了一个显示的区域。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 10][]

接下来，设定id值。这个id, 在程序里，是用来找到这个控件的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 11][]

代码这样写：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 12][]

运行的结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 13][]

## 改变AreaText字体的方法： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 14][]

## 多线程显示内容太多死机，怎么办？ ##

当开了多线程的时候，就会出现以下的情况，整个显示框都卡死了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 15][]

原因分析：

因为  m\_arg.m\_TextArea\_main\_display.appendText(str\_print); 这一句执行需要时间，当要显示的内容越多时，需要的时间越长。当appendText在线程里时，线程切换出去了， 还没执行完，再切回线程时，又执行下一次显示，但是，实际上，上一次的显示任务还没执行完毕呢。这时就会出错了。

解决方法：

知道了原因，解决方法就顺水推舟了，限制相邻两次的最短显示时间即可。

代码及测试代码如下：

static String str_print = new String();
        public void Start_Thread(Main.Args arg) throws InterruptedException {
            m_arg = arg;
            
            Thread display_thread = new Thread(){
                public void run() {
                    long TickOld = System.currentTimeMillis();
                    while (true) {
                         if (str_print.length() > 0 && System.currentTimeMillis() - TickOld > 50 && m_arg.m_TextArea_main_display.isNeedsLayout() == false)
                         {
                             TickOld = System.currentTimeMillis();
                             String tmp = str_print; str_print = "";
                             m_arg.m_TextArea_main_display.appendText(tmp);
                        }
                        try {
                            Thread.sleep(10); // 延时久一点，拖动界面才不卡。
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
    
                    }
                }
            };
            display_thread.start();
    
            Thread obd_thread = new Thread(){
                public void run(){
                    run_test();
                }
                public void run_test(){
                    while (m_arg == null){}
                    for (int i=0; i<50000; i++){
                        try {
                            Print("------------------------------------------------" + i + "-----------------------------------------------------\n");
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
    
                        try {
                            Thread.sleep(5); // 延时久一点，拖动界面才不卡。
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }
                }
            };
            obd_thread.start();
    
        }

## textarea textfield 的区别 ##

extfield只有一行可bai写  
textarea是一个区du域,可以有很多行

## 问题点：[javaFX textField onInputMethodTextChanged只能在全角状态下触发][javaFX textField onInputMethodTextChanged] ##

使用了 TextArea 的 "On Input Method Text Change"功能，如下，

![20201203102006837.png][]

但是出现了一个问题，在全角状态下，也就是中文输入法下，可以进入“中断处理函数”，但是，在半角状态下，也就是英文输入法下，无论怎么改变输入框的值，也无法进入“中断处理函数”。

解决方法：找不到办法解决，可能是FX自身的BUG，最好加多一个button来实现这个功能。

# 加入文件选择控件 #

先加入一个按钮，如下：

![20201112204800613.png][]

![20201112210120214.png][]

只要一点击，就打开文件选择控件。

按键处理函数里内容如下：

public void ChoseOriginFile_OnAction(ActionEvent actionEvent) {
            FileChooser fileChooser = new FileChooser();
            fileChooser.setTitle("选择原始文件");
            File file = fileChooser.showOpenDialog(Main.m_primaryStage);
            Main.m_button.setText(file.getPath());
        }

最后一句 Main.m\_button.setText(file.getPath()); 是把得到的路径显示在按钮上，效果如下：

![20201113085027605.png][]

如果选择文件夹，则可换成以下代码：

DirectoryChooser directoryChooser=new DirectoryChooser();
    File file = directoryChooser.showDialog(Main.m_primaryStage);
    String path = file.getPath();//选择的文件夹路径

其中，

Main.m\_primaryStage 是全局全静态全局变量（借用C++的说法），代码如下：

public class Main extends Application {
        static Stage m_primaryStage;
        public void start(Stage primaryStage) throws Exception{
            m_primaryStage = primaryStage;
        }
        public static void main(String[] args) {
            launch(args);
        }
    }

这样写完后，虽然实现了选择某个文件的功能，但是，没法记住上一次打开的文件的位置，没次都要从根目录重新打开，那么，有什么好的方法实现记忆住上一次目录打开的位置的。代码改成以下即可：

public void ChoseOriginFile_OnAction(ActionEvent actionEvent) throws IOException {
            FileChooser fileChooser = new FileChooser();
            fileChooser.setTitle("选择原始文件");
            List<String> list = FileDo.ReadTxt("file choose directory record.ini");
            if (list.size() >= 2)fileChooser.setInitialDirectory(new File(list.get(0)));
            File file = fileChooser.showOpenDialog(Main.m_primaryStage);
            FileDo.WriteTxt("file choose directory record.ini", file.getParent() + "\n" + file.getName());
            Main.m_button.setText(file.getName());
        }

另外，可在初始化的地主加入：

List<String> list = FileDo.ReadTxt("file choose directory record.ini");
            if (list.size() >= 2)m_button.setText(list.get(1));

这的的话，一开机，就会把历史路径显示在按钮上，效果如下：

![2020111309553350.png][]

# 使用ListView做菜单 #

1.先加入一个ListView控件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 16][]

2.加入初始化代码：

public class Main extends Application {
        public javafx.scene.control.ListView m_ListVie_for_menu;
        @Override
        public void start(Stage primaryStage) throws Exception{
            ObservableList<String> items =FXCollections.observableArrayList (
                    "宝马", "Double", "Suite", "Family App");
            m_ListVie_for_menu = (javafx.scene.control.ListView)root.lookup("#ListView_for_menu");
            m_ListVie_for_menu.setItems(items);
        }
        public static void main(String[] args) {
            launch(args);
        }
    }

完成这一步，其实就已经可以看到效果了，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 17][]

3.使能”可编辑“， 只有打上勾，才可能使用下一步时的那几个“中断处理函数”。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 18][]

4，使用这个“中断处理函数”，这样，双击就可以进入这个“中断处理函数”。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 19][]

# 界面切换 #

新建一个FXML文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 20][]

FXML文件创建好后，会提示你新建一个源文件，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 21][]

切换的代码为：

public void OnAction_MessageBox(ActionEvent actionEvent) throws IOException {
            Parent root = FXMLLoader.load(getClass().getResource("MessageBox.fxml"));
            Main.m_primaryStage.setTitle("MessageBox");
            Main.m_primaryStage.setScene(new Scene(root, 600, 600));
            Main.m_primaryStage.show();
        }

其中， Main.m\_primaryStage 是“全局变量”， 是这样来的：

public class Main extends Application {
        public static Stage m_primaryStage;
        @Override
        public void start(Stage primaryStage) throws Exception{
            m_primaryStage = primaryStage;
        }
        public static void main(String[] args) {
            launch(args);
        }
    }

# Label标签的使用 #

![20201208092458230.png][]

代码更新 Label标签的方法如下：

javafx.scene.control.Label msg_box_lable;
            msg_box_lable = (javafx.scene.control.Label)root.lookup("#Label_MsgBox");
            if (msg_box_lable != null)msg_box_lable.setText("++++++++++++");

# TableView #

请参考我在CSDN写的另外一篇文章：《javafx 之 TableView》[https://blog.csdn.net/zhuohui307317684/article/details/112470481][https_blog.csdn.net_zhuohui307317684_article_details_112470481]

[https_blog.csdn.net_weixin_41571493_article_details_81415327]: https://blog.csdn.net/weixin_41571493/article/details/81415327
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201110155732535.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 1]: /images/20210920/9d9756cfcdf942f7b73821e1db29ad8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 2]: /images/20210920/ee51a1a2500148bea4544c86f71ee486.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 3]: /images/20210920/b520e004cb2242beaae101a31fa14beb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 4]: /images/20210920/b82ea115c95146b7b16a3863ebcf3e75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 5]: /images/20210920/73a5591654eb43af87132c96e829c919.png
[20201110161650403.png]: /images/20210920/7cac9f8e41254c59a29e525dbc848a65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 6]: /images/20210920/771db93b7f10412b9cf62747415d492f.png
[2020111217380186.png]: /images/20210920/cb106ded88f14893a2756631ed57a00e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 7]: /images/20210920/5a4f8711aea042be9e79839acd8899bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 8]: /images/20210920/567a133771a8462c9fe02fbe28cd4bdc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 9]: /images/20210920/23fb87c3e71c458ab377be3d8c2c88dc.png
[20201112142659880.png]: /images/20210920/07f8507574734a4981ad52edc07f9ac1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 10]: /images/20210920/4653c907350d42779595baae81051e32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 11]: /images/20210920/f4f61c47e6eb4da3a9b5a14332e87fca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 12]: /images/20210920/08bc470246144e73b1070372e10b347f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 13]: /images/20210920/aadb9efb4e154678978418eea28a89af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 14]: /images/20210920/43c3afbd50014f69aa10284e3dc10379.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 15]: /images/20210920/26c47778d21a4f47a6d66688a635cae8.png
[javaFX textField onInputMethodTextChanged]: https://segmentfault.com/q/1010000011850424
[20201203102006837.png]: /images/20210920/45c5b9abb9a04447bdd936d4ee9dd011.png
[20201112204800613.png]: /images/20210920/e6083214617c460f98cae7c3346270af.png
[20201112210120214.png]: /images/20210920/c9d24dbfa58540679565f44a9e1ac6f3.png
[20201113085027605.png]: /images/20210920/4cca4db811cf488da7cc422e19f17833.png
[2020111309553350.png]: /images/20210920/cad261849ca6483583feca4879f2a4b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 16]: /images/20210920/37622fc15b034054a6a9a594e9da78bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 17]: /images/20210920/0e590a4cc4c14e1f8daf96a40b27b06b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 18]: /images/20210920/2d0ee546d8644e2cbf9d248fa11a07e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 19]: /images/20210920/f4e9310883e8443b9def96b9070d55e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 20]: /images/20210920/d6a2070ecb45490599af4d77d9294756.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podW9odWkzMDczMTc2ODQ_size_16_color_FFFFFF_t_70 21]: /images/20210920/39e98bb96c44430c93213f174d201cf8.png
[20201208092458230.png]: /images/20210920/6a985588da5a4dc09db44d0d2b40204e.png
[https_blog.csdn.net_zhuohui307317684_article_details_112470481]: https://blog.csdn.net/zhuohui307317684/article/details/112470481