MATLAB编写GUI小结——动态更改GUI布局、多个面板交替显示

笔者最近参加了一个小比赛，需要用MATLAB 写个软件，这里总结一下界面交互时的一些心得体会。

实现方法是找的网上大牛提供的经验并结合自己的改进，这里就不一一列出链接，如果侵权，请联系笔者。

直接给出效果图：

上面三个图均为一个GUI界面下的显示效果，点击左侧不同的button按钮，会出现不同的面板。

这是怎么实现的呢？

实现思路：将需要显示的面板显示在固定位置，将不需要显示的面板移除界面之外。

实现前提：GUI编辑界面中，各个面板不能相互包含，只能相互独立

1.实现前提

这里给出GUI编辑界面如下（相互独立情况）：

可以看出三个面板交叠摆放，但各个面板没有相互包含。

给出GUI编辑界面如下（相互包含情况）：

可以看出，更改密码的面板包含在了上传头像的面板之中，这种情况要避免。

如何避免这种相互包含的情况呢，笔者建议，独立编辑完各个面板后，选中某个面板，用键盘上的上下左右移动按键去移动面板，避免用鼠标拖动。

2.实现过程

在满足了实现前提后，便可根据实现思路（将需要显示的面板显示在固定位置，将不需要显示的面板移除界面之外）面板的动态交替显示了。

1.初始化

在MATLAB GUI 开头的OpeningFcn（）函数下写入以下内容：

set(handles.uipanel2, 'Position', [43 1.5 64 16.857]);  % 更改用户名面板
set(handles.uipanel3, 'Position', [200 25 64 16.857]);  % 更改密码面板
set(handles.uipanel4, 'Position', [200 25 64 16.857]);  % 上传头像面板

第1行代码：默认显示更改用户名面板，所以将该面板移动到显示位置（[43 1.5 64 16.857]）

第2行代码：不显示更改密码面板，所以将该面板移动到界面之外的位置（[200 25 64 16.857]）

第3行代码：不显示上传头像面板，所以将该面板移动到界面之外的位置（[200 25 64 16.857]）

2.切换面板代码

在切换面板的按钮 CallBack 函数中写下如下代码：

1. 切换到 更改用户名 面板

set(handles.uipanel2, 'Position', [43 1.5 64 16.857]);
set(handles.changeUserName, 'BackgroundColor', [0, 51, 102]/255);
set(handles.changeUserName, 'ForegroundColor', 'white');
set(handles.uipanel2, 'Visible', 'On');

set(handles.uipanel3, 'Position', [200 25 64 21]);
set(handles.changePassWord, 'BackgroundColor', [0.94, 0.94, 0.94]);
set(handles.changePassWord, 'ForegroundColor', 'black');
set(handles.uipanel3, 'Visible', 'Off');

set(handles.uipanel4, 'Position', [200 25 64 21]);
set(handles.uploadPicture, 'BackgroundColor', [0.94, 0.94, 0.94]);
set(handles.uploadPicture, 'ForegroundColor', 'black');
set(handles.uipanel4, 'Visible', 'Off');

2. 切换到 更改密码 面板

set(handles.uipanel2, 'Position', [200 25 64 21]);
set(handles.changeUserName, 'BackgroundColor', [0.94, 0.94, 0.94]);
set(handles.changeUserName, 'ForegroundColor', 'black');
set(handles.uipanel2, 'Visible', 'Off');

set(handles.uipanel3, 'Position', [43 1.5 64 16.857]);
set(handles.changePassWord, 'BackgroundColor', [0, 51, 102]/255);
set(handles.changePassWord, 'ForegroundColor', 'white');
set(handles.uipanel3, 'Visible', 'On');

set(handles.uipanel4, 'Position', [200 25 64 21]);
set(handles.uploadPicture, 'BackgroundColor', [0.94, 0.94, 0.94]);
set(handles.uploadPicture, 'ForegroundColor', 'black');
set(handles.uipanel4, 'Visible', 'Off');

3. 切换到 上传头像 面板

set(handles.uipanel2, 'Position', [200 25 64 21]);
set(handles.changeUserName, 'BackgroundColor', [0.94, 0.94, 0.94]);
set(handles.changeUserName, 'ForegroundColor', 'black');
set(handles.uipanel2, 'Visible', 'Off');

set(handles.uipanel3, 'Position', [200 25 64 21]);
set(handles.changePassWord, 'BackgroundColor', [0.94, 0.94, 0.94]);
set(handles.changePassWord, 'ForegroundColor', 'black');
set(handles.uipanel3, 'Visible', 'Off');

set(handles.uipanel4, 'Position', [43 1.5 64 16.857]);
set(handles.uploadPicture, 'BackgroundColor', [0, 51, 102]/255);
set(handles.uploadPicture, 'ForegroundColor', 'white');
set(handles.uipanel4, 'Visible', 'On');

可以看出：当切换到某个面板时，将该面板移动到显示位置，设置 Visible 属性为 On，而将其他面板移动到界面之外，设置 Visible 属性为 Off