一个实例搞定MATLAB界面编程(最好的matlab gui界面编程入门教程)
在Matlab中使用GUI设计用户界面

在Matlab中使用GUI设计用户界面引言Graphical User Interface (GUI) 是现代计算机软件中常用的一种类型用户界面,它通过图形化的形式提供了直观、易用的操作方式。
Matlab作为一种功能强大的数值计算软件,也提供了丰富的GUI设计工具,使得用户可以通过简单的拖拽和设置,快速地创建出美观实用的用户界面。
本文将介绍在Matlab中使用GUI设计用户界面的基本原理和步骤,并结合实例演示具体操作。
一、Matlab中的GUI设计工具Matlab提供了几种常用的GUI设计工具,包括GUIDE(GUI Development Environment)和App Designer。
GUIDE是Matlab较早期的一个GUI设计工具,提供了可视化的编辑界面,方便用户进行界面布局和交互事件的设置。
而App Designer是Matlab较新推出的GUI设计工具,相比GUIDE具有更加丰富的功能和更好的可视化编辑体验。
在本文中,我们将以App Designer为例来介绍Matlab中的GUI设计过程。
二、创建GUI应用程序在Matlab的主界面中,点击"APPS"菜单,选择"App Designer"打开App Designer界面,然后点击"Create App"按钮创建一个新的GUI应用程序。
在弹出的对话框中输入应用程序的名称并设置保存位置,点击"Create"按钮即可创建一个空的GUI应用程序。
三、设计用户界面在App Designer中,可以通过拖拽和调整控件来设计用户界面。
常用的控件包括按钮、文本框、下拉菜单、滑块等,用户可以根据需求自由选择和排列这些控件。
同时,还可以设置控件的属性,如大小、颜色、字体等,以及添加交互事件,如按下按钮后执行的操作。
四、设置控件属性和交互事件在设计好用户界面后,需要为每个控件设置相应的属性和交互事件。
Matlab_-_GUI图形用户界面简单实用教程

五 GUI图形用户界面
4. 界面激活 保存静态界面后,利用工具栏上的运行按钮激活该界面。 激活后可以看到两个同名文件:experiment1.m和 experiment1.fig。 experiment1.m文件在M文本编辑器中打开, experiment1.fig文件显示为操作界面,但是无法实现任何功 能,需要编写回调函数。
15
五 GUI图形用户界面
对本例来说,首先需要定义几个用户变量,以便记录参加 handles = 运算的数值,进行计算。 mainWnd : 132.0002 p2 : 24.0006
Operation : 149.0002 p1 handles, : 23.0006 function Experiment1_OpeningFcn(hObject, eventdata, varargin) pDot : 148.0002 text3 : 22.0006 handles.output = hObject; pLog10 : 147.0002 text2 : 21.0006 handles.s_Exp=‘’; % 以字符串的形式记录计算表达式 pLog : 146.0002 frame4 : 20.0006 handles.s_Num=‘’; %以字符串的形式记录编辑框中要显示的数值 pCos : 145.0002 text1 : 19.0006 handles.i=1; % s_Exp的计数器 pClear : 18.0006 pSin : 144.0002 pDel : 143.0002 handles.j=1; % s_Num的计数器 pDone : 17.0006 pExp : 16.0006 handles.flag=0; pAdd : 142.0002 %用来区分四则运算和其他运算的标志 pDiv : 141.0002 frame3 : 15.0007 % Update handles structure pMul : 140.0002 frame2 : 133.0002 guidata(hObject, handles); p0 : 139.0002 p_Clear : 151.0002 p9 : 138.0002 p_Done : 150.0002 p8 : 137.0002 output : 132.0002 p7 : 136.0002 s_Exp : '50' p6 : 135.0002 s_Num : '5' p5 : 134.0002 i :2 p4 : 26.0006 j :2 p3 : 25.0006 flag : 0
MATLAB8.5教程第11章 图形用户界面(GUI)设计

(6)M文件编辑器 点击M文件编辑器,系统自动产生M文件(或打开已建立 的M文件),如图11-9所示。文件内的程序包括各种控件 的回调函数和注释等。用户只需在各控件的回调函数下 面填写代码,通过编写程序来控制控件的动作。在系统 运行过程中当触发到某控件时,相应的回调函数就会执 行。控件的属性tag是唯一标识符,通过它来识别控制对 象。
2.界面布局 添加需要的控件摆放到输出编辑器“untitled.fig”中合 适的位置,对多个同样的控件,为摆放整齐,可以打开工 具栏中的对象对齐(Align Objects)图标 ,进行各种方 式处理。并可用鼠标选中右下角的版面大小控制句柄来缩 放版面。 选择5个静态文本框【Static Text】,其中4个用来做文 本标签,一个用来显示结果;2个编辑文本框【Edit Text 】,用来输入数据;2个面板【Panel】和4个触控按钮【 Pushbutton】,分别用鼠标拖到“untitled.fig”窗口中 ,其摆放位置如图1-15所示。
3.编辑控件的属性 利用属性查看器(Property Inspector),设置各个控件 的参数(见表11-3所示)
修改完毕后点击属性查看器右上角的“关闭” ,属性会自动保存。且图 11-14 界面产生 的结果如图 11-15 所示。
图 11-15 设计控件属性的输出编辑器窗口
4.存储 GUIDE 输出编辑器界面 点击菜单栏中的保存图标,在弹出的【Save as】对话框中填写文件名“jisuanqi” ,单击 【保存】 按钮, 如图 11-16 所示。 此时图 11-15 的界面最上方左边角的名称变为 “jisuanqi.fig” , 如图 11-17 所示, 这个输出编辑器窗口就是已保存且可打开进行添加、 修改控件的设计窗口。 同时 MATLAB 将自动生成“jisuanqi.m”和“jisuanqi.fig”两个文件,其中“jisuanqi.m”文 件可用来编写回调函数代码, “jisuanqi.fig”文件可用来打开功能界面。
MATLAB(GUI)编程

MATLAB图像用户界面1、GUI入门示例(1)3种方式打开GUIDE开发环境:●在指令窗中运行guide指令。
●菜单:新建—>GUI。
●使用GUIDE按钮。
(2)使控件、组件图标带其名称一起显示,应采用以下步骤:●选择界面编辑器菜单项:File > Preference,引出GUIDE选项设置界面。
●勾选“show names in component palette”项。
(3)界面组件●GUI界面右下角“小黑块”,即“界面缩放句柄”●轴:点击“轴”图标,然后在工作区中的适当位置,拉出适当大小的“轴位框”,以供绘制响应曲线使用。
●静态文本框:;●可编辑文本框:;(4)界面组件参数的设置:●在”窗属性编辑器“设置:Resize on %图形窗是否可缩放Uints normalized %采用“归一化”单位计量窗口大小●“静态文本框”设置:FontUnits normalized %采用相对度量单位,缩放时保持字体比例FontSize 0.5 %字体大小String 归一化二阶系统的阶跃响应%Units normalized %采用相对度量单位,缩放时保持该区比例●轴:Box on %轴框封闭Units normalized %采用相对度量单位,缩放时保持比例XLim [0,15] %X轴范围YLim [0,2] %Y轴范围●可编辑文本框:FontUnits normalized %采用相对度量单位,缩放时保持字体比例FontSize 0.5 %字体大小String %删除缺省字符Units normalized %采用相对度量单位,缩放时保持该区比例(5)初步设计界面的保存在进行保存时,在指定的文件夹下会同时生成2个伴生文件ex0801.m和ex0801.fig。
(6)回调程序的编写Ex0801.m所包含的回调子函数函数体是空的。
插入下面代码:function edit1_Callback(hObject, eventdata, handles)% hObject handle to edit1 (see GCBO)% eventdata reserved - to be defined in a future version of MATLAB% handles structure with handles and user data (see GUIDATA)% Hints: get(hObject,'String') returns contents of edit1 as text% str2double(get(hObject,'String')) returns contents of edit1 as a doubleget(hObject,'String'); %从编辑框读取输入字符zeta=str2double(get(hObject,'String')); %把字符转换成双精度数handles.t=0:0.05:15; %定义时间采样数组handles.y=step(tf(1,[1,2*zeta,1]),handles.t); %计算响应cla %清空坐标轴line(handles.t,handles.y) %在已有轴上绘制曲线。
(完整版)MatlabGUIDE使用说明(MatlabGUI界面)

去年做了一些关于Matlab GUI的程序,现在又要做相关的东西,回想起来,当时很多经验没有记录下来,现在回顾起来始终觉得不爽,所以从现在开始,一定要勤写记录。
从简单的例子说起吧。
创建Matlab GUI界面通常有两种方式:1,使用 .m 文件直接动态添加控件2. 使用GUIDE 快速的生成GUI界面显然第二种可视化编辑方法算更适合写大型程序。
一:创建GUI1.在 .m文件中动态添加例如h_main=figure(‘name’,‘a demo of gui design’,‘menubar’,‘none’,…'numbertitle','off','position',[100 100 300 100]);h_edit=uicontrol('style','edit','backgroundcolor',[1 1 1],'position',[20 20 50 20],...'tag','myedit','string','1','horizontalalignment','left');h_but1=uicontrol('style','pushbutton','position',[20 50 50 20],'string','INC',...'callback',['v=eval(get(h_edit,''string''));',...'set(h_edit,''string'',int2str(v+1));']);h_but2=uicontrol('style','pushbutton','position',[80 50 50 20],'string','DEC',...'callback',['v=eval(get(h_edit,''string''));','set(h_edit,''string'',int2str(v-1));']);2.使用GUIDE帮助创建GUI在Command 里面输入GUIDE 或者从菜单里面,或者从快捷按钮均可进入GUIDE新建并且保存后,会生成相应的fig文件和m文件,在Layout编辑视图,可以使用如下工具:Layout Editor:布局编辑器;Alignment Tool:对齐工具;Property Inspector:对象属性观察器;Object Browser:对象浏览器;Menu Editor:菜单编辑器。
经典GUI基础入门:MATLAB中GUI用户图形界面学习

GUI指导教程系列(1):GUI入门基本操作为什么在MATLAB中要使用GUI呢?其实GUI就是Matlab中的Visual Basic,是面向对象的编程,可以使Matlab程序的终端用户,即使不懂的Matlab也可以轻易操作该程序!如果没有图形用户界面(GUI)我们只能从命令行(Command Window)中调用相关程序,这相对比较繁琐,并且不是所有用户都是这个能力。
就好比计算机的DOS 系统,在有windows的情况下,您会选择DOS吗?当然我们也不排除骨灰级的人物!在本节教程我们主要针对没有GUI创建和使用经历的网友,但是必要的MATLAB 基础知识是需要的。
在教程中我们将创建一个简单的GUI程序,它执行两个数的加法运行,然后显示其运算结果。
好下面开始我们的教程!一、打开和创建GUI界面1、首先打开Matlab,在Command Window中输入guide回车2、此时打开GUI编辑器GUIDE(GUI Developer的缩写)2.1 界面上有两个标签也“Creat New GUI”和“Open Existing GUI”如果创建新的GUI此时我们选择第一个标签页,但如果打开其它已经存在的GUI 就点击第二个标签吧2.2 这里我们选择第一个标签下的“Blank GUI”(空白GUI),下面还有几个系统GUI模版,你可以根据需要选择其它的。
2.3 点击“OK”我们正式进入GUIDE界面,呵呵,是不是感觉似曾相识3、添加你需要的控件到figure中在添加控件之前,您最好对您的GUI界面布局已经有一定的构思了,否则盲目性太大了不利于您的编程。
下面是我们构思的布局。
二、添加控件和设置属性在正式讲解之前,我们先讲解下GUI中的鼠标基本操作(a) 在左边的控件面板中鼠标左击选择您需要的控件,然后放开鼠标(b) 在右边的figure中按住左键,画出您的控件,于是空间就在figure上(c) 你可以用鼠标拖拽figure上所有控件,来改变他们的位置(d) 在控件上双击鼠标左键(右击是快捷菜单)可打开控件属性面板1、从上面的布局构思,我们知道本GUI需要以下控件:三个“编辑文本框”(Edit Text):三个“静态文本框”(Static Text):一个“确定按钮”(Pushbutton)按照上面介绍的鼠标操作方法,将这6个控件拖到右边的figure中,如下图所示2、接下来就是编辑这些控件的属性好,下面从Static Text开始吧,双击其中一个“静态文本块”,将跳出该控件的“属性查看器”(Property Inspector)GUI控件的几个常用属性说明如下:position:指示空间在figure中的位置font**:字体相关属性string:相当如VB中的caption,就是显示在控件上的文字tag:控件的唯一标识符,相当于ID,我们需要tag来指定某一个空间2.1 在这里我们修改它的“string”属性为“+”2.2 同理修改它的“fontsize”属性为20在编辑完这些属性后,直接点击右上角的“关闭”按钮,关闭属性查看器,此时属性会自动保存。
经典GUI基础入门:MATLAB中GUI用户图形界面学习

如果没有图形用户界面(GUI)我们只能从命令行(Command Window)中调用相关程序,这相对比较繁琐,并且不是所有用户都是这个能力。
就好比计算机的 DOS 系统,在有windows的情况下,您会选择DOS吗?当然我们也不排除骨灰级的人物!在本节教程我们主要针对没有G UI 创建和使用经历的网友,但是必要的M ATLAB基础知识是需要的。
在教程中我们将创建一个简单的GUI程序,它执行两个数的加法运行,然后显示其运算结果。
一、打开和创建GUI界面1、首先打开Matlab,在Command Window中输入guide回车2、此时打开GUI编辑器GUIDE(GUI Developer的缩写)2.1 界面上有两个标签也“Creat New GUI”和“Open Existing GUI”如果创建新的GUI此时我们选择第一个标签页,但如果打开其它已经存在的GUI 就点击第二个标签吧2.2 这里我们选择第一个标签下的“Blank GUI”(空白 GUI),下面还有几个系统GUI模版,你可以根据需要选择其它的。
2.3 点击“OK”我们正式进入GUIDE界面,呵呵,是不是感觉似曾相识3、添加你需要的控件到figure中在添加控件之前,您最好对您的GUI界面布局已经有一定的构思了,否则盲目性太大了不利于您的编程。
下面是我们构思的布局。
二、添加控件和设置属性在正式讲解之前,我们先讲解下GUI中的鼠标基本操作(a) 在左边的控件面板中鼠标左击选择您需要的控件,然后放开鼠标(b) 在右边的figure中按住左键,画出您的控件,于是空间就在figure上(c) 你可以用鼠标拖拽figure上所有控件,来改变他们的位置(d) 在控件上双击鼠标左键(右击是快捷菜单)可打开控件属性面板1、从上面的布局构思,我们知道本GUI需要以下控件:三个“编辑文本框”(Edit Text):三个“静态文本框”(Static Text):一个“确定按钮”(Pushbutton)按照上面介绍的鼠标操作方法,将这6个控件拖到右边的figure中,如下图所示2、接下来就是编辑这些控件的属性好,下面从Static Text开始吧,双击其中一个“静态文本块”,将跳出该控件的“属性查看器”(Property Inspector)GUI控件的几个常用属性说明如下:position:指示空间在figure中的位置font**:字体相关属性string:相当如VB中的caption,就是显示在控件上的文字tag:控件的唯一标识符,相当于ID,我们需要tag来指定某一个空间2.1 在这里我们修改它的“string”属性为“+”2.2 同理修改它的“fontsize”属性为20在编辑完这些属性后,直接点击右上角的“关闭”按钮,关闭属性查看器,此时属性会自动保存。
matlab gui界面设计实例

matlab gui界面设计实例
以下是一个简单的MATLAB GUI界面设计实例:
1. 打开MATLAB软件并创建一个新的GUI文件,首先需要添加一个静态文本标签来说明该程序的用途。
2. 在接下来的步骤中,我们将添加一个单选按钮和一组复选框,允许用户选择他们的喜好和选项。
3. 其他元素可添加日期选择器,文本框和按钮等等。
4. 最后,我们需要添加一个事件处理程序,以便处理用户点击“提交”按钮时的操作。
通过这样一个简单的实例,我们可以学习到MATLAB GUI界面的基本设计原则和步骤,以及如何处理用户交互事件并使用MATLAB功能实现功能。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
一个实例搞定MATLAB界面编程作者:彭军邮件:pjun9@博客:/pengjun下面请跟我一步一步做一个图像处理的程序,如果您坚持做完这个实例,我想MATLAB界面编程对您而言,就没有什么难度了。
当然,我这里说的是,您首先要有一定的MATLAB 编程基础。
还有,我的MATLAB版本是2008a。
在2008a以前的版本中没有工具栏编辑器,如果需要工具栏要手动写程序,这个我就不多讲了。
好了,废话少说,跟我来吧!在MATLAB的命令窗口(Command Window)中运行guide命令,来打开GUIDE界面,如下:然后,选择空模板(Blang GUI),点击OK,即可打开GUIDE的设计界面,如下:点击工具栏上的菜单编辑器(Menu Editor),打开菜单编辑器,如下:在Menu Bar中新建一个菜单项,名字为“文件”,其他设置请看下图:在“文件”菜单下添加菜单项:“打开”,“保存”,“退出”。
见下图:如果需要在菜单项“退出”上面添加一个分割线的话,选中“Separator above this item”就行了。
保存我的界面为pjimage.fig.保存完毕之后,会自动打开pjimage.m文件,而我们所有的程序都是要写在这个M文件里面的。
在编程中,我们的每一个鼠标动作都对应一个Callback 函数。
那么我们的菜单项也是如此的。
在界面上,单击鼠标右键选择“Property Inspector”,即可打开属性窗口。
当我们点击不同的控件时,其对应的属性都会在这里显示,我们可以进行修改。
最主要的属性莫过于Tag属性和String属性。
设置当前Figure窗口的Tag属性为:figure_pjimage,窗口的标题(Name属性)为:图像处理实例。
如下:然后,点击工具栏的保存按钮。
之后,点击工具栏的运行按钮(Run Figure)。
注意,工具栏的图标都会有提示的,像运行按钮的提示就是Run Figure.我们会看到如下的界面:那说明,我们保存的.fig文件的目录不是当前目录,但是没关系啊,我们只要点击“Change Directory”来改变当前目录。
当然,如果你想把当前目录添加到MATLAB路径也可以,那就点击“Add to Path”就OK了。
我在这里推荐点击“Change Directory”,因为没有什么太大必要把其添加到MATLAB路径中,一般是工具箱需要添加或者我们的函数或程序写完了,而在MATLAB的命令窗口找不到我们的函数的时候,我们可以将函数或程序所在的目录添加到MATLAB路径。
总之吧,点那个按钮,要看个人的爱好了。
不管点击两个按钮的那一个按钮,都会正确的运行程序的。
我们的程序运行时的样子,是这样的:文件下面的菜单项和快捷键我们都能看到,但是我们没有写程序,所以就算点也没有什么响应。
还有如果不想设置快捷键,可以在Menu Editor中设置,只要把其选择为Ctrl+none就行了,如下:这样的话,保存项就没有了快捷键了。
我们可以通过上面的按钮“View”来查看该菜单项的响应函数,也就是Callback函数。
也可以在pjimage.m中看,比如保存的Tag属性是m_file_save,那么它对应的Callback函数的名字就是m_file_save_Callback。
依次类推了。
下面我们来写打开菜单项的函数,要打开一个图片,当然要用打开对话框了。
在界面编程中,打开对话框的函数是uigetfile.关于它的详细的说明用help uigetfile命令查看。
下面是打开菜单的响应函数:function m_file_open_Callback(hObject,eventdata,handles) [filename,pathname]=uigetfile(...{'*.bmp;*.jpg;*.png;*.jpeg','Image Files(*.bmp,*.jpg,*.png, *.jpeg)';...'*.*','All Files(*.*)'},...'Pick an image');保存.m文件,并运行程序。
点击“文件”下的“打开”,会打开如下的打开对话框:选择一个文件之后,程序中的filename就是你选择的文件的文件名,pathname就是该文件所在的目录的路径。
比如:filename=5.jpg,pathname=C:\Documents and Settings\Administrator\My Documents\。
那么获得路径之后,我们要怎么样才能读入和显示一个图片呢?读入图片可以用imread函数,而显示可以在一个坐标轴上。
那么我们需要在界面上画上一个坐标轴,为了对比,我们画两个坐标轴,一个显示处理前,一个显示处理后的。
并且将处理前的坐标轴的Tag属性改为axes_src,处理后的坐标轴的Tag属性为axes_dst。
更改之后,保存。
如下:然后在m_file_open_Callback程序原来的基础上,再添加如下的程序:axes(handles.axes_src);%用axes命令设定当前操作的坐标轴是axes_src fpath=[pathname filename];%将文件名和目录名组合成一个完整的路径imshow(imread(fpath));%用imread读入图片,并用imshow在axes_src上显示运行程序,通过“打开”菜单项,打开一个图片。
效果如下:那么如何来保存一副图片?用imwrite命令。
但imwrite命令的第一个参数就是你读入的图片数据,也就是imread的返回值。
这样的话,我们就要将m_file_open_Callback中的程序做一点小小的改动。
将最后一句(imshow(imread(fpath))),更改为两句,如下:img_src=imread(fpath);imshow(img_src);不仅如此,我们的保存菜单的Callback函数,如何去获得打开菜单的Callback 函数下的img_src变量呢?这里就要将img_src来作为一个共享的数据。
许多界面编程的朋友,喜欢用global声明。
我个人不喜欢这样用,因为有更好的方法。
那就是用setappdata和getappdata两个函数。
我们可以为界面上面的任何一个具有Tag属性的空间添加应用程序数据。
当然我比较喜欢将这些共享的应用程序数据统一添加到Figure窗口上,因为这样容易记,如果一个控件一个,感觉不容易记。
你在.m文件中会发现除了各个菜单项的Callback函数以外,还有两个函数:pjimage_OpeningFcn和pjimage_OutputFcn.而pjimage_OpeningFcn就相当于界面的初始化函数,而pjimage_OutputFcn则是界面的输出函数,也就是当你不运行fig,而调用.m文件时的返回值。
所以,我们要在pjimage_OpeningFcn中添加如下的程序,来共享这个img_src矩阵。
代码如下:setappdata(handles.figure_pjimage,’img_src’,0);然后,在m_file_open_Callback函数的最后写上如下程序:setappdata(handles.figure_pjimage,’img_src’,img_src);那么,我们在m_file_save_Callback函数中就可以像这样的来提取img_src,如下:img_src=getappdata(handles.figure_pjimage,’img_src’);那么保存的时候,自然会用到保存对话框了。
要用保存对话框,就要用到uiputfile函数了,具体的请用help uiputfile查看。
那么,保存菜单项下的程序(m_file_save_Callback),可以这样写:[filename,pathname]=uiputfile({'*.bmp','BMP files';'*.jpg;','JPG files'},'Pick an Image');if isequal(filename,0)||isequal(pathname,0)return;%如果点了“取消”elsefpath=fullfile(pathname,filename);%获得全路径的另一种方法endimg_src=getappdata(handles.figure_pjimage,'img_src');%取得打开图片的数据imwrite(img_src,fpath);%保存图片下面是退出菜单项的程序的。
要退出界面,只要用close函数就行了,但是通常都会有提示的。
比如你如果进行了处理图片,而又没有保存处理后的图片,那么在关闭的时候就应该给出提示,询问是否进行保存。
不过,在这里,我们先不做这个工作,等后面有需要的时候再写吧。
因此,这里的退出菜单项的程序就是一句,如下:close(handles.figure_pjimage);其实,用delete函数也是可以的,就是:delete(handles.figure_pjimage);看你的心情了。
但是运行程序的时候,你会发现,当你打开图片的时候,如果点“取消”按钮,那么在MATLAB 的命令窗口会弹出错误,那是因为我们没有处理取消的情况。
下面我们来处理下这个问题,只要把m_file_open_Callback下面的程序更改为如下程序即可:[filename,pathname]=uigetfile(...{'*.bmp;*.jpg;*.png;*.jpeg','Image Files(*.bmp,*.jpg,*.png, *.jpeg)';...'*.*','All Files(*.*)'},...'Pick an image');if isequal(filename,0)||isequal(pathname,0),return;endaxes(handles.axes_src);fpath=[pathname filename];img_src=imread(fpath);imshow(img_src);setappdata(handles.figure_pjimage,'img_src',img_src);下面我们来做一个图像二值化的一个图像处理。
用上面的方法添加一个“图像处理”菜单,如下:在其下面添加一个“图像二值化”的菜单项,如下:然后,点击“OK”关闭菜单编辑器,并保存整个界面。